Cara Membuat Sticky Widget Sidebar Di Blog Yang Responsive

Cara Membuat Sticky Widget Sidebar Di Blog Yang Responsive tidak begitu sulit hanya menambahkan kode script dan css pada HTML. Sticky widget sendiri adalah widget tetap akan muncul saat halaman blog di scroll kebawah misalnya seperti Popular Posts, Recent posts dan lainnya, yang menarik dari blog agar pengunjung tertarik untuk melihat melihat lebih jauh blog dan akan menambah visitor blog.

Cara Membuat Sticky Widget Sidebar Di Blog

Pada dashbord Blog pilih Tema selanjutnya Edit HTML kemudian letakan kode script di bawah ini di atas kode  </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#Label1').length) {
    var el = $('#Label1');
    var stickyTop = $('#Label1').offset().top;
    var stickyHeight = $('#Label1').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 50;
      var windowTop = $(window).scrollTop();
        var width = $(window).width();
      if ((stickyTop < windowTop)&&(width > 768)) {
        el.css({
          position: 'fixed',
          top: 50
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Perhatikan kode di atas yang saya block yaitu #Sticky-Sidebar, kode tersebut ganti dengan ID widget yang akan di buat sticky sesuai dengan tema blog anda saya contohkan Sticky widget-sidebar pada Label. #Footer-Warpper adalah batas berhentinya Sticky ganti dan sesuaikan dengan tema blog anda, angka 50 adalah jarak berhentinya sticky widget-sidebar dan 768 adalah lebar layar responsive bisa anda sesuai kan dengan tema blog anda.

Selanjutnya sesuaikan lebar Sticky dengan lebar widget-sidebar tema blog anda sebagai contoh sidebar-warpper 235px maka tambahkan juga lebar sticky widget yang anda buat sticky sama dengan lebar sidebar-warpper kode nya seperti dibawah ini:

#Label1{
    width:100%;
    max-width:235px;
}

Dan tambahkan atau ganti juga pada media query  sebagai contoh di bawah ini

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

Tekahir Simpan Tema dan lihat hasilnya

Demikian Cara Membuat Sticky Widget Sidebar Di Blog Yang Responsive yang saya terapkan pada blog semoga bermanfaat dan selamat mencoba