Tạo Sticky banner quảng cáo trượt dọc trên Sidebar website

Khi bạn thiết kế xong một website và đặc biệt là website bán hàng hay website tin tức thì việc tạo banner quảng cáo luôn hiển thị để gây ấn tượng đến khách hàng khi ghé thăm website của chúng ta. Thêm hiệu ứng Sticky để đặt banner quảng cáo chạy dọc trên Sidebar website để khách hàng có thể dễ dàng click vào quảng cáo hoặc đơn thuần chỉ để khách hàng nhớ đến thương hiệu của website qua banner quảng cáo. Cách đây một vài năm mình cũng khá ấn tượng với chương trình quảng cáo trên truyền hình của “máy lọc nước kangaroo” nó xuất hiện liên tục làm mình nhớ đến nó khi nhắc tới từ “máy lọc nước”. Lan man rồi, mình bắt đầu luôn 😀

Tạo Sticky quảng cáo trên blogspot

 

Code quảng cáo ban đầu nó sẽ cố định một chỗ, sau khi kéo chuột xuống một khoảng nhất định thì nó trượt theo, khi kéo chuột lên thì tới điểm dừng là nó ko theo nữa . Giúp ích rất nhiều cho việc tăng click vào quảng cáo trên web ,blog của bạn còn sau đây cùng xem cách làm ra sao nhé.

Bước 1: Bạn đăng nhập vào blogger >> chọn blog của bạn.
Bước 2: Chọn Bố cục >> Thêm tiện ích ở sidebar >> HTML/Javascript và sử dụng đoạn code dưới đây.

<script> var $stickyHeight = 460; // chiều cao của banner quảng cáo var $padding = 5; // khoảng cách top của banner khi dính var $topOffset = 2560; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner ) var $footerHeight = 100; // Định vị điểm dừng của banner, tính từ chân lên /* <![CDATA[ */ function scrollSticky(){ if($(window).height() >= $stickyHeight) { var aOffset = $('#sticky').offset(); if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) { var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185; $('#sticky').attr('style', 'position:absolute; top:'+$top+'px;'); }else if($(window).scrollTop() + $padding > $topOffset) { $('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;'); }else{ $('#sticky').attr('style', 'position:relative;'); } } } $(window).scroll(function(){ scrollSticky(); }); /* ]]> */ </script> <div id="sticky"> Đặt code quảng cáo của bạn </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<script> var $stickyHeight = 460; // chiều cao của banner quảng cáo var $padding = 5; // khoảng cách top của banner khi dính var $topOffset = 2560; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner ) var $footerHeight = 100; // Định vị điểm dừng của banner, tính từ chân lên /* <![CDATA[ */ function scrollSticky(){ if($(window).height() >= $stickyHeight) { var aOffset = $('#sticky').offset(); if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) { var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185; $('#sticky').attr('style', 'position:absolute; top:'+$top+'px;'); }else if($(window).scrollTop() + $padding > $topOffset) { $('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;'); }else{ $('#sticky').attr('style', 'position:relative;'); } } } $(window).scroll(function(){ scrollSticky(); }); /* ]]> */ </script> <div id="sticky"> Đặt code quảng cáo của bạn </div>

Bạn copy đoạn code trên và chỉnh theo ý bạn với đoạn mình có đặt chữ màu đỏ.

Tạo Sticky quảng cáo trên WordPress

Với WordPress đơn giản hơn là bạn sử dụng plugin Q2W3 Fixed Widget mà không phải động chạm đến code.

Sau khi cài đặt và kích hoạt thành công, các bạn vào Appearance » Widgets và click chọn widget mà bạn muốn làm Sticky Widget rồi kéo sang sidebar mà bạn muốn.

Trong phần cài đặt Widget giờ sẽ có thêm một lựa chọn đó là “Fixed Widget” ở cuối phần setting của widget. Muốn Widget nào cố định thì các bạn chỉ cần click chọn vào ô “Fixed Widget” là được.
Bạn có thể thực hiện một số điều chỉnh cho widget cố định bằng cách vào Appearance >> Fixed Widget Options.
Như vậy là bạn đã tạo được một quảng cáo cố định trượt dọc trên sidebar khi kéo đọc bài viết và widget này sẽ trượt theo cửa sổ trình duyệt khi bạn cuộn trang web.
Lưu ý: Việc đặt quảng cáo mình thường đặt nó ở vị trí cuối cùng trên sidebar.

Chúc bạn thành công!