Cara Membuat Back To Top Dengan Efek Bounce

Ok sekarang Cyber Cline™ update lagi nih tentang Tutorial Blog.
Kali ini akan membahas cara membuat Back to Top dengan efek bounce.
Langsung aja.... simak dengan baik biar gak ada yang nanya-nanya lagi......


1. Buka Blogger > Rancangan > Edit HTML
2. Centang Expand Template Widget lalu cari ]]></b:skin>
3. Setelah itu taruh css dibawah ini diatas kode tersebut

#IrvanTop {text-align:center;position:fixed;bottom:0px;right:10px;cursor:pointer;        display:none;color:#000; font-family:verdana;font-size:11px;}

 4. Dan taruhkan kode dibawah ini diatas kode </head>

<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;#IrvanTop&#39;).fadeIn(); } else { $(&#39;#IrvanTop&#39;).fadeOut(); } });
$(&#39;#IrvanTop &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>

5. Lalu carilah kode </body> dan letakan kode dibawah ini diatas kode tersebut

<div id='IrvanTop'><img src='URL+GAMBAR+BackToTop' style='margin-right:-9px'/></div> 

6. Selesai.... tinggal SAVE TEMPLATE


Beberapa bagian script diambil dari Google

Credit : http://www.irvankadhafi.com/2012/06/cara-membuat-back-to-top-dengan-efek.html