Jumat, 31 Mei 2013

Cara Membuat Back To Top Dengan Efek Bounce

3:59:00 PM Posted by Unknown 1 comment
 

Hai sob..Lama gak post.. #basi.. wakakakakakak.. Kali ini admin diberi kesempatan ama tuhan untuk ngepost.. :) ya.. admin mau ngepost Cara Membuat Back To Top Dengan Efek Bounce.. Hehehe..
Langsung aja yah.. 
#Cara admin pasti berhasil kalo sobat mengikutinya step by step.. ok
1. Login di Blog sobat
2. Klik template >> Edit HTML
3. Cari codding ]]></b:skin> (menggunakan CTRL + F)
4. Pastekan code dibawah ini diatas ]]></b:skin>

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

5. Cari kode </head>
6. Copy kan kode dibawah ini tepat dibawah 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;#toTop&#39;).fadeIn(); } else { $(&#39;#toTop&#39;).fadeOut(); } });
$(&#39;#toTop &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>
 


7. Simpan Template..
8. Belum selesai sob.. hehehehe setelah disimpan klik Tata Letak
9. Trus Klik Tambah gadget trus Klik HTML / Javascript
10. Copy Kode dibawah ini.. Dan Save

<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='http://picturestack.com/408/690/3RMToTopyonbijEz.png' style='margin-right:-9px'/></div>

Keterangan :
Yang berwarna  Merah diganti dengan URL gambar sobat.. Okokokokok.. hhahaha
SEMOGA BERHASIL & KEEP BLOGGING

 

1 komentar: