Memasang Tombol Kembali Keatas di Blog

23.19 Gusti Ardias Riantono 2 Comments

Memasang Tombol Kembali Keatas di Blog - Helohe sobat haha, di blog kalian sudah dipasang tombol kembali ketatas atau bahasa wong londonya back to top belum? kalau artikel kalian itu panjang dan jauh ketika di skrol kebawah harusnya dipasang widget ini. Apa fungsinya? ya biar pembaca tidak capek skrol keatas lagi (pegel keleus) :D

Memasang Tombol Kembali Keatas di Blog

Nah untuk memasang widget kembali keatas ikuti langkah berikut
Langkah pertama, pasang jQuery di template kalian diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
#info jika di template kalian sudah terpasang jQuery lewati langkah ini

Langkah kedua, simpan kode dibawah ini tepat diatas </head>
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script> Kode diatas menggunakan fade in dan fade out (munculnya perlahan tetapi pasti #apasih), apabila kalian mau memakai versi lainnya tombol muncul dari bawah ganti kode diatas menggunakan kode dibawah ini
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script> Langak ketiga, buat widget baru di Tata letak -> Tambahkan gadget -> Html/Javascript isi dengan kode dibawah ini lalu simpan
<style type='text/css' scoped='scoped'> #BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='BounceToTop'> <img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBPzxF8GfU7JZPrigiDXOmuOzbv_AjhRjmLk3E9wYS_JsBXxqK9mHMPq-qlLd8kb4YqIKkhSkGVoB5T_LavXOPS4s3tPxqZ0Lkpis9qd4EhpdQuBKuVBHai5KEu5fUjFz5fyVQJlbxmRG/s1600/arrow-up_basic_blue.png'/></div>
Oke sip jadi sudah tombol keatasnya 8-), mudah bukan? selamat mencoba~

#Sumber Kang Ismet