Cara Mudah Memasang Tombol Back to Top pada blog
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
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
kebetulan banget saya belum pasang, ijin kopi kode dan mempraktekannya yia bos....
ReplyDeletesilahkan sob
Deletemantap dah artikelnya
ReplyDeletehttp://acemaxs31.com/obat-herbal-gagal-jantung/
keren artikelnya,, ijin share gan
ReplyDeletehttp://apotekacemaxs.com/pengobatan-alami-paru-paru-basah/
keren artikelnya gan
ReplyDeletehttp://apotekacemaxs.com/pengobatan-tradisional-batu-ginjal/
nice artikelnya :)
ReplyDeletehttp://jellygamatgoldg31.com
Thanks gan infonya !
ReplyDeletehttp://kedaiacemaxs.com/obat-tradisional-untuk-radang-usus-besar/
mantap artikelnya :)
ReplyDeletehttp://kedaijellygamatgoldg.com/
http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/
makasih banyak buat infonya,, nice post..
ReplyDeletehttp://goo.gl/ayK8bh