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://3.bp.blogspot.com/-3zxQmBLy1W8/WbK_aYAGnxI/AAAAAAAAAlU/uUT7hiL9gdoamaAZkRjOBLCsRPh2y7mPQCLcBGAs/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://2.bp.blogspot.com/-9L0RjVToFHY/WbM5xWP-_fI/AAAAAAAAAm0/nqKBUq3Ow-o5CKCzWnDVI-P0tnoabZCRgCLcBGAs/s1600/topp1.png]
  • [https://2.bp.blogspot.com/-KUumLFd2zVs/WbM5xGoMwJI/AAAAAAAAAmw/20AUxinYH9cfzn73Duwll1O5s7eWsFccgCLcBGAs/s1600/topp2.png]
  • [https://3.bp.blogspot.com/-G3gmgPwDYpc/WbM5xbHtAcI/AAAAAAAAAm4/owL41F3DCFELfCil0EwnPq0I8J29bFqKwCLcBGAs/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

11 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
  5. Permisi ya kak Admin ^^

    ituBola - ituBolaonline - Bandar

    Bola - Agen Bola


    Ayo Pasang Taruhanmu Sekarang di ItuBolaAgen Judi Bola & Casino Online Terpercaya dan

    Terbaik di Indonesia.
    Minimal Deposit Rp. 25.000,- Dan untuk minimal Withdraw Rp. 50.000,-
    Proses Deposit & Withdraw Yang Tercepat.

    => Bonus Cashback 5% (dibagikan setiap Hari Senin)
    => Customer Service 24 Jam Nonsto
    => Support Deposit Via Aplikasi OVO,PULSA,GOPAY

    Kontak Kami
    LINE : itubola757
    WECHAT : itubolanet
    WHATSAPP :+85517696120
    TELEGRAM : Itu Bola /

    +85517696120


    Link Alternatif
    ituBola Online

    Agen Taruhan Judi Teraman, Situs Taruhan Judi Teraman, Agen JudiBola, Agen Judi Bola

    Online, Agen Bola Online, Agen Sportsbook, Judi Casino, Agen Judi Casino, Agen Casino

    Online, Agen Live CasinoTerpercaya

    ReplyDelete
  6. PERMAINAN ONLINE TERBESAR DI INDONESIA

    Website paling ternama dan paling terpercaya di Asia ^^
    Sistem pelayanan 24 Jam Non-Stop bersama dengan CS Berpengalaman respon tercepat :)
    Memiliki 9 Jenis game yang sangat digemari oleh seluruh peminat poker / domino

    - Adu Q
    - Bandar Q
    - Bandar Sakong
    - Bandar Poker
    - Poker
    - Domino 99
    - Capsa Susun
    - BANDAR66 / ADU BALAK
    - Perang Baccarat ( GAME TERBARU )

    Permainan Judi online yang menggunakan uang asli dan mendapatkan uang asli ^^
    * Minimal Deposit : 20.000
    * Minimal Withdraw : 20.000
    * Deposit dan Withdraw 24 jam Non stop ( Kecuali Bank offline / gangguan )
    * Bonus REFFERAL 15 % Seumur hidup tanpa syarat
    * Bonus ROLLINGAN 0.3 % Dibagikan 5 hari 1 kali
    * Proses Deposit & Withdraw PALING CEPAT
    * Sistem keamanan Terbaru & Terjamin
    * Poker Online Terpercaya
    * Live chat yang Responsive
    * Support lebih banyak bank LOKAL
    * Deposit menggunakan PULSA TELKOMSEL

    Contact Us

    Website SahabatQQ
    WA 1 : +855889110527
    WA 2 : +855972076840
    LINE : SAHABAT_QQ
    FACEBOOK : SahabatQQ Reborn
    TWITTER : SahabatQQ
    YM : cs2_sahabatqq@yahoo.com
    Kami Siap Melayani anda 24 jam Nonstop

    Daftar SahabatQQ

    #sahabatQQ
    #winsahabatQQ
    #winsahabat
    #AgenDomino99
    #PokerOnline
    #windaftar

    ReplyDelete

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