Tạo Widget cố định - Sticky Widget trượt dọc trên Blogger

Tạo Sticky Widget trượt dọc cho Blogger - Đôi khi bạn muốn làm nổi bật một Widget nào đó trên blog hay đơn giản là làm nổi bật quảng cáo, khung Social thì việc tạo một Widget cố định - Sticky Widget trượt dọc trên Blogrer là một điều phù hợp. Thao tác sau đây sẽ giúp bạn làm được điều đó!

Tạo Widget cố định - Sticky Widget trượt dọc trên Blogger

Các bước thực hiện

Cách 1: Sử dụng Javascript

Bước 1: Chèn đoạn code sau lên trên thẻ đóng </body>

<style type="text/css">
.stickywidget{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML3 .widget-content {padding:0;margin:auto;}</style>
<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" stickywidget",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML3");
//]]>
</script>

Thay HTML3 thành ID Widget bạn cần cố định.
Cách 2: Sử dụng Jquery

<style type="text/css">
#ID SIDEBAR {
  width: 255px;
  height: 200px;
  margin: auto;
  background: #fc4f3f;
  position: absolute;
}
#ID SIDEBAR.fixed {
  position: fixed;
  top: 20px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
$(function() {
  var top = $('#ID SIDEBAR').offset().top - parseFloat($('#ID SIDEBAR').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));
  var maxY = footTop - $('#ID SIDEBAR').outerHeight();
  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#ID SIDEBAR').addClass('fixed').removeAttr('style');
      } else {
        $('#ID SIDEBAR').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#ID SIDEBAR').removeClass('fixed');
    }
  });
});
//]]>
</script>

Lưu ý:

• Thay  ID SIDEBAR  thành ID bạn cần cố định.

Thanks to Arlina Designer