Cara Memasang Back To Top yang Ringan dan Responsive di Blog

Tentu sobat tahu button Back to Top di blogger, seperti namanya adalah tombol untuk kembali ke bagian atas website. Letaknya biasanya berada di isi kanan bawah blog. Tombol ini sangat berguna, karena membantu pengunjung blog kembali ke halaman atas dengan cukup satu kali klik, tanpa harus melakukan scrolling berkali-kali dengan mouse atau "mengusap-usap" jari pada layar smartphone. Terutama pada halaman dengan banyak komentar. Dengan kata lain, tombol back to top ini membuat blog menjadi user friendly.

Terdapat banyak cara untuk melakukannya, yaitu dengan jquery, tanpa jquery, dengan font awesome, dan lainnya. Kali ini WebKeren hanya akan membahas tutorial memasang back to top yang ringan, smooth, responsive, dan cepat dengan font awesome.

Note: kalau pada blog sobat sudah terdapat tombol ataupun widget back to top sebaiknya dihapus terlebih dahulu agar tidak double yang membuat loading blog menjadi berat. Berikut ini langkah-langkah pemasangannya.

Cara Membuat Back To Top Ringan dan Responsif

1. Log in Blogger > Dashboard > pilih Blog > pilih menu Template > Klik Edit HTML
2. Cari kode </head> dan Paste Kode Bootstrap font awesome berikut ini di atasnya (Kalau belum ada)
   

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

   
   
3. Paste kode css berikut ini di atas ]]></b:skin> atau </style>
   

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

   
   
4. Paste kode Jquery dan html berikut ini di atas </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. Simpan Template

Coba lihat hasilnya, akan terdapat tambahan tombol di sisi kanan bawah blog. Dengan meng-klik atau menekannya, sobat akan kembali ke bagian atas blog.

Demikian Tutorial WebKeren mengenai Cara Memasang Back To Top yang Ringan dan Responsive di Blog. Silakan tulis di kolom komentar kalau sobat punya pendapat, mau berbagi cerita keberhasilan ataupun kegagalan menerapkan, menanyakan sesuatu, ataupun sekedar berbagi unek-unek.

Jangan sungkan berbagi artikel ini dengan tombol share di bawah. Semoga bemanfaat untuk kita semua.

Referensi:
mas-sugeng.com
evomagzblog.blogspot.com

Share :