Cara Mudah Membuat Tombol Back To Top Pada Blog

Cara Mudah Membuat Tombol Back To Top Pada Blog - Pada artikel ini saya akan membagikan bagaimana cara mudah membuat tombol back to top pada blog. Alasan mengapa kita perlu membuat tombol back to top adalah agar dapat dengan mudah kembali ke atas halaman blog hanya dengan sekali tekan tanpa bersusah-suaah scroll ke atas terlebih artikel di laman postingan tersebut sangat panjang.

Berikut saya berikan cara mudah membuat tombol back to top pada blog;

1. Log in ke Blogger.com terlebih dahulu.

2. Klik menu Template > Edit HTML. Terlebih dahulu disarankan agar mem-backup html sebelum melakukan pengeditan agar jika terjadi kesalahan dapat dengan mudah mengembalikan seperti sebelum dilakukan pengeditan.

3. Jika sudah membackup, Klik Edit HTML, kemudian cari kode <head> dengan menggunakan CTRL+F. Paste kode di bawah ini, kemudian klik Save Template.

Catatan: Sebelum mempastekan kode di atas, pastikan kode tersebut belum ada di bawah kode <head>. Jika telah telah ada, jangan pastekan kode tersebut dan langsung saja ke langkah no. 4.

4. Klik Layout > Klik Add Gadget > Pilih HTML/ Javascript. Kemudian pastekan kode di bawah ini lalu Save.

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="MASUKKAN URL GAMBAR" alt="Back to Top" / ></a>

Silahkan ganti huruf berwarna merah dengan URL gambar tombol back to top yang akan digunakan. URL gambar tombol back to top bisa diperoleh dengan meng-upload pada blog, photobucket atau searching di Google.

Agar memudahkan, saya berikan beberapa tombol back to top yang dapat di ambil URLnya. Pilih salah satu yang paling disuka.