Thủ thuật tạo baner quảng cáo trượt 2 bên cho Blogger

Banner quảng cáo trượt dọc 2 bên trang web là hình thức quảng cáo rất phổ biến hiện nay trên các Forum\Website lớn. Không những giúp tận dụng “đất”, nó còn dễ dàng gây được sự chú ý của người đọc với hiệu ứng trượt theo khi trang được cuộn lên\xuống. 

Thủ thuật blogger này trước đây đã được một số Blogger giới thiệu. Tuy nhiên có một số nhược điểm “chết người” như : không hiển thị tốt trên trình duyệt Firefox, hoặc nếu hiển thị thì khi click vào bất cứ liên kết nào trên Blog cũng không có tác dụng (unclickable).

Hôm nay sẽ hướng dẫn các bạn cách chèn tiện ích “Banner quảng cáo trượt dọc 2 bên” vàoBlog, qua 2 bước rất đơn giản sau:

1- Đăng nhập vào Blogger / Blogspot

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://www.thietkeblogger.net/"><img src="http://3.bp.blogspot.com/-NH4TMt6XGMw/UYXumQgi-SI/AAAAAAAACVI/QkggBTWJz6A/s1600/Google.gif" width="125" /></a> 
</div>      
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">       
<a href="http://www.thietkeblogger.net/"><img src="http://3.bp.blogspot.com/-NH4TMt6XGMw/UYXumQgi-SI/AAAAAAAACVI/QkggBTWJz6A/s1600/Google.gif" 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>

1. http://www.thietkeblogger.net/ : 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

Lưu ý : Do tiện ích sử dụng những giá trị xác định để điều chỉnh vị trí của banner so với trang web, do đó, tính thẩm mỹ của tiện ích sẽ phụ thuộc vào độ phân giải của màn hình máy tính.