Cara Membuat Tombol Back To Top dengan Efek Bounce Pada Blog
Diposting oleh : Admin | Dirilis :
November 13, 2014 | Series :
Tutorial
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;
}
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/AVvXsEjS9IKSKVH4JlHVpVSjeF69bPz-7XOYzCaBbmgV6IzdJ4E4cxPNDMjeXICTqKkSCY_ElkI56ulvw2Qyaa886dbdkhfufDmDXS64vrDCSqzqH9NhjY1oPFj8mtHL1nvkeuAGanK1EG-GbUU/s1600/BackToTop.png" /></div>
<script type="text/javascript">
$(function() { $(window).scroll(function() {
if($(this).scrollTop()>400) {
$('#Back-to-top').fadeIn();
}
else { $('#Back-to-top').fadeOut();}
});
$('#Back-to-top').click(function() {
$('body,html')
.animate({scrollTop:0},300)
.animate({scrollTop:40},200)
.animate({scrollTop:0},130)
.animate({scrollTop:15},100)
.animate({scrollTop:0},70);
});
});
</script>
<img alt="Scroll to top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS9IKSKVH4JlHVpVSjeF69bPz-7XOYzCaBbmgV6IzdJ4E4cxPNDMjeXICTqKkSCY_ElkI56ulvw2Qyaa886dbdkhfufDmDXS64vrDCSqzqH9NhjY1oPFj8mtHL1nvkeuAGanK1EG-GbUU/s1600/BackToTop.png" /></div>
<script type="text/javascript">
$(function() { $(window).scroll(function() {
if($(this).scrollTop()>400) {
$('#Back-to-top').fadeIn();
}
else { $('#Back-to-top').fadeOut();}
});
$('#Back-to-top').click(function() {
$('body,html')
.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 :)
