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
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

Comments

  1. kebetulan banget saya belum pasang, ijin kopi kode dan mempraktekannya yia bos....

    ReplyDelete
  2. mantap dah artikelnya
    http://acemaxs31.com/obat-herbal-gagal-jantung/

    ReplyDelete
  3. keren artikelnya,, ijin share gan
    http://apotekacemaxs.com/pengobatan-alami-paru-paru-basah/

    ReplyDelete
  4. keren artikelnya gan
    http://apotekacemaxs.com/pengobatan-tradisional-batu-ginjal/

    ReplyDelete
  5. nice artikelnya :)
    http://jellygamatgoldg31.com

    ReplyDelete
  6. Thanks gan infonya !
    http://kedaiacemaxs.com/obat-tradisional-untuk-radang-usus-besar/

    ReplyDelete
  7. mantap artikelnya :)
    http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

    ReplyDelete
  8. makasih banyak buat infonya,, nice post..

    http://goo.gl/ayK8bh

    ReplyDelete

Post a Comment

Silahkan Komentar jika ada pertanyaan atau ingin menambahkan artikel kami, komentar yang anda submit tidak akan langsung muncul karena akan kami moderasi dulu.
silahkan tunggu komentar anda muncul dan balasan dari kami

Popular Posts