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:
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. Atau kalau tidak ingin ribet utak-atik silahkan kunjungi saja artikel saya berikut ini:
Jika anda merasa loading blog kurang cepat karena script di atas menggunakan font awesome, anda juga bisa menggantinya dengan menggunakan ikon svg. Atau kalau tidak ingin ribet utak-atik silahkan kunjungi saja artikel saya berikut ini:
Labels:
Blogging
Thanks for reading Cara Membuat Tombol Back To Top Keren Fast Loading di Blog. Please share...!
gan font awesome sama link bootstrap bisa di ganti dengan SVG ikon gak ya...Soalnya link itu memblokir loading sampai 22%
BalasHapusKayaknya sih bisa gan. Beberapa font awesome di blog saya ini juga sudah saya ganti pake ikon svg. Cuma kalau untuk pembuatan back to top ini memang saya blm mencobanya. Kayake agak ribet kalo mau dibikin tampilannya sama. Mungkin bisa dibuat lebih sederhana.
Hapus