-->
CSS Trik Blogger Tutorial Cara Membuat Tombol Back To Top dengan Efek Bounce

Cara Membuat Tombol Back To Top dengan Efek Bounce

in , ,
Banyak sih macam maca tombol back to top untuk memudahkan para pembaca, jadi gak cape scrool ke atas.

Langsung aja ya, simak baik-baik.
  • Login blog
  • Pilih Template
  • Terus ke Edit HTML
  • Cari kode  ]]></b:skin>( Untuk mempermudah pencarian gunakan CTRL+F )
  • Copy kode di bawah :
#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}
  • pastekan di atas kode ]]></b:skin>
  • lalu cari kode </head> , copy kode di bawah :
<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>
  • Paste di atas kode </head>
  • Simpan/save Template

 Trus pilih "tata letak" , Tambah gadget HTML/Javascript , copy paste 
kode Di bawah :
<div id='toTop'><!-- Back to top animation written by farizemo |edited by ilham mboh --><imgsrc='http://i1072.photobucket.com/albums/w376/Ardana0077/dada.png'style='margin-right:-9px'/></div>
Catatan: URL warna Merah ganti dengan URLgambar kamu.

 Mudahkan???
Selamat mencoba.
Terimakasih telah membaca artikel Cara Membuat Tombol Back To Top dengan Efek Bounce dan terimakasih telah berkunjung.
Semoga bermanfaat.
Label: , ,