-->

TUTORIAL: Cara Memasang Button Back to Top

on
Monday, February 2, 2015
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.

<!--Smooth Back to Top Button Start-->
<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>
<!--Smooth Back to Top Button End-->


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



-ast-




LIKE THIS POST? STAY UPDATED!


LATEST VIDEO

PLEASE SUBSCRIBE!
16 comments on "TUTORIAL: Cara Memasang Button Back to Top"
  1. Hadeuuhh mudah2an ga salah pasang yaaa. Deg2an kalau mau utak atik blog

    ReplyDelete
    Replies
    1. kan di back up dulu maakkk.. kalau nanti error tinggal restore back up.. :D

      Delete
  2. makassiiii mak, berhasil berhasil horee!!

    ReplyDelete
  3. maak.. makasii yaa tutorialnyaaa.. berhasill.. horaaay ^_^
    oia, kalo mau ganti warnanya gimana ya mak? bingung nih..

    ReplyDelete
    Replies
    1. ganti warna back to topnya? nggak bisa diganti, itu kan image.. perhatiin kalimat terakhir deh..

      Delete
  4. Yeyy, berhasill Mak, ketcup basah :3

    Makasih banyaakk ~

    ReplyDelete
  5. Yeyy, berhasill Mak, ketcup basah :3

    Makasih banyaakk ~

    ReplyDelete
  6. yeaa alhamdulillah bisa lagi. mak icha, intip 'back to the top' punyaku ya di ijaah.com
    makasih mak :)

    ReplyDelete
  7. mb saya mau ganti dg photo lain, malahan fotonya besar hampir menuhi blog sehingga tulisan back to the top gak keliatan, ada cara memperkecil photo mba?

    ReplyDelete

Hallo! Terima kasih sudah membaca. :) Silakan tinggalkan komentar di bawah ini. Mohon maaf, link hidup dan spam akan otomatis terhapus ya. :)