Menambahkan Tombol Back To Top Pada Blogger

Jika blog sobat termasuk kedalam blog yang "Panjang", hehehe. Menambahkan tombol back to top pasti akan lebih mempermudah pengunjung blog sobat ketika akan scolling ke batas atas blog sobat. Ketika pengunjung selesai membaca postingan sobat, lalu menekan tombol ini maka dalam sekejap pengunjung blog sobat akan kembali ke batas atas blog. Menarik bukan?






Beginilah screenshot nya:

Caranya mudah saja


1. Buka "Rancangan" lalu "Edit HTML"
2. Cari kode berikut

</body>

3. Letakkan kode dibawah ini diatas kode tadi.

<a href="#" id="backtotop"><img src='http://lh3.ggpht.com/_VB_ZBQ82xOI/TSmF8K59IYI/AAAAAAAAAq0/uGoeMJsotyI/s800/backtotop_www.cr0wja.co.cc.png'/></a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

/*-----------------------

*Scroll to top


-----------------------*/



$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});



$(function() {

$("#toTop").scrollToTop();

});

</script>

4. Cari kode berikut

</b:skin>

5. SIsipkan kode berikut diatasnya

#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

6. Simpan template, lalu lihat hasilnya. Jika sobat mengalami kesulitan, tanyakan saja dengan berkomentar. OK Jangan Lupa Komentar Yaa..