Cara Membuat Back To Top Dengan Efek Bounce Dengan jQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Sekarang gue bakalan ngasih tutorial blog yaitu cara bikin back to top tapi ini back to top nya beda soalnya pke efek Bounce efek bounce itu seperti memantul gitu loh. nah penasaran kan langsung kita coba yaa...!!!

1. Buka Blogger, Rancanga, Edit HTML

2. Setelah itu centang Expand Template Widget terus cari kode ]></b:skin>

3. Terus taruh CSS di bawah di atas kode   ]></b:skin>

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

4. Dan taruh kode di bawah ini di atas 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;#Muftop&#39;).fadeIn(); } else { $(&#39;#Muftop&#39;).fadeOut(); } });$(&#39;#Muftop &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 cari kode </body> dan taruh kode berikut di atas kode tersebut

<div id='toTop'><!-- Back to top with bounce effect | edited by RPC-Syndicate --><img src='URL-GAMBAR-LHO' style='margin-right:-9px'/></div>

6. Kalau sudah selesai tingal klik Save Template

NB :
- Tulisan URL-GAMBAR-LHO ganti dengan url gambar kalian yg akan di jadikan back to top
- Jangan lupa follow and like blognya yaa^^
- Jika ingin mengcopas postingannya sertakan SUMBER nya okay^_^

STOP PIRACY, KEEP CREATIVIE

Diposkan oleh Rizky Rama — Senin, 02 Juli 2012