Tạo sticky banner trượt và dừng ở Footer

Tạo sticky banner trượt và dừng ở Footer giúp banner quảng cáo adsense hoặc nội dung bài viết dừng. Tạo sticky banner trượt và dừng ở Footer sẽ giúp nâng cao doanh thu từ quảng cáo và đặt biệt việc dừng ở footer sẽ không làm che khuất nội dung ở foer như link, thông tin web.

Demo tạo ticky banner trượt để các bạn xem trước khi làm. Nó sẽ trượt dài banner theo sidebar và dừng ở vị trí footer của website. Bắt tay ngay vào việc tạo sticky sidebar nào.

Tạo sticky banner trượt và dừng ở Footer

Mở file footer của website. tìm thẻ div đầu tiên và chèn vào đó đoạn code sau đây ( chèn bên trong thẻ div theo kiểu chèn class nhé ). Đoạn code bạn cần thêm như sau: id="footer-wrapper"

HTML:

<div class="...." id="footer-wrapper">

Cách làm với wordpress

Vì mỗi theme wordpress có cách chứ footer khác nhau. Nên mình sẽ lấy ví dụ là theme neve. Bạn hãy truy cập theo đường dẫn sau wp-content/themes/neve/header-footer-grid/templates/footer-wrapper.php

Mở file footer-wrapper.php, tìm đến đoạn <footer class="site-footer" id="site-footer"> và thêm id="footer-wrapper" vào nó và lưu file lại nhé. Sau khi làm sẽ như thế này:

HTML:

<footer class="site-footer" id="site-footer" id="footer-wrapper">

Vào trang admin của wordpress và thêm một Widget html với nội dung như sau ( nhớ để Widget này ở dưới cùng cùng nhé ):

HTML:

<script>
$(function() {
  if ($('#sticky-sidebar').length) {
    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;
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 0
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
</script>
<div id="sticky-sidebar">
Banner quảng cáo hoặc code adsense
</div>

Trong đó, đoạn Banner quảng cáo hoặc code adsense thay bằng code html banner của bạn hoặc code adsense. Lưu lại và tận hưởng.

Cách làm với xenforo

Vào style đang dùng và tìm Template có tên footer. Tìm đến đoạn div đầu tiên và thêm id="footer-wrapper" vào đoạn div đó. Thực hiện đoạn code sau khi thêm hoàn chỉnh sẽ có dạng như sau. Ví dụ:

HTML:

<div class="footer" id="footer-wrapper">

Thêm một Add Widget mới theo định dạng Renderer là HTML và đặt Display Order ở số càng cao càng tốt. Ví dụ để số 100. Mục đích là để Widget nằm phía dưới cuối cùng. Dán vào khung HTML đoạn code sau đây:

HTML:

<script>
$(function() {
  if ($('#sticky-sidebar').length) {
    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;
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 0
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
</script>
<div id="sticky-sidebar">
Banner quảng cáo hoặc code adsense
</div>

Trong đó, đoạn Banner quảng cáo hoặc code adsense thay bằng code html banner của bạn hoặc code adsense. Lưu lại và tận hưởng.

Như vậy bài sử dụng css stick sidebar là xong nhé.