Cara Pasang Back to Top di Blogger - Tombol Kembali ke Atas Keren

Baca Juga

Cara memasang tombol kembali ke atas (Back to Top) di Blogger sangat mudah.

Back to Top di Blogger ini berfungsi memudahkan pengunjung kembali ke bagian atas halaman sekali klik atau tap.

Fitur ini membuat blog kita ramah pengguna (user friendly) sekaligus memenuhi unsur pengalaman pengguna (user experience/UX) yang wajib diperhatikan.

Cara Pasang Back to Top di Blogger 

Berikut ini Cara Pasang Back to Top di Blogger. Tampil di bagian kanan bawah halaman blogger, seperti di blog ini.

1. Klik Tema > Edit HTML
2. Simpan kode CSS Back to Top Blogger berikut ini di atas kode ]]></b:skin>

#back-to-top{background:transparent url(https://resources.blogblog.com/blogblog/data/1kt/transparent/black50.png) repeat scroll top left;color:#ffffff;padding:6px 8px;font-size:24px;border-radius:3px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:15px;z-index:999}

3. Simpan kode tombol kembali ke atas berikut ini di atas kode </body>

<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'></i>
</a>
</div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>

Demikian cara pasang back to top di blogger. Sangat mudah bukan?