Cara Membuat Tombol Back To Top Smooth

Cara Membuat Tombol Back To Top Smooth

Tombol ini terkadang sangat berguna pada blog yang mempunyai artikel-artikel panjag, sehingga jika kita telah membacanya sampai bawah kita akan agak sulit untuk mengembalikannya ke atas. Jadi memang benar sekali kalau tombol ini sangat berguna karena hanya satu kali klik saja kita sudah langsung ada di bagain atas suatu blog.

Tutorial Pemasangan Tombol

1. Buka blogger dan pergi ke template lalu edit HTML
2. Copy paste script berikut tepat di atas kata </head> gunakan CTRL+F untuk mencarinya.
   
   <script src='http://bagiinjectfreeall.hol.es/jquery-1.7.2.min.js' type='text/javascript'/> <!-- easing plugin ( optional ) --> <script src='http://bagiinjectfreeall.hol.es/easing.js' type='text/javascript'/> <!-- UItoTop plugin --> <script src='http://bagiinjectfreeall.hol.es/jquery.ui.totop.js' type='text/javascript'/> <!-- Starting the plugin --> <script type='text/javascript'> $(document).ready(function() { /* var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>
3. Copy paste kode berikut tepat di atas kata ]]></b:skin>
   
   /* |-------------------------------------------------------------------------- | UItoTop jQuery Plugin 1.2 |-------------------------------------------------------------------------- */ #toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:100%; background:url(http://www.lab.mattvarone.com/projects/jquery/totop/img/ui.totop.png) no-repeat left top; } #toTopHover { background:url(http://www.lab.mattvarone.com/projects/jquery/totop/img/ui.totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none; }
4. Simpan template dan lihat hasilnya
5. Enjoy

Baca juga tutorial-tutorial lainnya yang saya buat di blog ini.

Cara Membuat Tombol Back To Top Smooth