Tạo quảng cáo trượt 2 bên website

Sử dụng đoạn dưới đây, giúp bạn tạo và hiển thị quảng cáo trượt dọc hai bên sườn website một cách đẹp mắt.

<!-- banner truot 2 ben -->
	<div id="divAdRight" style="display: block; position: absolute;  z-index: 1e+19; left: 286.5px;">
    <a href="#link1"><br /><img src="/images/banner-left.png" width="130" /></a>

    </div>
    <div id="divAdLeft" style="display: block; position: absolute; z-index: 1e+19; left: 1486.5px;">
    <a href="#link2"><br /><img src="images/banner-right.png" width="130" /></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 = 130;RightBannerW = 130;LeftAdjust = 35;RightAdjust = 35;TopAdjust = 380;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
    </script>
<!-- end banner truot -->

Thay ảnh và URL quảng cáo và sửa lại một vài biến cho phù hợp với kích thước khung rộng của website.

• MainContentW: chiều rộng chứa body website.
• LeftBannerW: kích thước width của quảng cáo trái.
• RightBannerW: kích thước width của quảng cái phải
• LeftAdjust: khoảng cách giữa ảnh quảng cáo trái với khung content của website.
• RightAdjust: giống LeftAdjust nhưng cho ảnh quảng cáo phải.
• TopAdjust: vị trị top cho 2 quảng cáo.

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

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook