Wednesday, September 18, 2013

Banner Trượt Có Giới Hạn Tại Sidebar

Wednesday, September 18, 2013

Bài viết này hướng dẫn cách thức chèn banner trượt có giới hạn tại vị trí sidebar cho vbb.

Xem hình demo bên dưới
Hình 1: nhấp vào hình để xem rỏ hơn
Hình 2: nhấp vào hình để xem rỏ hơn
Để làm 1 banner trượt như thế này cho vbb thì trước tiên chúng ta cần 1 file jquery, ở đây chúng ta lạy luôn của google cho tiện (có thể download về và upload lên host). Tiến hành khai báo file này và thêm 1 đoạn script tại header
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){


    $(window).scroll(function(){
        if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
           $(".smartbanner").css("position", "fixed");
           $(".smartbanner").css("top", "0");
        }
       
        if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
           $(".smartbanner").css("position", "relative");
           $(".smartbanner").css("top", $(".smartBannerIdentifier").offset);
        }
    });


});
</script>
Tiếp theo là đến phần CSS cho banner quảng cáo. Vào additional.css theo phần sau vào
.smartbanner {
    width:258px;
    background-color: #FF0000;
    float: right;
}
Có thể tùy chỉnh các thông số cho phù hợp với forum.
Giờ  đến code chèn quảng cáo cho sidebar. Vào forumhome chèn đoạn code này dưới phần {vb:raw sidebar}
<div class="smartBannerIdentifier"></div>
<div class="smartbanner">
<img src="http://fc02.deviantart.net/fs70/f/2012/032/d/4/ads_logo_by_aliirules-d4ob2by.png" width="100%">   
</div>

Tin liên quan
XEM TRÊN MOBILE

No comments:

Post a Comment