Rabu, Juli 18, 2012

Cara Membuat Back To Top dengan Efek Jquery

0 komentar

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

Related Post by ~ Heric-Ajha ~ :



Berikan Komentar Tentang Postingan ini

:P :) :( :* :v :D

Label

 
cyb3rSelamat Datang Ditampilan Baru xD , Gunakanlah Browser Google Ch0rMe Agar Tampilan Lebih Sempurna.!!
~Please Klik Here,..!~
Join this site