Cara Membuat Tombol Back Top Di Blog
Cara Membuat Tombol Back Top Di Blog
 Bagaimana Cara Membuat Tombol Back Top Dengan Efek Smooth Di Blog? Itu adalah suatu pertayaan sewaktu saya mencari Tombol Back Top Di Blog.Jika anda mempunyai Suatu Konten Di Blog dan memang Konten tersebut sangat Panjang maka Tombol Back Top ini sangatlah bermanfaat bila anda pasang di blog .Jadi Tombol Back Top ini akan mempermudah Dan sekaligus membantu Visitor menggulung Artikel ke posisi atas artikel anda.

 Lalu apa yang di maksud Efek Smooth Itu sendiri? Efek smooth Akan memungkinkan Tombol yang kita pakai tersebut bisa menggulung dengan halus.Tidak langsung Keatas secara Tiba-tiba.Lalu bagaimana cara membuatnya? Untuk pembuatannya ikuti langkah-langkah di bawah ini :

1.Pertama-tama Login Blogger.
2.Langkah Kedua Dashboard - Template - Edit HTML - kemudian Centang Expand Widget Template - Sesudah Itu carilah Kode ]]></b:skin> Untuk mempermudah pencarian Kode gunakan Ctrl + U Kemudian masukkan kode ]]></b:skin> di dalamnya.Kalau sudah anda ketemukan tinggal copy kode di bawah ini Tepat di atas Kode ]]></b:skin> :

#top-nav {

  position:fixed !important;

  position:absolute; 

  bottom:25px;

  right:15px;

  z-index:999;

}

3.Langkah Berikutnya adalah sama dengan No.2 - kemudian Cari Kode   </head> Untuk mempercepat Proses pencarian Kode sama halnya dengan Point No.2 Kalau sudah anda ketemukan tinggal copy kode di bawah ini tepat di atas kode   </head> :

<script type='text/javascript'>

$(window).scroll(function() {

    if($(this).scrollTop() &gt; 200) {

        $(&#39;#top-nav&#39;).fadeIn();

    } else {

        $(&#39;#top-nav&#39;).fadeOut();

    }

});



$(&#39;#top-nav&#39;).hide().click(function() {

    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);

    return false;

});

</script>

4.Langkah Ke empat seperti Point No.2 .Kemudian Cari Kode </body> untuk memepercepat Proses pencarian code sama dengan point No.2 Kalau sudah anda ketemukan Code </body> tinggal masukkan kode di bawah ini Tepat diatas Kode </body> :

<a href='#' id='top-nav' title='Kembali Ke Atas Blog!'>

    <img src='http://3.bp.blogspot.com/-Qvak4L3BslI/T6IjbG7zbhI/AAAAAAAACn8/at7NfNdyV64/s1600/back-to-top.png'/>

</a>

5.Langkah Terakhir Tinggal Save Template atau simpan Template.

Keterangan :
 Untuk Link Image http://3.bp.blogspot.com/-Qvak4L3BslI/T6IjbG7zbhI/AAAAAAAACn8/at7NfNdyV64/s1600/back-to-top.png Bisa anda ganti dengan link image yang anda mau,sesuai kebutuhan dan selera sobat.

 Itulah dari beberapa langkah Cara Membuat Tombol Back To Top dengan Efek smooht di Blog.Bagaimana sobat!! apakah anda tertarik untuk mencobanya? Semoga berhasil.

Post a Comment

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

Lebih baru Lebih lama