Cara Membuat Tombol Back to Top Responsive Fast Loading di Blogger - Blogger Bandung

Cara Membuat Tombol Back to Top (Kembali ke Atas) Responsive Fast Loading di Blogger

Tombol Kembali ke Atas (Back To Top Button) adalah tombol atau link yang jika diklik otomatis mengarahkan pengunjung kembali ke halaman atas blog yang sedang dibuka,.

Posisinya biasanya di bagian kanan bawah halaman blog.

Back to Top adalah fitur atau widget yang "wajib" ada di blog Anda. Hal ini agar memudahkan pengunjung dalam kembali ke bagian atas halaman blog setelah scroll ke bawah untuk membaca postingan.

Tombol Back to Top ini bisa dibilang ramah pengguna (User Friendly) karena ramah dalam pengguna dan memudahkan pengunjung yang membuka halaman atau postingan blog Anda. 

Situs-situs ternama seperti Yahoo juga menyediakan fasilitas tombol kembali ke atas ini. 

Cara Membuat Tombol Back to Top Responsive Fast Loading

1. Tema > Edit HTML

2. Copas kode CSS Back to Top berikut ini di atas kode ]]></b:skin>

 #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}

3. Copy link ke Font Awesome berikut ini di atas kode </head>

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

4. Copas kode HTML dan Javascript Back to Top 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. Simpan Template!

Demikian  Cara Membuat Tombol Back to Top Responsive Fast Loading di Blogger.*