Cara Membuat Back To Top Dengan Efek Bounce

Diposting oleh John Holongky Sinaga on Jumat, 20 Juli 2012

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

{ 2 komentar... read them below if any or add comment }

Anonim mengatakan...

keren gan !!!

Download Video Anime Naruto Shippuden Sub Indo mengatakan...

gan tukeran link yuk...
pasang duluan ya link ane dgn nama Download Anime Subtitle Indonesia

terus konfirmasi di blog ane, pasti langsung ane pasang balik gan. ini linknya http://batuahku.blogspot.com

Posting Komentar

 
FASTSEO - SEO Friendly Blogger Template Design by Tutorial SEO Blogspot