Hi all, hari ini saya akan membahas cara membuat tombol back to top di blogger. Untuk membuat tombol back to top tentunya kita harus menguasai CSS dan JavaScript. Disini saya akan membahas cara yang mudahnya, yaitu anda hanya perlu copy dan paste saja. Mau tahu caranya?
Pertama-tama, Login ke akun blogger anda. Masuk ke "Ikhtisar" blog anda. klik "Template", kemudian klik "Edit HTML", seperti yang ada di gambar berikut.
Kemudian cari kode <head> dengan cara tekan CTRL + F, ketik <head>, kemudian tekan Enter. Masukkan kode jQuery berikut ke baris di bawah kode <head>.
Gambar di bawah adalah contoh kode jQuery yang telah dimasukkan ke baris di bawah kode <head>.
Setelah memasukkan kode jQuery dan klik tombol "Simpan template", langkah berikutnya adalah klik "Tata Letak" dan klik "Tambahkan Gadget" pada kolom mana saja.
Kemudian cari kode <head> dengan cara tekan CTRL + F, ketik <head>, kemudian tekan Enter. Masukkan kode jQuery berikut ke baris di bawah kode <head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Gambar di bawah adalah contoh kode jQuery yang telah dimasukkan ke baris di bawah kode <head>.
Setelah memasukkan kode jQuery dan klik tombol "Simpan template", langkah berikutnya adalah klik "Tata Letak" dan klik "Tambahkan Gadget" pada kolom mana saja.
Setelah klik "Tambahkan Gadget", maka akan muncul tampilan berikut ini.
Langkah berikutnya adalah klik "HTML/JavaScript", maka akan muncul tampilan berikut 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/AVvXsEjTwGgLn0W7P3vvmQ1dhjzkhh8vfQs5PxKKVTUb3NLym3_JdP9EW-ybEubxd_8esJ6qzIs8yC7RWw_MX4MkzoJ0UtU8wIj85aGFEfnOroBts2Eb2k_FIJR9Z6v35HnFVS7LOIwk3R_lrBD5/s1600/back-to-top-button.png" />
<script type="text/javascript">
/***** hardi-ads.blogspot.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>
.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/AVvXsEjTwGgLn0W7P3vvmQ1dhjzkhh8vfQs5PxKKVTUb3NLym3_JdP9EW-ybEubxd_8esJ6qzIs8yC7RWw_MX4MkzoJ0UtU8wIj85aGFEfnOroBts2Eb2k_FIJR9Z6v35HnFVS7LOIwk3R_lrBD5/s1600/back-to-top-button.png" />
<script type="text/javascript">
/***** hardi-ads.blogspot.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>
Demikian cara membuat tombol back to top. Semoga bisa membantu.
Tidak ada komentar:
Posting Komentar