0 Cara membuat Back to Top dengan Bounce

Kali ini H.G.C Syndicate akan share bagaimana cara membuat Back to Top di blog dengan efek bounce. Untuk contohnya bisa dilihat di blog kami. Pengen Scriptnya? Ikuti lahkah dibawah ini :

• Login ke Blogger
• Pilih Rancangan > Edit HTML
• Centang "Expand Template Widget"
• Kemudian cari code ( ]]></b:skin> )
• Jika sudah ketemu, maka letakan code dibawah ini tepat diatas code ]]></b:skin>

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

• Jika sudah, kemudian cari code </head>
• Kemudian letakan code dibawah ini tepat diatas code </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;#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>

• Lalu Simpan Template

Kalau sudah cara diatas, kemudian ikuti langkah selanjutnya.

• Masuk Rancangan > Tata Letak > Tambah Gadget > HTML/JavaScript
• Jika sudah lalu letakan code dibawah ini tepat di kolom HTML/JavaScript

<div id='toTop'><!-- Back to Top by H.G.C | Edited by Adhi  --><img src='URL GAMBAR BACK TO TOP' style='margin-right:2px'/></div>

• Jika sudah langsung Simpan

Athor : Admin

Script : Google

Baca Selengkapnya :