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/AVvXsEgSdEougVQcLqNYnDxcshQqRT26Rn12JJ_4NlI8bDg45O7C-9ABtjSNHzGTzXtRd-ZfUgaKJFDd8exa4r-S74PHe8O9D0Ldt6kNXnHwUjO2Ir5DCYhfQaVd9FQNmeiLWfhgNm1CItAbAB4/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/AVvXsEgSdEougVQcLqNYnDxcshQqRT26Rn12JJ_4NlI8bDg45O7C-9ABtjSNHzGTzXtRd-ZfUgaKJFDd8exa4r-S74PHe8O9D0Ldt6kNXnHwUjO2Ir5DCYhfQaVd9FQNmeiLWfhgNm1CItAbAB4/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 :)
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.