Tombol Back To Top atau kembali ke atas memudahkan pengunjung blog kembali ke bagian teratas halaman blog, setelah mereka scroll ke bawah untuk membaca posting blog.
Tombol Back To Top ini menjadi trending desain blog/website karena user friendly.
Jika template blog Anda belum dipasang Tombol Back To Top ini, maka lakukan langkah berikut ini untuk memasangnya.
Kode-kode ini bisa dipasang di Blogger dan WordPress (Selfhosted CMS WP).
Cara Memasang Tombol Back To Top
KODE CSS
- Untuk Blogger, pasang di atas kode ]]></b:skin> atau <style>
- Untuk WordPress, pasang di file style.css
.back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;
}
KODE JS
- Pasang di atas kode </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
KODE JS
- Untuk blogger, pasang di atas kode </body>
- Untuk WP, pasang di file HTML utama (index.html)
<a href="#" class="back-to-top">Back to Top</a>
<script>
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>
Demikian cara Membuat Tombol Back To Top untuk Blog Blogger dan WordPress.*
Post a Comment
Post a Comment