Saturday, September 9, 2017

Cara Menambahkan Widget Scroll to Top Pada Blogspot


Hello, there lovely!
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

Langkah Pertama: Masuk ke akun blog kamu kemudian pilih Template dan klik button Edit HTML


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>
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>]


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.


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]

Eittsss... kalau masih ada yang belum dimengerti atau gagal, jangan lupa untuk tinggalkan komentar agar saya bisa membantu. Terima kasih, semoga bermanfaat.


signature

9 comments:

  1. 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?

    ReplyDelete
    Replies
    1. Halo 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 :)
      Thank you sudah mampir, happy blogging

      Delete
    2. Ohh photobucket ya. Oke, ditunggu tutorial selanjutnya ya Mba

      Delete
  2. Wah makasih banyak kak :)) akhirnya ada tutorialnya kalau buat yg relalated post lingkaran2 gtu gimana ya??

    ReplyDelete
    Replies
    1. Hi kak, ditunggu di artikel selanjutnya ya untuk tutorial related postnya :) Thank you sudah mampir, happy blogging kak

      Delete
  3. wiih langsung aku praktekin nih.. ditunggu yg selanjutnya yaa^^

    ReplyDelete
    Replies
    1. Goodluck kak, terima kasih sudah mampir :)
      happy blogging

      Delete
  4. Katanya eh katanya nih, kalau kebanyakan widget bisa bikin tambah berat beban loading blog?
    Ini benar apa benar, sih dear?

    ReplyDelete
    Replies
    1. Benar kok mbak, tapi bisa juga di kompress dulu scriptnya biar gak bikin berat

      Delete

< > Home
Not A Planning Blog © , All Rights Reserved.