TUTORIAL: Cara Memasang Button Back to Top

cara memasang back to the top button di blogspot dan wordpress

Hai everybodyyyyy!

Ini postingan scheduled karena dirikuh sedang cuti seminggu ke Bandung alias liburan. Tapi dalam rangka konsisten ngeblog jadi di-draft dan scheduled deh. *harus banget bilang-bilang*

Kali ini tutorial Monday Techno-nya adalah cara bikin button Back to Top seperti yang ada di kanan bawah blog saya ini. Fungsinya biar kalau ada postingan panjang, nggak perlu lama-lama scroll untuk kembali ke atas. Tinggal klik Back to Top, syuuunnggg, layarnya otomatis nge-scroll sendiri ke atas.

Kece yah?! Kece jadi alasan lain sih selain otomatis scrolling. HAHAHA.

Caranya nggak susah-susah banget kok. Meskipun suka jiper duluan karena lihat kode HTML ya kan.

Ini caranya:

Untuk Wordpress:

Install pluginnya di sini. WPFront Scroll Top

Sepertinya semudah membalikkan telapak tangan. *sepertinya karena nggak pernah nyoba lol* At least nggak perlu html code lah ya kan. Hahaha

Untuk Blogspot:

1. Log in ke Blogger blog, terus Template > Edit HTML > Klik Back Up/Restore di kanan atas. PESAN SPONSOR: TIAP MAU EDIT HTML JANGAN LUPA BACK UP! Jaga-jaga aja takut error.

2. Di dalem box HTML klik Ctrl+F dan ketik <head> kemudian enter. Enter sekali aja yah jangan berkali-kali nanti kode HTML nya suka ada yang ikut ke-enter. Setelah ketemu <head> copy paste kode ini di bawahnya.

Nah tapi cek dulu, udah ada kah kode ini sebelumnya? Kalau udah ada yang sama persis, nggak usah di-copy paste ulang yah. Skip aja, langsung cus ke nomor 2.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

Setelahnya klik Save Template.

2. Setelah di-save, klik Layout > click Add a Gadget > select an HTML/Javascript > copy paste ke boxnya. Judul nggak usah diisi ya.


<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;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7uAs9o8lJMJU-7JSjtnjnbTtsykd-Mj3CQaRwmMG9A8O3cUxnGkuzHJy12vsMuk-kgRKhVdBnUVVWthQVEXp2x0K5Kfot7m110Uzd_YAkGxwJZlDaPVwVulDAEmzZUbjyUmGt9iOmOE/s1600/back-to-top+me.png" alt="Back to Top" / ></a>

Text yang diwarnai biru itu button Back to Top yang saya pakai di blog ini. Boleh dipakai, atau boleh diganti sama yang sesuai dengan warna blog masing-masing. Upload di mana aja (blogger, photosbucket, google+, dll) terus copy paste link-nya.

Selamat mencoba!

Source: Carrie's Blog! Thank you, Carrie! :D