Cara Membuat Tombol Back To Top Dengan Efek Bounce

 

Selamat malam sobat Blogger kali ini saya akan share Cara membuat Back To Top Dengan Efek Bounce ( itu loh... yang memantul-mantul kaya bola!!! ). Ok gak usah banyak bicara langsung saja lihat tutorialnya di bawah ini :

Langkah Pertama :

• Log In dulu ke Blogger.
• Lalu masuk ke Menu Template => Edit HTML.
• Jangan lupa centang Expand Template Widget ( atau kalo menggunakan tampilan Edit HTML yang baru klik semua tanda panah berwarna hitam yang ada di sebelah kiri kode HTML ).
• Cari kode <head/>.
• Kemudian masukkan kode di bawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() &gt; 100) { $(&#39;#HermanbagusTop&#39;).fadeIn(); } else { $(&#39;#HermanbagusTop&#39;).fadeOut(); } });

$(&#39;#HermanbagusTop &gt; img&#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>

• Kemudian simpan.

Langkah Kedua :

• Masuk ke menu Tata Letak => Add Gadget => HTML/JavaScript.
• Masukkan kode di bawah ini :

<style>

#HermanbagusTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}

</style>

<div id='HermanbagusTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc8yxUxRMr-mGl9483qZyF7TvqF3uSZOr3-PPFmmus0bRiuhf14xzu4QhV0a4b_Hck5OJZQcd-zED4r1rXE0L2iJkoupKn3A6X5UV-ieEqiMUC_WQPyOm2WgHNaLd6twLoyE7IB0NVxLg/s150/back+to+top+hermanbagus.png' style='margin-right:-9px'/></div>

Catatan :

Sobat bisa mengganti kode yang berwarna BIRU dengan URL gambar yang sobat inginkan.

• Kemudian simpan.