Cara membuat back to top dengan efek Bounce

By: Noriko Kazuko on 01.57

Print It

NK-Yup's all sesuai judul nya Cara membuat back to top dengan efek bounce awal nya saya malas
untuk memposting ini Karna sebagian dari kita telah mengetahui triks ini namun karna banyak yang request kepada saya untuk mengshare triks ini jadi saya posting dehh :D

Oke dehh langsung aja
Login ke blogger
Pilih tab template lalu edit html
Dan cari kode ini ]]></b:skin> [menggunakan ctrl+f supaya cepat]
Lalu salin kode di bawah ini

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

 taruh di atas kode tadi

Lalu cari kode </head> 
Salin kode ini

<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>

Pastekan di atas kode tadi

Simpan atau save template lalu pergi ke tata letak dan tambah widged html
ini html nya

<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src=' http://2.bp.blogspot.com-ySiJ6Foc5IE/UBuLahaJ9tI/AAAAAAAAAV8/EFqYeMZK1YA/s1600/Back+To+Top.png' style='margin-right:-9px'/></div> 

Kode yang warna orange bisa di ganti dengan gambar anda sendiri

Simpan dan lihat hasil nya :D

Terimakasih telah membaca Postingan ini

Bagi yang kesulitan bisa komentar saja nanti saya bantu