Sudah lama tidak menulis artikel berkaitan dengan blogger, kali ini saya akan membahas bagaimana memasang tombol back to top pada blog dengan mudah.
sebagian blogger sangat memperhatikan tampilan blognya , agar pengunjung atau pembaca nyaman saat berkunjung ke blog tersebut. mulai dari warna, jenis huruf , navigasi dan lain-lain. salah satu widget yang menurut saya lumayan penting adalah tombol back to top atau kembali ke atas. dengan widget ini saat tamppilan blog di scroll ke bawah maka akan muncul tombol disebelah kanan bawah yang berfungsi untuk kembali ke tampilan paling atas. hal ini mempermudah pengguna tanpa harus menggunakan scroll.
oke langsung ajah berikut caranya :
1. buka blogger => tata letak => tambahkan gadget
2. selanjutnya pilih HTML/Javascript dan masukkan kode berikut <script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>
<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>
<style>
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;
background-color: rgba(235, 235, 235, 0.80);
font-size: 15px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: #ccccff;
text-decoration: none;
}
</style>
<a href=”#” class=”back-to-top”>Back to Top</a>
3. terakhir klik save
maka setiap anda scroll kebawah maka tombol back to top akan muncul , semoga tutorial kali ini bermanfaat
