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
2 min read
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
© 2024ARMAILA BLOGGING. All rights reserved.
Developed by Saifullah.id