Hướng dẫn code quảng cáo đứng & trượt dọc 2 bên trang Web

Sau khi đọc bài viết Code Popup quảng cáo tổng hợp tại ITViet360 thì nhiều bạn có nhu cầu và hỏi thêm dạng code quảng cáo đứng hoặc trượt dọc 2 bên trang Web. Với code quảng cáo trượt dọc 2 bên Website sẽ gây được sự chú ý lớn.
Ở bài viết này ITViet360 sẽ giới thiệu với bạn 2 loại quảng cáo 2 bên được dùng thông dụng nhất hiện nay. Và cách thêm chúng như thế nào?
Đối với Blogspot
- Bạn chỉ cần dán code vào 1 tiện ích HTML/Javascript/
Đối với Website
- Bạn thêm code vào nằm trong thẻ <body> ... </body> là được
1. Code quản cáo đứng dọc cố định 2 bên trang Website.
Demo tại Blog: Dịch vụ SEO Web hàng đầu


<div id="left_ads_float">
        <a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPWy48vTosxemfGTin9t5tcKEIDIsochkEnBdYMe8aSK5loqQctdZrg2-e-urf7MJ-1QaFCMR0WWAFmp3v6WADvnE2leI02s2G_e1ZcFQmhsVUemkbX2Pomt22Mvc48Jvr_HFl1SKJPxg/s1600/banner-doc-web.jpg" width="170" /></a>
    </div>
    <div id="right_ads_float">
       <a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPWy48vTosxemfGTin9t5tcKEIDIsochkEnBdYMe8aSK5loqQctdZrg2-e-urf7MJ-1QaFCMR0WWAFmp3v6WADvnE2leI02s2G_e1ZcFQmhsVUemkbX2Pomt22Mvc48Jvr_HFl1SKJPxg/s1600/banner-doc-web.jpg" width="170" /></a>
    </div>
<style>
#left_ads_float
{
    bottom:20px;
    left: 10px;
    position:fixed; }
#right_ads_float
{
    bottom:20px;
    right: 10px;
    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>

2. Code quản cáo trượt dọc khi kéo thanh cuộn lên xuống.
Demo tại Blog: Công ty SEO uy tín

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">  
<a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPWy48vTosxemfGTin9t5tcKEIDIsochkEnBdYMe8aSK5loqQctdZrg2-e-urf7MJ-1QaFCMR0WWAFmp3v6WADvnE2leI02s2G_e1ZcFQmhsVUemkbX2Pomt22Mvc48Jvr_HFl1SKJPxg/s1600/banner-doc-web.jpg" width="170" /></a>
</div>  
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">  
<a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPWy48vTosxemfGTin9t5tcKEIDIsochkEnBdYMe8aSK5loqQctdZrg2-e-urf7MJ-1QaFCMR0WWAFmp3v6WADvnE2leI02s2G_e1ZcFQmhsVUemkbX2Pomt22Mvc48Jvr_HFl1SKJPxg/s1600/banner-doc-web.jpg" width="170" /></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>

width="170" : chiều rộng của banner. Có 2 giá trị được đánh dấu màu cam
MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu tím,
LeftAdjust = 5 : khoảng cách từ mép trái trang web đến banner
RightAdjust = 5 : khoảng cách từ mép phải trang web đến banner
TopAdjust = 10 : khoảng cách từ mép trên trang web đến banner Chuyên mục: , , ,

0 nhận xét:

Đăng một bình luận