 |
| Cara Memasang Back to top di Blog |
Anda akan mempunyai masalah jika tidak memasang Back to top ini. Maka dari itu saya akan menjelaskan langkah-langkah dalam memasang Back to top ini, ada 2 langkah yang akan saya jelaskan yaitu memakai kode JavaScript (jQuery) dan dengan widget. Lets check it out....
Menggunakan jQuery :
#1. Coba pastikan dulu apakah di template blog anda sudah ada kode jquery seperti ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
atau script seperti ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Kalau belum ada silahkan ada ikuti langkah-langkah ini :
- Template >> Edit HTML
- Cari kode </head> atau biar cepat gunakan Ctrl + F
- Copy salah satu script tersebut dan paste kan diatas </head>
- Klik Save
#2. Klik Layout / Tata Letak
#3. Klik 'Add Gadget'
#4. Pilih 'JavaScript / HTML'
#5. Copy dan Paste script dibawah ini :
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZb2tI7EhTJckFSCVhAl7NwENFAmw20yIyYXVlZPvjUzGtYBl6y7OXRMqsAiiC5lcW4LXVUkB1PAchMldsG35ZU4fuvmWp-TOtiUbklXt1RckPj-qFNEAOuoK5WvHE_uT2yBznkLo72nk/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
- kode berwarna orange itu adalah jenis atau gambar back to top, sobat bisa mengganti nya sesuka hati.Oke setelah selesai klik simpan. Itulah cara pertama dalam memasang Back to Top sekarang kita lanjut ke cara kedua.
- jika anda tertarik untuk tau bagaimana cara membuat Box Script untuk memasang script atau tulisan didalam sebuah kotak seperti diatas. Silahkan baca disini!
Cara memasang Back to Top tanpa jQuery dengan menggunakan widget :
Cara kedua ini termasuk mudah dilakukan karena menggunakan widget dan langkah-langkah nya tidak sesusah atau seribet menggunakan jQuery untuk memasang Back to Top ini, so mari lihat langkah-langkah ini. Lets check it out....
#1. Login ke akun Blogger anda
#2. Pilih Layout / Tata Letak → Add Gadget → Pilih JavaScript/HTML
#3. Copy dan Paste kode dibawah ini :
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZb2tI7EhTJckFSCVhAl7NwENFAmw20yIyYXVlZPvjUzGtYBl6y7OXRMqsAiiC5lcW4LXVUkB1PAchMldsG35ZU4fuvmWp-TOtiUbklXt1RckPj-qFNEAOuoK5WvHE_uT2yBznkLo72nk/s1600/back+to+top.png "/></a>
Sama seperti langkah yang pertama script yang berwarna orange itu adalah jenis atau gambar dan sobat bisa menggantinya sesuka hati anda, setelah itu klik save!
Demikian langkah-langkah yang sudah saya jelaskan semoga bermanfaat bagi sobat, terima kasih sudah berkunjung ke blog saya. Thank you and happy browsing1
Belum ada tanggapan untuk "Cara Memasang Back to top di Blog"
Post a Comment