Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger

Advertisement
Advertisement
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
#NelponUnlimitedTsel
#50GbFlashTsel #Paket1500SmsArmaila
Advertisement