Cara Membuat Tombol Back To Top Dengan Efek Bounce

Cara Membuat Tombol Back To Top Dengan Efek Bounce - Tombol back to top atau kembali ke atas merupakan fasilitas yang harus di gunakan di setiap blog karena dengan tombol ini dapat membantu pengunjung blog anda untuk kembali ke atas halaman.

Sebelumnya saya pernah memberikan tutorial cara membuat tombol back to top sederhana, namun kali ini saya akan bagikan tutorial cara membuat tombol back to top dengan efek bounce.

Jika anda tertarik untuk mengunakan tombol back to top dengen efek bounce ini, silahkan ikuti langkah-langkah dibawah ini :

1. Login ke blogger
2. Klik " Template " kemudian klik " Edit HTML "
3. Selanjutnya cari kode " </head> " gunakan Ctrl + F agar lebih mudah
4. Setelah ketemu masukan kode dibawah ini tepat di atas kode " </head> " :

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

Ingat ! Lewati langkah ini apabila kode diatas sudah ada di template blog anda.

5. Dan masukan juga kode dibawah ini tepat di atas kode " </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>

6. Kemudian " Simpan Template "

Belum selesai, masih ada langkah selanjutnya. Lihat dibawah ini :

1. kemudian klik " Tata Letak " selanjutnya klik " Tambahkan Widget "
2. Cari " HTML/Javascript " 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/AVvXsEh5RdxGjCdXDQHe_eX6kKY6L2ar2ng5FLUILu0bgezMeIoA1oSKzaSHIKr1-1Qr3ziweABT02CwkcGXYrV7QLcVVN59Jm5XJhU7BvOnbn6etFbpk8iv_MPFDsFmm_Ubx8N1JoIJ8szvpYs/s1600/backtop.png'/></div>

Keterangan :

• Ganti kode berwarna merah dengan url gambar tombol back to top yang anda punya

 3. Kemudian " Simpan "

Itulah tutorial singkat cara membuat tombol back to top dengan efek bounce. Semoga artikel ini bermanfaat. Terima kasih