Cara Membuat Back To Top Dengan Efek Bounce

Ok sekarang devilz4rt 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. lalu simpan template nya !!!



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