Cách tạo Banner quảng cáo trượt dọc 2 bên cho blogspot / websiter!

Cách tạo Banner quảng cáo trượt dọc 2 bên cho blogspot / websiter!

1- Đăng nhập vào Blog

2- Vào bố cục (Layout)

3- Chọn Thêm tiện ích (add widget)

4-Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">      
<a href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoSo_5FnJng4eujeaVlHzUMbGJ47nqECA7D89J9qY9iHeHzg_Auy1RFJgH4XN7xfhFB4YgslWNmSPxB5Van7Ag3HQ0ORcq0IYxqR8YBVDW4KytXeJzZTnbty20IP0Ntf1ymDEEQS7igbn/s1600/banner-quang-cao-dep-nhat-truot-doc-2-ben-namkna-blogspot.png" width="125" /></a> 
</div>      
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">       
<a href="http://namkna.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoSo_5FnJng4eujeaVlHzUMbGJ47nqECA7D89J9qY9iHeHzg_Auy1RFJgH4XN7xfhFB4YgslWNmSPxB5Van7Ag3HQ0ORcq0IYxqR8YBVDW4KytXeJzZTnbty20IP0Ntf1ymDEEQS7igbn/s1600/banner-quang-cao-dep-nhat-truot-doc-2-ben-namkna-blogspot.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>

5-  Lưu tiện ích lại là Ok.

Tùy chỉnh code!

1. http://namkna.blogspot.com/ : là liên kết mở ra khi người đọc click vào ảnh.
2. Phần màu vàng trong đoạn code <img src=”…”/>  là link ảnh banner trượt dọc sẽ hiển thị
3. width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu màu cam
4. MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu tím,
5. LeftAdjust = 5 : khoảng cách từ mép trái trang web đến banner
6. RightAdjust = 5 : khoảng cách từ mép phải trang web đến banner
7. TopAdjust = 10 : khoảng cách từ mép trên trang web đến banner