√ Cara Membuat Tombol Back to Top Ringan Responsive dan Keren - AdityaTekno

Social Items

Cara Membuat Tombol Back to Top Fast Loading Responsive dan Keren

Welcome back sahabat AdityaTekno.com. Dipostingan kali ini saya akan membahas tentang bagaimana cara membuat tombol back to top yang ringan alias fast loading dan tentunya responsive dan keren. Perlu anda ketahui, tombol Back to Top atau Scroll to Top adalah salah satu trend desain wesbite.

Fungsi tombol ini yaitu untuk mengembalikan halaman ke bagian atas dengan mudah dan 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 back to top ringan, fast loading karena tidak menggunakan image, tapi menggunakan font awesome.

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


Cara Memasang Tombol Back to Top di Blogger

1. Pertama Klik Menu Tema >> Edit HTML
2. Kemudian copas kode CSS Back to Top berikut ini di atas kode ]]></b:skin>
#back-to-top{background:#19d3c4;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:#19d3c4). Silahkan ganti dengan Kode Warna HTML yang anda suka sesuai selera.

Demikian Cara Membuat Tombol Back to Top Ringan Responsive dan Keren. Semoga bisa membantu dalam memasang tombol back to top di blog anda. Terima Kasih sudah berkunjung. Godd luck dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.


sumber

Cara Membuat Tombol Back to Top Ringan Responsive dan Keren

Cara Membuat Tombol Back to Top Fast Loading Responsive dan Keren

Welcome back sahabat AdityaTekno.com. Dipostingan kali ini saya akan membahas tentang bagaimana cara membuat tombol back to top yang ringan alias fast loading dan tentunya responsive dan keren. Perlu anda ketahui, tombol Back to Top atau Scroll to Top adalah salah satu trend desain wesbite.

Fungsi tombol ini yaitu untuk mengembalikan halaman ke bagian atas dengan mudah dan 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 back to top ringan, fast loading karena tidak menggunakan image, tapi menggunakan font awesome.

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


Cara Memasang Tombol Back to Top di Blogger

1. Pertama Klik Menu Tema >> Edit HTML
2. Kemudian copas kode CSS Back to Top berikut ini di atas kode ]]></b:skin>
#back-to-top{background:#19d3c4;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:#19d3c4). Silahkan ganti dengan Kode Warna HTML yang anda suka sesuai selera.

Demikian Cara Membuat Tombol Back to Top Ringan Responsive dan Keren. Semoga bisa membantu dalam memasang tombol back to top di blog anda. Terima Kasih sudah berkunjung. Godd luck dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.


sumber
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo