Sunday, December 22, 2013

Smart Floating Banner Cho Blogspot

Sunday, December 22, 2013

Bài này mình hướng dẫn các bạn tạo banner float cho Blogspot.

Xem demo tại đây.

Bước 1: Cài CSS
Tìm ]]></b:skin> và chèn đoạn CSS trên ]]></b:skin>
#banner {
  position: absolute;
  top: 0;
}

#banner.fixed {
  top: 5px;
  position: fixed;
 }
Bước 2: Cài Scrpit
Chèn đoạn scrpit sau trước thẻ </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
<script type='text/javascript'>
$(document).ready(function () {
  var top = $(&#39;#banner').offset().top - parseFloat($('#banner').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y >= top) {
      $(&#39;#banner').addClass('fixed');
    } else {
      $(&#39;#banner').removeClass('fixed');
    }
  });
});
</script>
Bước 3: Chèn banner
<div class='' id='banner'>
Banner
</div>
Chú Ý: Nếu muốn chèn cho widget thì có dạng như sau
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<div class='' id='banner'>
...
...
</div>
</b:includable>
</b:widget>
Widget mình làm ở trên là HTML1, tùy vào widget của bạn có id bao nhiêu và chèn vào cho phù hợp
Tin liên quan
XEM TRÊN MOBILE

No comments:

Post a Comment