Cara Membuat Sticky Widget Di Blog Responsive

Kali ini Admin akan share cara membuat sticky widget di blog Responsive, yo'i bro biar blog kita lebih keren dan widget kita tetap keliatan klo di scroll, caranya mudah bingits..

Baca Juga : Cara Memasang Slot Iklan Di Blog Bermacam Ukuran

Contohnya pada widget Popular Post template ini

Cara Membuat Sticky Widget Di Blog Responsive
caranya edit HTML masukan ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('.PopularPosts').length) {
    var el = $('.PopularPosts');
    var stickyTop = $('.PopularPosts').offset().top;
    var stickyHeight = $('.tabs-menu').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>

Nah kode di atas yang saya block warna biru .PopularPosts ya bro, silahkan ganti dengan kode widget sobat yang mau di buat sticky  jangan lupa  kita juga harus menyeting lebar widget nya biar ga acak-acakan, cara nya, samain aja ama lebar sidebar template blog sobat.

ini kodenya :

.PopularPosts{ width:100%; max-width:235px;}

Dan media query nya

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

Baca Juga : Cara Menggunakan Karakter Atribut Dalam Sebuah Link HTML
Setelah itu simpan template, dan liat perubahan yang terjadi.
okeh mantap bro semoga cara membuat sticky widget di blog ini bisa membantu sobat-sobat yang ingin mempercantik tampilan blog nya.