Hướng dẫn tạo banner trượt 2 bên cho blog

Banner trượt dọc 2 bên là hình thức quảng cáo rất phổ biến trên các website hiện nay, Chúng ta đã khá quen với banner trượt quảng cáo trượt dọc ở 2 bên của 1 site nào đó. đa phần các banner này được thiết kế nằm sát 2 mép (trái & phải) của  website và nó luôn trượt theo khi ta di chuyển chuột.

Các banner trượt theo web/blog không ảnh hưởng tới nội dung của web/blog còn mang lại nguồn thu khá tốt từ quảng cáo của các website nên rất được các webmaster rất ưa thích. Bài viết này mình sẽ chia sẻ với các bạn cách tạo Widget banner trượt dọc 2 bên cho blog (Nếu bạn chưa biết cách tạo widget có thể tham khảo tại bài viết này), dù không để quảng cáo nó cũng trang trí thêm cho blog của bạn thêm hấp dẫn như hình trên
1. Đăng nhập vào Blog chọn Bố cục -> Thêm tiện ích -> HTML/Javascrip
2. Copy đoạn code sau và dán vào tiện ích bạn vừa tạo

<div id="left_ads_float">
<a href="http://csttol.blogspot.com/" target="_blank"><img border="0" src="https://lh5.googleusercontent.com/8qUIFknZfyUD0Zk9saT9U7-eBRKW_POgjo5uW5LJOSc=w144-h470-no" width="190" /></a></div>
<div id="right_ads_float">
<a href="http://csttol.blogspot.com" target="_blank"><img border="0" src="https://lh4.googleusercontent.com/-TZAdyj2_3H8/UtqKOAUI44I/AAAAAAAABZU/Irj7G1QOSfk/w144-h470-no/Event%252C+To%252BChuc%252BSu%252BKien%252BTai%252Bdong%252Bnai%252C+Khai%252BTruong%252C+Dong%252BTho%252C+Hop%252BMat%252C+Hoi%252BNghi%252C+Meeting%252C+TCSK%252C+HOP+MAT%252C+HOI+NGHI+KHACH+HANG%252C+Dong%252BNai%252Bevent%252C+Long%252Bthanh%252C+TCSK%252C+PR%252C+PG%252C+MC%252C+CA%252BSY+7402.png" width="190" /></a></div>
<style>#left_ads_float{  top:0px  bottom:24px;    left: 5px;    position:fixed; }#right_ads_float{ top:0px bottom:24px;  right: 5px; position:fixed;}</style><script>var vtlai_remove_fads=false;function vtlai_check_adswidth()    {        if(vtlai_remove_fads) { document.getElementById('left_ads_float').style.display='none';            document.getElementById('right_ads_float').style.display='none';  return; }else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1) {  vtlai_remove_fads=true;            vtlai_check_adswidth();  return; }else { var lwidth=parseInt(document.body.clientWidth);            if(lwidth<1110){ document.getElementById('left_ads_float').style.display='none';                document.getElementById('right_ads_float').style.display='none'; } else {                document.getElementById('left_ads_float').style.display='block';                document.getElementById('right_ads_float').style.display='block';  }            setTimeout('vtlai_check_adswidth()',10); }}</script>

Tùy chỉnh đoạn code trên :
http://csttol.blogspot.com : Thay bằng địa chỉ web/blog của bạn
src : Địa chỉ của hình ảnh banner
border : Giá trị độ dày đường viền banner
width : Chiều rộng của banner
left : Khoảng cách cách mép trái màn hình của banner
right Khoảng cách cách mép phải màn hình của banner
Các bạn thay các thông số cho phù hợp và chọn lưu và xem kết quả

UPDATE

Thêm một đoạn code tạo banner trượt 2 bên cho các bạn tham khảo, Bộ code này theo mình thấy khá hoàn thiện, tuy nhiên hơi nhiều hiệu ứng có thể làm cho banner bị giật khi bạn trượt trang web/blog

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">    
<a href="http://csttol.blogspot.com/"><img src="https://lh5.googleusercontent.com/8qUIFknZfyUD0Zk9saT9U7-eBRKW_POgjo5uW5LJOSc=w144-h470-no" width="125" /></a>
</div>    
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">    
<a href="http://csttol.blogspot.com/"><img src="https://lh4.googleusercontent.com/-TZAdyj2_3H8/UtqKOAUI44I/AAAAAAAABZU/Irj7G1QOSfk/w144-h470-no/Event%252C+To%252BChuc%252BSu%252BKien%252BTai%252Bdong%252Bnai%252C+Khai%252BTruong%252C+Dong%252BTho%252C+Hop%252BMat%252C+Hoi%252BNghi%252C+Meeting%252C+TCSK%252C+HOP+MAT%252C+HOI+NGHI+KHACH+HANG%252C+Dong%252BNai%252Bevent%252C+Long%252Bthanh%252C+TCSK%252C+PR%252C+PG%252C+MC%252C+CA%252BSY+7402.png" width="125" /></a>    
</div>    
<script>    
    function FloatTopDiv()    
    {    
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;    
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;    
        var d = document;    
        function ml(id)    
        {    
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];    
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};    
            el.x = startRX;    
            el.y = startRY;    
            return el;    
        }    
        function m2(id)    
        {    
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];    
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};    
            e2.x = startLX;    
            e2.y = startLY;    
            return e2;    
        }    
        window.stayTopLeft=function()    
        {    
            if (document.documentElement && document.documentElement.scrollTop)    
                var pY =  document.documentElement.scrollTop;    
            else if (document.body)    
                var pY =  document.body.scrollTop;    
             if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else  {startLY = TopAdjust;startRY = TopAdjust;};    
            ftlObj.y += (pY+startRY-ftlObj.y)/16;    
            ftlObj.sP(ftlObj.x, ftlObj.y);    
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;    
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);    
            setTimeout("stayTopLeft()", 1);    
        }    
        ftlObj = ml("divAdRight");    
        //stayTopLeft();    
        ftlObj2 = m2("divAdLeft");    
        stayTopLeft();    
    }    
    function ShowAdDiv()    
    {    
        var objAdDivRight = document.getElementById("divAdRight");    
        var objAdDivLeft = document.getElementById("divAdLeft");      
        if (document.body.clientWidth < 1000)    
        {    
            objAdDivRight.style.display = "none";    
            objAdDivLeft.style.display = "none";    
        }    
        else    
        {    
            objAdDivRight.style.display = "block";    
            objAdDivLeft.style.display = "block";    
            FloatTopDiv();    
        }    
    }
</script>    
<script>    
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");    
</script>

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