Cara Membuat Widget Sticky di Sidebar Blog


Cara Membuat Widget Sticky di Sidebar BlogCara Membuat Widget Sticky di Menu Navigasi BlogCara Membuat Widget Sticky di Blog, Membuat Sticky di blog dengan mudah.

Halo sobat Blog Krizeer, di hari yang cukup cerah ini namun ujan, sekarang-sekarang ini saya mohon maaf jarang update, karena saya suka main games. Kali ini saya akan membahas Cara Membuat Widget Sticky di Sidebar Blog, sebetulnya widget sticky ini tidak hanya bisa digunakan di sidebar saja, tapi di ID manapun bisa, contohnya di menu navigasi. Mungkin sobat sudah mengetahui tujuan saya kali ini. Widget Sticky fungsinya ketika layar di scroll kebawah, widget tersebut akan menempel atau melayang di atas, meskipun di scroll kebawah.

  • Demo widget sticky yang di sidebar, klik disini (coba scroll kebawah dan lihat iklan teks yang di sidebar menempel di atas).
  • Demo widget sticky yang di menu navigasi, klik disini (coba scroll kebawah dan lihat menu navigasinya menempel di atas).
Berikut langkah-langkah membuat Widget Sticky di Sidebar :
1. Login ke Blogger
2. Dashboar > Klik Template > Edit HTML
3. Tambahkan kode dibawah ini di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
4. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>
.sticky {
position:fixed;
top:5px;/* jarak dari atas*/
z-index: 100;
}
5. Letakan kode java script dibawah ini di atas </body>
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML1').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML1').addClass('sticky');
} else {
$('#HTML1').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
6. Simpan Template

Tips :
Ganti #HTML1 dengan ID widget yang akan dibuat sticky. ID #HTML1 itu bukan hanya berupa ID, Class pun juga bisa.

Source : http://ahmadsuyadi.blogspot.com/2013/11/cara-membuat-widget-sticky-di-sidebar.html

51 komentar untuk "Cara Membuat Widget Sticky di Sidebar Blog"

  1. Sob..
    Sticky gunanya untuk apa ya? maap blum mastag ^:D

    BalasHapus
    Balasan
    1. coba buka link ini http://fcw-bt.blogspot.com/2013/08/cara-menggunakan-ikon-font-awesome-di.html lalu scroll kebawah, lihat menu nya nempel atau melayang di atas, itu maksud saya sob

      Hapus
  2. keren banget sob. kok templatenya makin kecil ?

    BalasHapus
    Balasan
    1. makasih sob, iya nih gw juga gak tau kok makin kecil, mungkin karna hati saya mengatakan begitu, alasan blog makin kecil supaya pengunjung bisa lebih focus ke postingan, dan gak tengok sana-sini lihat iklan, gambar, dll

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
  3. simple jg ya carax.., makasih *smile

    BalasHapus
  4. artikel nya dari kang ismet smua yaa

    BalasHapus
    Balasan
    1. perasaan saya gak ada artikel yang dari kang Ismet, nih bocoran sedikit, kang Ismet tuh artikelnya dari www.dte.web.id, dan dia jelaskan ulang dengan gaya bahasa kang Ismet sendiri.

      Hapus
  5. tutorial yang sangat bermanfaat sob...
    salam kenal dari saya...

    BalasHapus
    Balasan
    1. makasih sob, salam kenal juga ya, eh aku panggil kamu apa yah ?, klo cwe enaknya dipanggil apa ya ?, hmmm

      Hapus
    2. gan ane udh download template fastest magz, nah kalo ane klik next page pasti di tab bar yg muncul link, gimana cara ganti agar di tab bar menjadi nama blog kita?

      Hapus
    3. saya nggak paham dengan pertanyaan sobat, coba dijelaskan pakai gambar

      Hapus
    4. maksud sobat link hak cipta yang di footer kan ?

      Hapus
    5. coba ente langsung ke tkp, ane jga bingung mau jelasin kek gimana :( wajar newbie

      diakuin.blogspot.com nah habis itu klik next, atau postingan selanjutnya. trus liat di address bar, yg keluar pasti url, bukan nama blog kita

      Hapus
  6. Mantap bener deh.. ijin nyoba ya gan..

    BalasHapus
  7. Kok di blog saya tidak berhasil yah sob. mohon lihat blogANDI ASRUL ZANI. terima kasih yah !

    BalasHapus
    Balasan
    1. saya lihat sudah berhasil tuh yang widget random post

      Hapus
  8. berhasil diterapin diblog saya gan. makasih tutorialnya.

    BalasHapus
  9. mau tanya gan kalau membuat widget sticky lebih dari satu gimana ?. maaf soalnya newbie.

    BalasHapus
  10. Berhasil di terapkan mas, thanks ya sudah berbagi

    BalasHapus
  11. langsung dicoba buat blog ane mas

    BalasHapus
  12. izin praktekkan gan...semoga sukses....

    BalasHapus
  13. Makasih mas sudah mw berbagi tipsnya

    BalasHapus
  14. REAL NEWS kok di blog ane kagak maw... kenapa ya ?

    BalasHapus
  15. masih bingung kang mas : hehehe

    BalasHapus
  16. mantep mas... saya baru masang nehhh

    BalasHapus
  17. Yeees... Alhamdulillah jadi juga nih Widget Melayangnya.
    Makasih :)

    BalasHapus
  18. thanks....... https://www.kodesukses.blogspot.com

    BalasHapus
  19. enaknya kalo widget sticky slot iklan selalu nampak dimata pengunjung. Kemungkinan klik semakin besar :D

    BalasHapus
  20. Demo nya ga ada neh Gan ??? trims

    BalasHapus
  21. infonya sangat bermanfaat gan, terima kasih

    BalasHapus
  22. Sip deh jadi nih... Terimakasih tutorialnya. Sangat bermanfaat :)

    BalasHapus
  23. makasih gan tutorialnya .. sangat bermanffaat untuk blog rejeki saya.. suwun :)

    BalasHapus
  24. your artikel is usefull for me. find me on tipepedia and read my artikel Teknik Pengambilan Sampel Terbaru dan Terlengkap

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top