Cara Menciptakan Tombol Back To Top Responsive Ringan Fast Loading

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

Tombol "Back To Top" atau Scroll to Top yaitu salah satu animo desain wesbite.

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

Back to Top adalah fitur atau widget yang wajib ada di blog Anda.

Hal ini semoga memudahkan pengunjung dalam kembali ke bab atas halaman blog sehabis scroll ke bawah untuk membaca postingan.

Tombol Back to Top ini dapat dibilang ramah pengguna (User Freandly) alasannya ramah dalam pengguna dan memudahkan pengunjung yang membuka halaman atau postingan blog Anda. 

Berikut ini isyarat dan cara memasang tombol kembali ke atas ringan. Fast loading alasannya tidak memakai image (gambar), tapi memakai font awesome.

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

Cara Memasang Tombol Back to Top di Blogger

1. Klik Tema > Edit HTML

2. Copas isyarat CSS Back to Top berikut ini di atas isyarat ]]></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 isyarat </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, pribadi ke langkah pemasangan berikutnya di bawah ini.

4. Copas isyarat HTML dan Javascript Back to Top berikut ini di atas isyarat </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 dapat mengubah warna latar di isyarat 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).*