Pages

Rabu, 21 Mei 2014

Cara Membuat Tombol Back To Top dengan Efek Bounce

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.

Tidak ada komentar:

Posting Komentar