Tạo banner quảng cáo đính trượt cho blog

Một thủ thuật có thể làm dính (sticky) banner hay một mẫu quảng cáo ở trình duyệt khi bạn cuộn scrollbar chuột trên trang bloghay web. Khi độ dài của trang bài viết dài hơn cột sidebar thì khi đó bạn cuộn chuột xuống đến mẫu quảng cáo đó thì chúng sẽ được dính lại ở trình duyệt. Như vậy chắc bạn đã hình dung được phần nào về công dụng của thủ thuật này.

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScripts và dán vào đoạn code bên dưới

<style>

#sticky {

 height:435px; /* chiều cao của banner quảng cáo*/

 width:270px; /* độ rộng của banner quảng cáo*/

 position:relative;

}

</style>

<script type="text/javascript" src="https://dl.dropbox.com/u/74775294/Filejs/Jquery1.3.2.js"></script>

<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 = 1700; // 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 = 180; // Đị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">

code Quảng cáo của bạn

</div>