Cara Membuat Sticky Widget Popular post di Sidebar Blog

Bagai mana si cara memasang sticky yang benar begini lo cara nya, tapi kali ini saya akan memasang widget sticky pada popular post yang terletak di sidebar cara ini cukup menarik.

karena dapat membuat widget popular post melayang meskipun di scroll ke bawah  Dan kode ini cukup responsive dan sudah saya terapkan sendiri di blog saya ini


Login ke Blogger Pilih > Menu TemplatEdit Html tambahkan kode di bawah ini sebelum kode </body>

Baca Juga

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts1').length) { // Ganti "#Postingan-Populer" dengan ID tertentu
    var el = $('#PopularPosts1');
    var stickyTop = $('#PopularPosts1').offset().top;
    var stickyHeight = $('#PopularPosts1').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>
Coba perhatikan kode yang di tandai dengan # kode tersebut sesuai kan dengan id widget popular post 

#Popularpost1 : Ganti kode ini sesuai dengan kode popular post di templat blog kalian [Setiap tempatl beda beda]
#footer-wrapper : kode untuk membatasi stick 
Untuk mengatur lebar widget popular post ini anda bisa mengunakan kode di bawah ini tempatkan kode dibawah tepat di barisan id popular post
#PopularPosts1{width:100%;max-width:300px}
untuk mengatur lebar kalian bisa menempat melihat contoh gambar ini
Oke itu dia cara cara nya untuk membuat nya sebenar nya cukup mudah, namun terkadang bikin bingung karena beda templat beda id 

Selamat mencoba dan semoga berhasil bila ada kendala bisa di tanyakan di kolom komentar ya Terimakasih.

Related Posts

Berlangganan update artikel terbaru via email:

1 Response to "Cara Membuat Sticky Widget Popular post di Sidebar Blog"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel