Code tạo banner quảng cáo 2 bên cho blogspot


Thông thường khi các bạn tạo blogspot làm website bán hàng hay lựa chọn những theme blogspot bán hàng chuyên nghiệp, hay những tiện ích code tạo quảng cáo 2 bên cho blogspot .

Mục đích của việc này nhằm làm đẹp cho website, tạo sức thu hút cho khách hàng phù hợp với chiến lược marketing của mình.

Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên blogspot:

Bước 1: Vào Bố cục >> Chọn Thêm tiện ích >> Chọn tiện ích HTML / Javascrip
Bước 2: Sau đó chèn đoạn code sau vào tiện ích vừa thêm.


<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">    
<a href="http://daylamblogdep.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEYhol0st1FLxanndgTIZWT2huajLgOnia3y4-4Ouv31CPGatdRBiLAad22GHp7lxfPLNAJ9WDcgCy1t-tnTgmm5GUur5HNLpmLlFfCfl_OVvrL9SGpJ87Kn4aCi0eH63jLURkJNIn2U/s1600/fptarena1.png" width="125" /></a>
</div>    
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">    
<a href="http://daylamblogdep.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEYhol0st1FLxanndgTIZWT2huajLgOnia3y4-4Ouv31CPGatdRBiLAad22GHp7lxfPLNAJ9WDcgCy1t-tnTgmm5GUur5HNLpmLlFfCfl_OVvrL9SGpJ87Kn4aCi0eH63jLURkJNIn2U/s1600/fptarena1.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>

Step 3: Phần tùy chỉnh code
  • http://daylamblogdep.blogspot.com/ : link hướng đến khi click vào
  • Phần màu cam trong đoạn code <img src="…"/>   link hình ảnh hiển thị trên banner
  • width = "125" : chiều rộng banner
  • MainContentW = 1000 : chiều rộng website
  • LeftAdjust = 5 : căn trái
  • RightAdjust = 5 : căn phải
  • TopAdjust = 10 : căn trên
Xem thêm thủ thuật blog hay:  Hướng dẫn tạo hộp like đa màu sắc