Pasang Back To Top Ringan dan Responsive di Blog

Cara Mudah Memasang Back To Top yang Ringan dan Responsive di Blog

Tentu sobat tahu button Back to Top di blogger, seperti namanya adalah tombol untuk kembali ke bagian atas website. Letaknya biasanya berada di isi kanan bawah blog. Tombol ini sangat berguna, karena membantu pengunjung blog kembali ke halaman atas dengan cukup satu kali klik, tanpa harus melakukan scrolling berkali-kali dengan mouse atau "mengusap-usap" jari pada layar smartphone. Terutama pada halaman dengan banyak komentar. Dengan kata lain, tombol back to top ini membuat blog menjadi user friendly.

Terdapat banyak cara untuk melakukannya, yaitu dengan jquery, tanpa jquery, dengan font awesome, dan lainnya. Kali ini WebKeren hanya akan membahas tutorial memasang back to top yang ringan, smooth, responsive, dan cepat dengan font awesome.

Note : kalau pada blog sobat sudah terdapat tombol ataupun widget back to top sebaiknya dihapus terlebih dahulu agar tidak double yang membuat loading blog menjadi berat. Berikut ini langkah-langkah pemasangannya.

Cara Membuat Back To Top Ringan dan Responsif

1. Log in Blogger > Dashboard > pilih Blog > pilih menu Template > Klik Edit HTML

2. Cari kode </head> dan Paste Kode Bootstrap font awesome berikut ini di atasnya (Kalau belum ada)

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

3. Paste kode css berikut ini di atas ]]></b:skin> atau </style>

/* Back To Top */
#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}

4. Paste kode Jquery dan html berikut ini di atas </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() > 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>

5. Simpan Template

Coba lihat hasilnya, akan terdapat tambahan tombol di sisi kanan bawah blog. Dengan meng-klik atau menekannya, sobat akan kembali ke bagian atas blog.

Silakan tulis di kolom komentar kalau sobat punya pendapat atau pertanyaan.

Jangan sungkan berbagi artikel ini dengan tombol share di bawah. Semoga bemanfaat untuk kita semua. salam sakupintar