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 và các 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.
Hôm nay tôi sẽ hướng dẫn các bạn tạo banner quảng cáo trượt dọc 2 bên cho blog của bạn.
Hôm nay tôi sẽ hướng dẫn các bạn tạo banner quảng cáo trượt dọc 2 bên cho blog của bạn.
Hình ảnh minh họa
Bước 1: Đăng nhập vào Blog
Bước 2: Chọn bố cục
Bước 3: Chọn thêm tiện ích / HTML-Javascript
Bước 4: Chèn đoạn code phía dưới vào.
<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> <a href="Liên kết muốn đến"><img src="Liên kết hình ảnh" width="125" /></a></div> <div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> <a href="Liên kết muốn đến"><img src="Liên kết hình ảnh" 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 =5;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>"); </script>
Vậy là ok cho một banner chạy quảng cáo đẹp trên blog của bạn.
Chúc các bạn thành công
