Cara Membuat Tombol Back To Top dengan Efek Bounce Pada Blog

Kali ini admin mau share cara membuat tombol Back To Top dengan Efek Bounce pad blog, gimana cara? silahkan ikuti langkah-langkah dibawah ini.

Langkah - langkah :
1. Masuk ke Blogger
2. Pilih Template
3. Edit HTML
4. Cari kode ]]></b:skin> gunakan Ctrl+F untuk pencarian lebih mudah
5. Masukan script dibawah ini tepat diatas kode ]]></b:skin>

#Back-to-top {
text-align: center;
z-index: 9999;
position: fixed;
bottom: 40px;
right: 30px;
cursor: pointer;
display: none;
opacity: 0.7;
}
#Back-to-top:hover {
opacity: 1;
}

6. Cari kode </body> gunakan Ctrl+F untuk pencarian lebih mudah
7. Masukan script dibawah ini tepat diatas kode </body>

<div id="Back-to-top">
<img alt="Scroll to top" src="http://2.bp.blogspot.com/-ZR4TAs0YUgQ/VEhynLYkplI/AAAAAAAABHw/iF1qfP9uWIg/s1600/BackToTop.png" /></div>

<script type="text/javascript">
$(function() { $(window).scroll(function() {
    if($(this).scrollTop()&gt;400) {
        $(&#39;#Back-to-top&#39;).fadeIn();
        }
    else { $(&#39;#Back-to-top&#39;).fadeOut();}
    });
    $(&#39;#Back-to-top&#39;).click(function() {
        $(&#39;body,html&#39;)
        .animate({scrollTop:0},300)
        .animate({scrollTop:40},200)
        .animate({scrollTop:0},130)
        .animate({scrollTop:15},100)
        .animate({scrollTop:0},70);
        });
});
</script>

8. Ganti yang berwarna biru dengan gambar yang anda sukai, kalo engga juga gpp :D
9. Save Template dan lihat hasilnya :)

Sekian cara mebuat Back To Top dengan Efek Bounce pada blog, semoga bermanfaat :)
Terima kasih telah membaca artikel tentang Cara Membuat Tombol Back To Top dengan Efek Bounce Pada Blog di blog BumenSoft jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :