Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger

Cara Membuat Sticky Sidebar atau Sidebar Melayang di Blog – Widget Sticky atau yang lebih dikenal dengan widget melayang pada sidebar blog
Tanpa Basa Basi, inilah "Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger"

Masuk ke edit HTML template blog kamu
Cari kode </body>
Masukkan kode berikut tepat diatas kode /body tersebut;

Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger

<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" dan ID footer juga sama dengan ID footer template mu
      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>

Simpan dan Lihat Hasilnya
Berikut ini adalah contoh penerapan pada  Newser SoraTemplate yang admin gunakan;

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML4').length) { // Ganti "#HTML4" dengan ID tertentu
    var el = $('#HTML4');
    var stickyTop = $('#HTML4').offset().top;
    var stickyHeight = $('#HTML4').height();
    $(window).scroll(function() {
      var limit = $('#LinkList236').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>

Sumber Code


Mau donasi lewat mana?

Merasa terbantu dengan artikel ini? Ayo balas dengan donasi. Tekan tombol merah
© ARMAILA BLOGGING. All rights reserved. Developed by Saifullah.id