Cara Membuat Tombol Back To Top Keren Fast Loading di Blog

Jika anda perhatikan, kebanyakan blog atau situs populer dilengkapi dengan tombol back to top ini. Tombol yang biasanya bergambar mata panah menunjuk ke atas ini biasanya berada di bagian pojok bawah blog sebelah kanan layar anda. Tombol back to top (kembali ke atas) ini memang cukup penting keberadaanya, terutama bagi mereka yang mempunyai artikel-artikel panjang di blognya. Dengan menyentuh tombol ini, pengunjung tidak perlu susah payah menggulir artikel untuk kembali ke atas postingan, karena memang fungsinya tombol ini untuk itu. Intinya tombol ini ada untuk mempermudah pengunjung, sehingga mereka merasa dimudahkan untuk mengakses blog kita. 

Jika diamati, selain fungsinya tersebut, keberadaan tombol ini juga membuat tampilan blog menjadi lebih menarik, sehingga pengunjung juga lebih betah untuk berada di blog kita. Namun juga perlu diingat bahwa keberadaan tombol juga jangan sampai membuat loading blog kita menjadi lambat, sehingga tujuan utama pengunjung untuk mengakses blog kita tidak terhambat hanya karena tombol ini. Oleh karenanya, pada tulisan kali ini saya akan berbagi cara membuat tombol back to top yang keren, responsive, namun tetap fast loading. Untuk tampilannya seperti berikut ini:

Tombol back to top keren

Jika anda tertarik untuk membuatnya, ikuti langkah-langkah berikut ini:

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Sebelumnya pastikan di blog anda sudah terpasang kode font awesome, jika belum silahkan tambahkan kode berikut ini di atas kode </head>
<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”></link>

Jika sudah, langkah selanjutnya yaitu cari kode ]]></b:skin> dan letakkan kode berikut ini tepat di atasnya:

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

Jika itu sudah dimasukkan, jangan dulu disimpan, langkah terakhir letakkan 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() > 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>

4. Jika semuanya sudah dimasukkan, silahkan simpan template anda kembali dan anda bisa lihat hasilnya. 

Jika langkah di atas sudah dilakukan dengan benar maka blog anda kini sudah ada tombol back to top keren di bagian bawahnya. Sekian tutorial kali ini. Semoga bermanfaat.

Update! 

Jika anda merasa loading blog kurang cepat karena script di atas menggunakan font awesome, anda juga bisa menggantinya dengan menggunakan ikon svg.

Artikel Terkait