Cara Membuat Tombol Back to Top di Blogger dan WP

TOMBOL back to top (kembali ke atas) adalah widget berupa panah ke atas atau teks “back to top”. Biasanya ada di bagian kanan bawah.

Tombol ini memudahkan pengunjung atau pembaca kembali ke halaman bagian atas denan sekali klik atau tap. Tombol back to top biasa ada di website profesional.

Cara Membuat Tombol Back to Top di Blogger

1. Tema > Edit HTML

2. Simpan kode berikut ini di atas kode ]]></b:skin>

#back-to-top {background: #E73037;color: #ffffff;padding: 8px 10px; font-size:24px}
.back-to-top {position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

3. Simpan kode 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'/>
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

4. Pasang link ke font awesome di atas kode </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Kita juga bisa gunakan cara lain yang dishare W3Schools dan di Codepen berikut ini.

See the Pen
Back to Top Button by Matthew Cain (@matthewcain)
on CodePen.

Cara Membuat Tombol Back to Top di WP

Untuk blog wordpress, kita bisa menggunakan plugin WPFront Scroll Top, plugin pembuat back to top di blog Selfhosted WP.

Demikian cara membuat tombol Back to Top di Blogger dan WP. Happy Blogging!