Home »
Tutorial Blog
» Cara Membuat Back To Top Dengan Efek Bounce
Posted by : Irvan Kadhafi
Monday, June 25, 2012
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() > 100) { $('#IrvanTop').fadeIn(); } else { $('#IrvanTop').fadeOut(); } });5. Lalu carilah kode </body> dan letakan kode dibawah ini diatas kode tersebut
$('#IrvanTop > img').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>
<div id='IrvanTop'><img src='URL+GAMBAR+BackToTop' style='margin-right:-9px'/></div>6. Selesai.... tinggal SAVE TEMPLATE
Beberapa bagian script diambil dari Google
Irvan Kadhafi™ BackLinks !!
URL |
Code For Forum |
HTML Code |
gak bisa van !!!
ReplyDeleteKak Minta Url Gambar punya kakak yang gaara , Please !!!
ReplyDeleteridho saya juga bisa sob tapi harus ijin dulu sama irvan
ReplyDeleteazzz... memang lw Plagiat yah..
DeleteOK irvan bisa ..
ReplyDeleteThanks
Sama2
Deletejgn lupa di follow blog ini
Makasih Irvan !
ReplyDeleteJancooook, keparaaaaaaattt
ReplyDeletethanks banget cok, infonya mantab
Yuhui...... akhirnya ketemu juga yang selama lama ini dicari!
ReplyDeletethanks ya Irvan
cara agar gambarnya align right gimana bang?
ReplyDeletemakasih bang,
taufiqlion007.blogspot.com
keren sob blognya!
ReplyDelete:D
suka banget saya :D
ditunggu kunjungan baliknya ya sob..
http://lavixtastar.blogspot.com