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ì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>