CARA MEMBUAT TOMBOL "BACK TO TOP" DENGAN EFEK BOUNCE DI BLOG

CARA MEMBUAT TOMBOL "BACK TO TOP" DENGAN EFEK BOUNCE DI BLOG

     Tombol "back to top" sangat bermanfaat dalam sebuat artikel di blog, terlebih lagi jika artikelnya memiliki kalimat yang banyak dan memanjang ke bawah. Dengan adanya tombol ini, pengunjung akan nyaman dan terasa praktis untuk kembali ke bagian atas tampilan blog. 

Berikut ini cara membuat tombol "back to top" dengan efek bounce:
1. Masuk ke Blogger Home kalian.
2. Kemudian pilih Template Edit > HTML.
3. Setelah itu cari kode </head>, kemudian copy dan pastekan diatas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<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>

4. Klik save / simpan.
5. Masuk ke Tata Letak > Add Gadget.
6. Pilih HTML/JavaScript.
7. Kemudian masukan kode dibawah ini :

<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/AVvXsEjbS4Q5TsjjSEvu0XZrmtEYH9u3MmHvc7Hdigi8ER8LGMwJ2f_umrYEA58EerB92h1MfkoxJzNHb2eq6TcX03u2qjHsPb4152ouEldaeHoUlXv_YGIJaJjMlgpRMTTTm8CMxGEt_W4LN6k/s1600/Arrow+Up+ViperGoy+Blog.png'/></div>

8. Save / Simpan tanpa diberi judul.

     Sebagai contohnya, anda dapat melihat dan mencoba tombol "back to top" yang ada di tampilan blog ini. Sekian artikel saya kali ini, semoga berhasil dan bermanfaat!
Jangan lupa tinggalkan komentar ya...