Cara Membuat Tombol Back To Top pada Blog

Tor Template - Back to top merupakan sebuah tombol yang berfungsi untuk memudahkan pengunjung kembali ke bagian atas halaman blog. Dengan adanya tombol back to top, pengunjung blog tidak perlu repot-repot men-scroll mousenya atau "mengusap-usap" jarinya di "touch pad" atau layar SmartPhone-nya untuk kembali ke bagian atas halaman.

Baca juga vroh : Cara Membuat Breadcrumb Terindex Google dan Valid HTML5

Tombol back to top biasanya terletak di bagian sudut kanan bawah dan secara otomatis akan muncul ketika isi artikel sudah melebihi batas tinggi dari layar monitor. Artinya tombol back to top akan muncul ketika sebuah blog mempunyai artikel yang sangat panjang, dan sebaliknya.

Berikut cara untuk membuat tombol back to top pada blog dengan menggunakan efek fade in/fade out (muncul perlahan) :

1. Pertama login dulu ke akun blogger sobat. Jika sudah masuk Dashbord => Template => Edit HTML.
2. Pasang kode jQuery berikut di atas </head> :
   

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

   Jika blog sobat sudah memiliki kode mirip seperti di atas tapi dengan versi yang berbeda, silahkan lewati langkah ini.
   
3. Paste kode berikut di atas </head> :
   

   <script type='text/javascript'>
   $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#ScrollToTop&#39;).fadeIn()} else { $(&#39;#ScrollToTop&#39;).fadeOut();}});
   $(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},1000);return false})});
   </script>

4. Simpan Template.
   
5. Masuk ke bagian Layout (Tata Letak), kemudian buat widget (Add Widget) Javascript/HTML.
6. Selanjutnya simpan kode berikut :
   

   <style type='text/css' scoped='scoped'>
   #ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
   </style>
   <div id='ScrollToTop'><img alt='Back To Top' height='41' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicOpmAbU46uYIrSfvYtu5-vncKeMf7ZNogGpz0tdenYvKVxmGOlYxUPnvm-cYzmO5q8AhVTrVHcolZTcdow3DCIBbDKP84E15Tu602-ZOvKfJAlSY2xWeR9rjhJj9kElyjqysds3PCaRhc/s1600/top.png' title='Back To Top' width='36'/></div>

^^Semoga Berhasil^^

Credit to :

http://blog.kangismet.net/