Cara Menciptakan Tombol Back To Top Responsive Ringan Fast Loading

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

Cara Membuat Tombol Back to Top Responsive Ringan Cara Membuat Tombol Back to Top Responsive Ringan Fast Loading

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

Tombol untuk mengembalikan halaman ke kepingan 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 supaya memudahkan pengunjung dalam kembali ke kepingan atas halaman blog sehabis scroll ke bawah untuk membaca postingan.

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

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

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

Cara Memasang Tombol Back to Top di Blogger

1. Klik Tema > Edit HTML

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

4. Copas arahan HTML dan Javascript Back to Top berikut ini di atas arahan </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() > 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!

Mestinya tombol kembali ke atas sudah terpasang di blog Anda. Silakan cek, scroll ke bawah. Anda dapat mengubah warna latar di arahan 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).*