PLUGINS WORDPRESS SMART SLIDER 3 3.3.20

Assalamu'alaikum Blogger!!

To the point, edit template lalu letakan kode jQuery dibawah sebelum tag </body>

pastikan template anda sudah menggunakan jQuery, jika belum silahkan ditambahkan terlebih dahulu

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts1').length) {
    var el = $('#PopularPosts1');
    var stickyTop = $('#PopularPosts1').offset().top;
    var stickyHeight = $('#PopularPosts1').height();

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        el.css('position', 'static');
    }
    else {
    $(window).scroll(function() {
      var limit = $('.textrimAdditional')
   if (limit.length) {
            limit.offset().top - stickyHeight - 20;}
        
      var windowTop = $(window).scrollTop();

      if (stickyTop < windowTop) {
        el.css({ position: 'fixed', top: 50 });
        el.addClass("stickwidget");
      }
      else {
        el.css('position', 'static');
        el.removeClass("stickwidget");
      }

      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({top: diff});
        el.removeClass("stickwidget");
      }
      
    });
  }
}
});
//]]>
</script>

Tambahkan kode css dibawah sebelum tag ]]></b:skins>

.stickwidget {
background-color: $(textrim.main.color);
z-index: 99;
width: inherit
}

Sesuaikan dengan kebutuhan blog anda :

1. Edit Kode Javascript :
   1. Ganti #PopularPosts1 dengan id Widget yang mau di Sticky, cara melihat id Widget di blogger : Layout > edit Layout kemudian lihat pada address bar, kalau ngga kelihatan maximize saja windowsnya.
      
      
      
   2. Default template textrim pada bagian bawah ada elemen .textrimAdditional elemen ini saya jadikan penanda agar sticky widget berhenti sampai disitu. silahkan sesuaikan dengan kondisi blog masing-masing, jika masih default bawaan textrim maka biarkan saja tak perlu diganti
      
2. Edit kode CSS : CSS ini berfungsi untuk merubah tampilan widget ketika ikut bergerak kebawah silahkan dirubah menyesuaikan tema, pada saat Widget berada diposisi sebenarnya dan paling bawah kode CSS ini tidak berfungsi

itu Sudah

---

1. Kompi Ajaib - membuat-sticky-widget-dan-berhenti
   
2. Stackoverflow - uncaught-typeerror-cannot-read-property-top-of-undefined
   
3. Stackoverflow - if-mobile-disable-certain-scripts
   

Baca Juga