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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVmpsGSo8gTzp0zx5jH1WK-lNUHqaHVv-O9BMYO47zA11fZjObmwWc0fYHdVWctnDwkXstRwFIhVNdmu-Ye2MOwJ56jUpoCDz1PSerkIYnnf-hdPPeTVsnRh3D9neelk2nFTNCz-MEyw/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 :)

Share this post