Cara Membuat Tombol Back To Top Di Blog

Cara Membuat Tombol Back To Top Di Blog - Pada kali ini kita akan membuat tombol back to top di blog atau memasang tombol kembali ke atas di blog. Tombol back to top sangat berguna bagi pengunjung blog karena dapat mempermudah mereka kembali ke bagian atas dengan sekali klik saja dan juga tidak memperlambat loading blog dan dapat mempercantik blog. Tombol Back to top berguna ketika sebuah postingan blog memiliki jumlah komentar yg banyak atau postingan yg terlalu panjang ke bawah. Bagi yg ingin membuat tombol back to top di blog, ikuti langkah-langkah berikut

Demo

Script Tombol Back To Top

• Login ke blogger.
• Klik menu template.
• Edit html.
• Pastekan script berikut diatas </head>

<script style="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

CSS Tombol Back To Top

• Login akun blogger.
• Kemudian klik template.
• Klik edit html.
• Pastekan css berikut diatas ]]></b:skin>.

div#page {max-width: 900px;margin-left: auto;margin-right: auto;padding: 20px;}
.back-to-top {position: fixed;bottom: 2em;right: 0px;text-decoration: none;color: #000000;font-size: 12px;padding: 1em;display: none;}.back-to-top:hover {text-decoration: none;}

HTML Tombol Back To Top

• Masuk ke blogger.
• Klik menu tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih HTML/Javasript.
• Kemudian pastekan kode di bawah ini.

<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4KerC680Pf5fFge3jbxLKdFA64bPUxlAKaRb5E8i0A8HD0c2vJ0AYccBg72zzgYHjTEbZpLRPr-340iG4Tllwx-V9pSZMDREaADAYWL3YpowoBbDwgPZY8gevdxE-O6Men7NnQ9D_V3A/s1600/back-to-top.png" alt="Back to Top"/></a>

Demikianlah tutorial mengenai cara membuat tombol back to top di blog atau cara memasang tombol kembali ke atas di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.