Cara Membuat Tombol Back To Top Yang Keren Dan Responsif

Hai, Sahabat. . Hari ini, saya akan membahas tentang Cara Membuat Tombol Back To Top Yang Keren Dan Responsif.

Daftar isi

1. Apa itu Tombol Back to Top?
2. Apa Fungsi Tombol Back to Top?
3. Cara Membuat Tombol Back to Top yang Keren dan Responsif

Apa itu Tombol Back to Top?

Jika kita perhatikan, kebanyakan blog atau website populer dilengkapi dengan tombol back to top ini. Tombol back to top yang biasanya bergambar panah yang menunjuk ke atas ini biasanya berada di bagian pojok bawah blog sebelah kanan layar kamu. Tombol Back to Top (Tombol Kembali ke Atas) adalah tombol memiliki fungsi untuk menggulirkan blog sampai ke bagian atas secara otnwatis apabila tombol back to top ini disentuh. Dan, Tombol back to Top ini mmiliki manfaat untuk mempermudah para penjunjung website kita.

Apa Fungsi Tombol Back to Top?

Tombol back to top (tombol kembali ke atas) ini memang memiliki fungsi yang cukup penting, terutama bagi kamu yang mempunyai artikel-artikel panjang di blog atau website. Fungsi tombol back to top ini untuk mempermudah pengunjung blog sehingga para pengunjung tidak perlu susah payah menggulir artikel untuk kembali ke atas postingan, karena memang fungsi tombol back to top ini untuk itu. Intinya tombol back to top ini ada untuk mempermudah pengunjung, sehingga mereka merasa dimudahkan untuk mengakses blog atau website kita.

Jika diamati, selain fungsi tmmbol back to top 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 back to top juga jangan sampai membuat loading blog kita menjadi lambat, sehingga tujuan utama pengunjung untuk mengakses blog kita tidak terhambat hanya karena tombol back to top ini. Oleh karenanya, pada tulisan kali ini saya akan berbagi cara membuat tombol back to top yang keren dan responsif, namun tetap fast loading.

Cara Membuat Tombol Back To Top yang Keren dan Responsif

Jika kamu tertarik untuk membuat uombol back to top yang keren dan responsif, ikuti cara berikut ini:

1. Buka akun blogger kamu

Pertama, Cara membuat Tombol Back to Top yang Keren dan Responsif adalah Masuk ke Blogger dengan Akun Google kamu.




2. Edit HTML

Kedua, Cara membuat Tombol Back to Top yang Keren dan Responsif adalah Pilih menu Tema dan kemudian klik Edit HTML.




3. Cek Kode Font Awesome

Ketiga, Cara membuat Tombol Back to Top yang Keren dan Responsif adalah Pastikan di blog kamu 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>




4. Pasang Knde Tombol Back To Top

Keempat, Cara membuat Tombol Back to Top yang Keren dan Responsif adalah 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>




5. Jika semuanya sudah dimasukkan, silahkan Klik Simpan template kamu. Kemudian kamu bisa lihat hasilnya.

Jika langkah cara membuat Tombol Back to Top yang Keren dan Responsif di atas sudah dilakukan dengan benar maka blog kamu kini sudah ada Tombol Back to Top Keren dan Responsif di bagian bawah blog kamu.

Demikianlah penjelasan tentang Cara Membuat Tombol Back To Top Yang Keren Dan Responsif.

Lihat juga:

• Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog Atau Website
• Cara Membuat Dan Memasang Breadcrumb Di Blog
• Cara Membuat Kotak Penelusuran Sitelink Di Blog

Semoga bermanfaat. .