Tạo sticky widget cho blogger - widget sider bar

Sticky widget là một widget ở bên cạnh màn hình chạy dọc theo màn hình . Widget sẽ luôn hiển thị tại vị trí bên trái hoặc phải cho dù bạn kéo xuống tận cuối trang !

Mục đích widget này dùng để hiện thị bài viết , quảng cáo luôn bên cạnh màn hình của bạn 

Bước 1 : Tìm thẻ

và dán code này vào trước nó

Jquery


//$(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"
      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
        });
      }
    });
  }
});
//]]>

Bước 2 : Thêm các css

CSS#sticky-sidebar{width:100%;max-width:300px}

CSS#HTML1{width:100%;max-width:300px}

CSS@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Chú ý #sticky-sidebar : ID của sticky #footer-wrapper : ID kết thúc sticky