Cara Membuat Tombol Back To Top yang Ringan dan Responsive di Blogspot

Bagi sahabat blogger, berikut kami sajikan salah satu cara membuat tombol "Back To Top" seperti yang sering anda jumpai di banyak website, termasuk seperti yang saat ini dipasang oleh Putra Kapuas.

Contoh tombol Back to Top di Website Putra Kapuas

Tombol ini sangat berguna bagi para pembaca yang ingin kembali lagi ke bagian atas website setelah membaca artikel panjang. Oke, langsung saja ya, berikut langkah-langkahnya :

1. Login di Blogger kemudian pilih Dashboard, kemudian pilih Blog anda, kemudian pilih Template, kemudian pilih Edit HTML. Kemudian cari kode </head> dan Paste kode berikut ini di atasnya (Ini dilakukan jika memang kode ini belum ada di kode HTML anda, Pakai CTRL + F untuk mempermudah pencarian).

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

2. Kemudian Paste kode berikut ini di atas ]]></b:skin> yang ada di antara kode HTML anda. Pakai CTRL + F untuk mempermudah pencarian.

/* 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}

3. Kemudian Paste kode Jquery dan html berikut ini di atas </body> yang ada di antara kode HTML anda. Pakai CTRL + F untuk mempermudah pencarian.

<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. Kemudian simpan Templatenya, daaaan ....

5. Jreenggg, Nikmati hasilnya :)

Berbagi :