Cara Membuat Back To Top dengan Efek Jquery

bosen nih liburan gak ada kerjaan ya udah aku 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^_^


Credit : Adam-Xp

Backlink Please..!!

URL

Code For Forum

HTML Code <a href='http://heric-ajha.blogspot.com/2012/07/cara-membuat-back-to-top-dengan-efek.html' target='_blank'>Cara Membuat Back To Top dengan Efek Jquery</a>

Artikel terkait :