Cara Membuat Tombol Back To Top di Blog

Cara Membuat Tombol Back To Top di Blog. Yang blognya belum ada button back to top nya boleh banget baca postingan saya ini. Jadi, kali ini saya mau berbagi sedikit tutorial cara membuat tombol back to top dengan cara yang mudah dan pastinya gampang dipahami. Jadi, menurut saya kenapa harus ada tombol back to top pada sebuah blog adalah selain untuk memperindah tampilan blog pada intinya adalah untuk memudahkan navigasi untuk pembaca blog kita. Apalagi kalau blognya/ postinganya memanjang kebawahkan ya, suka males gak sih scroll mouse manual ke atas? *kalau saya sih males kadangan* hahhaa...

Oke, tanpa berpanjang-panjang lebar mari disimak cara mudah membuat tombol back to top di blog berikut ini. Buat yang sudah tahu boleh di close tab, yang masih mau belajar bareng saya stay tuned nyampe postingan ini habis ya! Oiya, saya kasih BONUS BUTTON BACK TO TOP juga loh. XD

Ini hanya untuk platform blogspot ya...Wordpress saya gak tahu caranya, maklum belum pengalaman pakai wordpress hehe...

1. Langkah pertama yang pasti adalah kamu harus login blogspot kamu dulu. Sudah tahukan ya?

2. Kemudian pada dashboard klik Template > Edit HTML. Oiya, supaya safety silakan kamu backup dulu HTMLnya ya dengan cara klik Tombol Backup/ Restore di sebelah kanan atas.

3. Sudah? Kalau sudah balik lagi klik Edit HTML, cari kode <head> terus paste-kan kode dibawah ini. Kemudian klik Save Template.

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

Note: Sebelum kamu pastekan kode diatas, harap pastikan bahwa dibawah kode <head> belum ada kode tersebut. Kalau sudah ada jangan dipastekan lanjut saja ke step nomor 4.

4. Sekarang klik Layout > Klik Add Gadget > Pilih HTML/ Javascript. Dan pastekan kode dibawah ini. Lalu klik Save.

<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="MASUKKAN URL GAMBAR KAMU" alt="Back to Top" / ></a>

Nah, huruf yang saya kasih warna merah itu silakan diganti dengan URL dari gambar yang akan kamu gunakan. Bisa diupload terlebih dahulu di photobucket, blog, dll suka-suka kamu. Dan copy pastekan link URL gambar tersebut di text yang berwarna merah.

Nih saya kasih bonus button back to top nya. Oiya, tinggal klik aja salah satu gambar dibawah ini yang kamu sukai (kalau ada yang suka sih hahaha...) trus copy aja link URL-nya. Mudah bukan? Mau di Save As juga boleh kakak. :)