Cara Memasang "Back to Top" yang Ringan dan Responsive di Blog
Untuk kembali ke atas maka kita harus scrolling berkali - kali menggunakan mouse sehingga dapat menyebabkan memakan waktu yang agak lama dan juga bisa membuat tangan cepet lelah. Sedangkan untuk Hape maka kita akan mengusap berkali - kali menggunakan jari hanya untuk kembali ke halaman atas.
Pada halaman yang banyak komentarnya, maka untuk kembali ke halaman atas itu sangat susah. Untuk membantu mempermudah kita kembali ke atas maka kali ini kita akan membahas tentang Bagaimana Cara Memasang "Back to Top" pada Blog yang Ringan dan Responsive sehingga tidak menghambat loading pada saat pemuatan halaman blog.
Pada dasarnya banyak cara untuk menampilkan "Back to Top" pada blog salah satunya dengan Jquery atau tanpa Jquery, dengan font awesome dan lain-lain. Sebagai catatan bila widget blog kalian sudah menampilkan "Back to Top" maka sebaiknya dihapus sehingga tidak memperlambat loading halaman dan juga dapat membingunggkan pengunjung blog kalian.
Langkah - Langkah1. Log in Blogger kalian, kemudian cari "Template" Blog lalu "edit html".
2. Pasang Font Awesome pada Blog kalian dengan menempelkan kode diatas </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>3. Kemudian Cari kode ]]></b:skin> atau </style>, kemudian tempelkan kode berikut diatasnya.
/* 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. Kemudian cari </body>, tempelkan kode dibawah ini diatasnya
<div class="back-to-top">
<a href="https://www.blogger.com/blogger.g?blogID=676025679910622131#" id="back-to-top" title="back to top"> <i class="fa fa-chevron-up"> </i></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. Simpan Template,
Jika langkah - langkah diatas diikuti dengan benar maka dapat dilihat tombol tanda panah keatas pada posisi sebelah kanan bawah. Coba kalian klik tombol itu maka otomatis akan kembali ke bagian atas halaman blog kalian.
. Penutup
Demikian sedikit postingan tentang "Cara Memasang "Back to Top" yang Ringan dan Responsive di Blog" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.
Mohon kiranya sobat dapat sharing dikolom Komentar dan klik Emoticon sehingga saya dapat memperbaiki bila ada hal yang belum kurang memuaskan. Terima Kasih Atas Kunjungannya, Saya pasti akan Kunjungi Balik.
Mohon kiranya sobat dapat sharing dikolom Komentar dan klik Emoticon sehingga saya dapat memperbaiki bila ada hal yang belum kurang memuaskan. Terima Kasih Atas Kunjungannya, Saya pasti akan Kunjungi Balik.