Membuat Widget Back to Top di Sisi Blog

Memasang widget "back to top" atau "kembali ke atas" di samping blog.

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

Lihat LIVE demonya klik di sini.

Bagaimana cara menambahkan widget back to top ini?

Sebelumnya pastikan sobat back up / download dulu template blog kita

1. Masuk ke akun blogger > Dasbor > Template > Edit HTML > Lanjutkan> centang expand template widget.

2. Cari kode ]]></b:skin>, 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;">http://julak-project.googlecode.com/files/back%20to%20top.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.


Pengaturan:

• Lihat kode CSS bottom:10px;right:10px; pada langkah nomor 2, itu adalah pengaturan posisi tombol back to top, bottom:10px artinya ukuran tinggi tombol / gambar back to top dari bawah, silahkan sobat atur mau ditinggikan atau diturunkan, semakin besar angka px (pixel) maka semakin tinggi posisinya dari bawah. 
• Sedangkan right:10px adalah posisi tombol di sebelah kanan blog dari samping. Silakan sobat ganti jika kekiri tinggal ubah right menjadi left.
• http://julak-project.googlecode.com/files/back%20to%20top.png adalah url tempat menyimpan image gambar "kembali ke atas" tadi, saya sarankan, jika ingin menggunakan widget ini, silakan hosting sendiri di googlecode, siapa tahu nanti terhapus. silakan lihat artikel Cara Menyimpan Javascript dan Image di Google Code.
• 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.

Bagaimana.. jadi nggak widget back to top nya ...?