Cara Membuat Tombol Back to Top Responsive Ringan Fast Loading

Baca Juga

Cara Membuat Tombol Back to Top Responsive Ringan (Fast Loading) di Sidebar Blogger.

Tombol "Back To Top" atau Scroll to Top adalah salah satu trend desain wesbite.

Tombol untuk mengembalikan halaman ke bagian atas ini dengan mudah ini sangat ramah pengguna (user friendly).

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 Freandly) karena ramah dalam pengguna dan memudahkan pengunjung yang membuka halaman atau postingan blog Anda. 

Berikut ini kode dan cara memasang tombol kembali ke atas ringan. Fast loading karena tidak menggunakan image (gambar), tapi menggunakan font awesome.

Kode ini juga bisa dipasang di blog Selfhosted CMS WordPress. Kodenyanya digabungkan. Kode CSS dibungkus dengan kode <style> dan </style>

Cara Memasang Tombol Back to Top di Blogger

1. Klik 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>

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Cek dulu, apakah link ke font awesome sudah ada di template Anda. Jika sudah ada, lewati langkah ketiga ini, langsung ke langkah pemasangan berikutnya di bawah ini.

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!

Mestinya tombol kembali ke atas sudah terpasang di blog Anda. Silakan cek, scroll ke bawah. Anda bisa mengubah warna latar di kode CSS (background:#E73037). Silakan ganti dengan Kode Warna HTML yang Anda suka.

Demikian Cara Membuat Tombol Back to Top Responsive Ringan Fast Loading di Blogger. Wasalam. (blogromeltea.blogspot.com).*