Kali ini saya mau berbagi cara
menambahkan widget scroll to top pada blogspot untuk temen-temen yang belum
tau, atau mungkin mau mengganti desain button-nya. Tapi, sebelum lanjut ke
tutorial saya ingin menjelaskan dulu apa itu widget scroll to top atau bisa
juga disebut back to top. Widget scroll to top adalah widget yang biasa
digunakan untuk memudahkan user kembali ke page paling atas setelah men-scroll
blogsite sampai paling bawah. Jadi dengan menambahkan widget scroll to top ini,
teman-teman gak perlu lagi geser-geser kursor sampe ke atas, cukup dengan
menekan satu button scroll to top ini sudah langsung bisa kembali ke atas (halaman
muka) pada blog. Sudah penasaran dan ingin segera mencoba? Yuk simak tutorial
cara menambahkan widget scroll to top pada blogspot berikut ini.
Baca juga: Kumpulan Situs Pembuat Infografis Gratis
Baca juga: Kumpulan Situs Pembuat Infografis Gratis
Langkah Kedua:
Copy kode dibawah ini
[<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>]
Langkah Ketiga: Cari kode <head> dan Paste kode yang sudah dicopy tadi tepat dibawah kode <head> kemudian Save
Langkah Keempat: Kembali ke akun blog kamu dan pilih menu Layout kemudian Add a Gadget pada bagian sidebar atau footer dan klik HTML/JavaScript gadget
Langkah Kelima: Copy kode dibawah
ini dan Paste pada area gadget tadi, lalu Save
[<script>
Untuk memastikan apakah sudah
terpasang dengan benar, coba ke halaman blog kamu dan scroll kursor kebawah,
apabila muncul button scroll to top berarti kamu telah berhasil memasang widget
tersebut.
Eittsss... kalau masih ada yang
belum dimengerti atau gagal, jangan lupa untuk tinggalkan komentar agar saya
bisa membantu. Terima kasih, semoga bermanfaat.
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;
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/AVvXsEhsh1gxygjz06LH2db9NJLIut71qv4TYpWDnOULivkuPbeBwM7af756IMMc-8znK4l3yTLZ3lGjf2P4oHcCQtZkYD1j26-wkMKl5FcG9Q2nIZFyYLHfr_yr6Z3l9kgce2jLqsE4tNIlGQ/s1600/topp3.png" alt="Back to Top" / ></a>]
Sudah berhasil tapi kurang suka
dengan desainnya? Tenang, kamu bisa gunain beberapa desain button dibawah ini.
Caranya pun mudah, tinggal meng-copy kode dibawah button ini kemudian Paste
pada link yang diberi warna seperti diatas. Mau desain sendiri? Bisa banget,
kamu tinggal mendesain button sesuai keinginan kamu di Photoshop atau photo editor
online favorit kamu dan buat link-nya disini. Gimana? Mudah dan menyenangkan
kan? Selamat mencoba.
- [https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJVAL3QFISpJ4hHbAZGTDbiRzg8b86bBtAAvUuNPOlLCssH1oZYvTpD7X2GaKVw5tD_wNfolg9V1vdAfantEA_tdULgpICIk4BTYL4fx4SJg-Jp78WCEjCSBCt-514YI5cLl3ZFMadQ/s1600/topp1.png]
- [https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAeJnaBM3Yd3J2U59hmNq2LPD9WfzZjXuq4ukqcz4WM3tTbPcDZfi_CStFl8U6xpTJKXTz0UIopZ1X3VPQOOb-lHt0S9vQqzpFt5VPYG3uDWA-am3vAs3F6MPtYPXBwf5X3h-tSc_zVA/s1600/topp2.png]
- [https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhMj1jEWXChs7sLVStJ7kwUnrCypWle-FYRMQqg-XcLJgsMMcZs65dnahQsY-V3UAlmzdZRWWD8yyy7GvxRI2UqxShwaYmD8hlF6-8Qkl7FXs_VN4e9DRbiQiopLv7zP96WfcOst7JOQ/s1600/topp.png]
Wah saya baru aja nambah widget scroll to top ini Mba, tapi ngambil gambar dari internet. Cara bikin sendiri dan buat linknya di mana ya Mba?
ReplyDeleteHalo kak, untuk bikin desain sendiri bisa menggunakan photoshop atau juga picmonkey. Dan untuk membuat link-nya menggunakan photobucket. Untuk tutorialnya sambung ke artikel selanjutnya akan segera di post ya :)
DeleteThank you sudah mampir, happy blogging
Ohh photobucket ya. Oke, ditunggu tutorial selanjutnya ya Mba
DeleteWah makasih banyak kak :)) akhirnya ada tutorialnya kalau buat yg relalated post lingkaran2 gtu gimana ya??
ReplyDeleteHi kak, ditunggu di artikel selanjutnya ya untuk tutorial related postnya :) Thank you sudah mampir, happy blogging kak
Deletewiih langsung aku praktekin nih.. ditunggu yg selanjutnya yaa^^
ReplyDeleteGoodluck kak, terima kasih sudah mampir :)
Deletehappy blogging
Katanya eh katanya nih, kalau kebanyakan widget bisa bikin tambah berat beban loading blog?
ReplyDeleteIni benar apa benar, sih dear?
Benar kok mbak, tapi bisa juga di kompress dulu scriptnya biar gak bikin berat
Delete