Cara memasang widget back to top Terbaru 2016

Memasang "back to top" atau "kembali ke atas" di samping blog
Widget back to top adalah alat bantu bagi blogger/web sobat, supaya memudahkan pengujung sobat dalam hal membaca artikel yang terlalu panjang dengan ada nya widget back to top dan hanya menekan tombol saja pengunjung langsung menuju atas tempat judul berada

Sobat blogger tentu pernah melihat sebuah blog/web yang terlalu memanjang ke bawah, dan mungkin juga karena banyaknya komentar di blog atau artikel yang lumayan panjang sehingga pengunjung kesulitan alias perlu memutar scroll mouse ataupun tombol gulir yang ada di sisi kanan. Nah, untuk membantu navigasi pengunjung blog sobat, tidak ada salahnya jika kita memasang widget "back to top' ini. Ya karena dengan mengklik tombol back to top tadi maka pengunjung sobat secara otomatis tampilan layar akan segera menuju ke bagian atas judul posting. sehingga tidak perlu repot lagi memutar scroll mousenya.

Bagaimana ingin mencobanya?

Ikuti langkah-langkah dibawah ini:

Sebelumnya pastikan sobat sudah memback up / download template blog

1. Masuk ke akun blogger >> Dasbor >> Template >> Edit HTML.

2. Cari kode ]]></b:skin>, untuk lebih mudah tekan Ctrl+F

3. Masukkan kode di bawah ini, tepat di atas atau sebelum kode </skin> tadi

<br />

<br />

#backtotop {<br />

padding:5px;<br />

position:fixed;<br />

bottom:10px;right:10px;<br />

cursor:pointer;<br />

}   <br />

<br />

3. Kemudian cari kode </body> masukkan kode berikut </body>

<br />

<a href="#" id="backtotop"><img alt="back to top"  src="<span style="color: red;"> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOCIMP8IEfvqaPG6mjb3msEIe9oN6gSk-B0dW4hujqyyLp6-g6iHDaFCww6Ar0dhU-tcKALfMSc_2IQLpkOTOIOFlCCfCe3vNshd9hvuAP7lesbJ-XWqmpK47FyycRD5303q7wCFW8SY/s1600/back+to+top.png </span>"  /></a>

4. Langkah ke empat, ialah mencari kode </head>

5. Masukkan kode javascript back to top di bawah ini sebelum kode </head> tadi

<br />

<b><span style="color: red;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'</span></b>

type='text/javascript'></script><br />

<script language="javascript">

$(window).ready(function(){

$('#backtotop').click(function(e){

e.preventDefault();

$('html, body').animate({scrollTop:0}, 'slow');

});

});</script>

 6. Klik pratinjau, jika tidak ada error, simpan template. Dan back to top pun sudah muncul di blog sobat.


Catatan:

• Lihat kode CSS bottom:10px;right:10px; pada langkah nomor 2, itu adalah pengaturan posisi tombol back to top, bottom:10px = ukuran tinggi tombol / gambar back to top dari bawah, silahkan sobat atur mau ditinggikan atau diturunkan, semakin besar angka px (pixel) maka semakin tinggi pula posisinya dari bawah. 
• Sedangkan right:10px adalah posisi tombol di sebelah kanan blog dari samping. Silakan sobat ganti jika ingin kekiri tinggal ubah right menjadi left.
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOCIMP8IEfvqaPG6mjb3msEIe9oN6gSk-B0dW4hujqyyLp6-g6iHDaFCww6Ar0dhU-tcKALfMSc_2IQLpkOTOIOFlCCfCe3vNshd9hvuAP7lesbJ-XWqmpK47FyycRD5303q7wCFW8SY/s1600/back+to+top.png adalah url tempat image gambar "kembali ke atas" tadi,
• Lihat kode warna merah langkah 5, jika sudah ada di template blog sobat, jangan dimasukkan lagi kode itu, takut terjadi bentrok kode javascript sehingga widget tidak berfungsi.

Tweet