Beranda Blogger

Cara Membuat Tombol Back To Top Di Blog

13.09
A+ A- Print Email
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. Tombol back top top 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 pembuatan tombol back to top di bawah ini. Demo

Script Tombol Back To Top

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode </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

  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode ]]></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

  • Kemudian 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/AVvXsEiJZzjXJg_q5BWgi7UIYUd07d__I34qRoig5xE9DWSP5cDJDzGR-_zOFQzWdD8SKA7PovCIQ10lgA8w5T_MIpsseZVuRlr1khSHxq3eSoobk9CIpC80mhWSCDE2u_wJykmu7LI1IwlCVP0/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.
Cara Memasang Flag Counter Di Blog