Cara Membuat Sticky Widget di Sidebar Blog

Cara Membuat Sticky Widget di Sidebar Blog

Snippet

20.37

iNDZGN - Selamat pagi siang sore malam buat kamu yang sedang membaca artikel saya ini. Pada kesempatan ini saya akan berbagi tutorial bagaimana caranya membuat sticky widget di sidebar blog. Tentu kamu sudah tahu fungsi dari Sticky Widget ini, yakni membuat widget melayang saat di scroll. Tutorial kali ini, saya kutip dari blog Arlina Design.

Kode yang akan saya bagikan ini, lebih cocok di pasang di semua konten widget maupun widget tertentu. Jika kamu ingin tahu bagaimana tutorialnya, mari kita praktekkan.

Membuat Sticky Widget di Sidebar Blog

1. Login Blogger> Buka Template Editor> Tambahkan kode di bawah ini sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Kode yang saya tandai diatas, ganti dengan ID yang akan dibuat sticky, sesuai dengan template yang kamu gunakan.

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

2. Selanjutnya tambahkan lebar pada konten atau widget yang akan dibuat sticky dengan CSS. Misalkan saya memberikan 300px untuk lebar sticky. Contoh:

#sticky-sidebar{width:100%;max-width:300px}

atau

#HTML1{width:100%;max-width:300px}

Tentukan lebar sesuai dengan lebar template yang kamu pakai dan jangan lupa untuk mengganti lebar pada Query tertentu, misal:

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Cukup mudah bukan caranya? Demikian artikel terkait Cara Membuat Sticky Widget di Sidebar Blog, semoga bermanfaat.

20.37