Cara Membuat Sticky Widget Blogger di Sidebar - MAS AWAN

Advertisement 970x90

Cara Membuat Sticky Widget Blogger di Sidebar

Gunawan
Februari 11, 2020

Pada kesempatan kali ini saya akan berbagi tutorial cara membuat sticky widget (Widget Melayang) di sidebar mengikuti halaman saat digulirkan ke bawah dan atas.

Cara Membuat Sticky Widget Blogger di Sidebar

Kode yang akan saya bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau bisa juga dipasang pada salah satu widget tertentu. Bagi Anda yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blogger.

Cara Membuat Sticky Widget di Sidebar Blogspot

1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini sebelum </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>

Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan.

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

Selanjutnya tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini 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 sidebar dari template yang Anda gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, contoh :

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

Demikian artikel tentang Cara Membuat Sticky Widget Blogger di Sidebar, semoga bermanfaat. Sampai jumpa pada artikel selanjutnya.