Membuat Tombol Back To Top ala KangIsmet (Bounce)

Tombol back to top sebenarnya fungsinya untuk memudahkan pengunjung untuk scroll ke atas tanpa repot repot geser mouse wheel atau nge-drag scrollbar. Untuk melihat DEMO nya, klik saja tombol berikut Demo





1) Masuk dulu ke blogger

2) Pilih Template ~> Edit HTML

3) Carilah Kode </head> dengan menggunakan fungsi ctrl+f, lalu pastekan kode berikut diatas kode </head>

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

Lewati langkah ini jika template kalian sudah terpasang JQuery

4) Setelah itu, pasang kode CSS nya, dengan cara cari kode ]]></b:skin>, dan letakan kode CSS berikut diatas kode ]]></b:skin>

#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#2a3542;}
#BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}

5) Setelah kode CSS terpasang, carilah kembali kode </head>, dan letakkan script berikut tepat di atas kode </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

6) Setelah langkah ke 5 selesai, klik SIMPAN untuk menyimpan perubahannya, lalu masuk ke Tata Letak ~> Tambah Gadget ~> HTML/Javascript, lalu masukkan kode berikut

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id="BounceToTop" style="display: block;"></div>

Angka 3 itu merupakan posisi Tombolnya, silahkan dipindahkan sesuai keinginan kalian

Terima Kasih untuk Ryan dan KangIsmet

Share :