Tombol Scroll (Back to Top) di Blogspot

Blog yang baik merupakan blog yang dapat membuat pengunjung merasa nyaman dan terlayani. Disamping sisi kontenya, fasilitas-fasilitasnya harus dapat mempermudah pengaksesan kesemua sisi maupun tempat(link).

Bagi anda yang memiliki postingan atau artikel di blog anda, dan dengan memiliki lebih dari 500 kata, pastinya postingan tersebut akan memanjang ke bawah, dan bentuk dari blog anda pun akan semakin memanjang.

Salah satu cara untuk lebih memanjakan pengujung anda adalah dengan memasang tombol "Back To Top" yang dimana ketika pengunjung anda melihat atikel di bagian bawah, tombol tersebut akan berfungsi untuk mengembalikan ke artikel dibagian atas / awal. Tombol ini kini sangat banyak di jumpai di website-website besar maupun blog-blog. Sebagai contoh tombol ini secara default ada di blog-blog wordpress.

Jadi bagi anda yang memiliki blog atau pun website yang ingin memasang tombol ini, saya akan mencoba menjelasaknya.

Cara membuat Tombol Scroll (Back To Top) di Blogspot.

Cara ini saya tujukan bagi anda yang menggunakan blogspot, bagi anda yang menggunakan website berhosting anda bisa menyesuaikannya.

1. Masuk ke Blogger Dahsboard anda. 
2. Pilih menu Template - Edit HTML - Proceed.
3. Ketikan script dibawah ini dibagian style (sebelum tag ]]></b:skin>).

   a:link.scrolltotop{
     width:40px;
     height:40px;
     opacity:0.5;
     position:fixed;
     bottom:50px;
     right:87px;
     display:none;
     text-indent:-9999px;
   background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUOHaHmNR7G3ooS1juZHwtL2D55ol2Ad0wo6AR5vTHTE_I94sOq32dVytdQeDcN7QLGKt2pA3VLeaQKIZOUWzvzwqmWDPbfGca6LGzQiShIpLTHCHpF-TfOJfX3uVdCEk-aE3pJBFgIoGz/s1600/navigate-up-icon.png') no-repeat;
   
   a:hover.scrolltotop {
   opacity:1;
   }

   URL background (yang berwarna merah) bisa anda ganti dengan URL /  alamat gambar yang nantinya akan anda gunakan sebagai tombol scroll-nya.
4. Kemudian ketikan script dibawah ini di bagian body (akan lebih baik letakan sebelum tag </body>).

   <a class='scrolltotop' href='#'/>
   <script>
   $(window).scroll(function(){
           if ($(this).scrollTop() &gt; 100) {
               $(&#39;.scrollup&#39;).fadeIn();
           } else {
               $(&#39;.scrollup&#39;).fadeOut();
           }
       });
   $(&#39;.scrollup&#39;).click(function(){
       $(&quot;html, body&quot;).animate({ scrollTop: 0 }, 600);
       return false;
       });
   </script>
   

5. Untuk memastikan script ini berjalan baik atau tidak anda bisa preview terlebih dahulu. Jika sudah berjalan dengan baik. anda bisa menyimpan (save) template anda.

Sebagai bukti script ini berhasil dan berjalan dengan baik anda dapat melihatnya di samping kanan blog ini. Semoga tutorial ini bermanfaat. Terimakasih.