Cara Membuat Sticky Widget Blogger di Sidebar

Pada kesempatan kali ini saya akan berbagi tutorial cara membuat sticky widget (Widget Melayang) di sidebar mengikuti halaman saat digulirkan ke bawah dan atas.
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.

About the Author

Stimulate your passion!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.