Cara Menciptakan Tombol Back To Top Dengan Pengaruh Bounce Pada Blog

Kali ini admin mau share cara menciptakan 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 sempurna 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 instruksi </body> gunakan Ctrl+F untuk pencarian lebih mudah
7. Masukan script dibawah ini sempurna diatas instruksi </body>

<div id="Back-to-top">
<img alt=" Kali ini admin mau share cara menciptakan tombol Back To Top dengan Efek Bounce pad blog Cara Membuat Tombol Back To Top dengan Efek Bounce Pada Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt89vAgR0RyVW2OejfPl_Q-QjP6zCiBVJ5L2gIc0msN7BRXCn6OhDhBQBCharSaI0H_V26AiZbQhQvkVhwGqH4MwgMABQbEWdI2Vpn6PTYAR_6-l0tWnnPcQcX1Nuoh1si3ZZxe9FGJ2s/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 kesudahannya :)

Sekian cara mebuat Back To Top dengan Efek Bounce pada blog, biar bermanfaat :)

Bagikan