Cara Mudah Membuat Back To Top Button di Blogger

Assalamu'alaikum Wr. Wb.

Untuk para content blogger yang biasa menulis artikel panjang, agar pembaca kalian tidak ribet scroll mouse ataupun menggunakan jarinya di layar HP saat membaca dan ingin kembali ke awalan artikel, tombol Back To Top adalah solusi yang paling tepat.

Banyak cara mudah untuk membuat tombol Back To Top di blog, kalian bisa cari informasi tersebut di internet. Hanya saja cara yang mau aku bagikan ini menurutku adalah cara paling mudah yang pernah aku coba.

Berikut langkah-langkah cara membuat Back to Top Button di Blogger :

1. Pergi ke Tema blogger, pilih tombol berikut  

2. Pilih Edit HTML.

3. Cari kode ]]></b:skin> menggunakan Ctrl+F lalu salin kode berikut ini di atas kode tersebut.

<div style="background-color: #ffe0f0; border-radius: 10px; padding: 17px; text-align: left;"><pre>#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}</pre></div>

Catatan:

Background dan warna tombol bisa diubah sesuai selera. Silahkan edit bagian background: #E73037 dan color: #ffffff kemudian ubah kodenya. Untuk kode warna bisa dilihat disini.

4. Kemudian salin 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>

5. Selanjutnya salin kode berikut di atas kode </head>

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

6. Langkah terakhir, simpan template!

Sumber

***

Bagaimana? Mudah bukan 😁

Kalian bisa bertanya melalui kolom komentar jika masih ada yang kurang jelas. Semoga artikel ini bermanfaat. See you guys 😘

Wassalamu'alaikum Wr. Wb.

Tags Blogger