Tạo Banner Quảng Cáo Trượt Dọc 2 Bên Cực Đẹp

Để có được một mẫu quảng cáo đẹp, mình tin tất cả các bạn quan tâm đến thiết kế blog đều mong muốn có được điều này.Banner sẽ giúp cho các webmatter tiết kiệm đất và gây sự chú ý bởi hiệu ứng cực đẹp. Hôm nay thế giới tin học online sẽ giới thiệu cho các bạn một mẩu banner cực đẹp mà không hề ảnh hưởng đến tốc độ load của website. Bạn có thể xem demo ở ngoài trang chủ của thế giới tin học online.

Tiện ích này trước đây đã được một số Blogger giới thiệu. Tuy nhiên có một số nhược điểm “chết người” như : không hiển thị tốt trên trình duyệt Firefox, hoặc nếu hiển thị thì khi click vào bất cứ liên kết nào trên Blog cũng không có tác dụng ( unclickable ).

Sau khi tham khảo code từ một số website tên tuổi, thegioitinhoconline đã tìm được đoạn code ưng ý, có thể khắc phục được các lỗi nêu trên, đặc biệt là hiển thị tốt ngay cả trên trình duyệt “già nua xấu xí” IE6.

Và cũng theo yêu cầu của một số bạn trước đây, hôm nay thegioitinhoconline sẽ hướng dẫn các bạn cách chèn tiện ích “Banner quảng cáo trượt dọc 2 bên” vào Blog, qua 2 bước rất đơn giản sau:

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScript và chèn vào đoạn code bên dưới :

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vmKZQZ9YkRStuJAZgAMOYXki9puSGs3f8WIecZ_qNWpDk_KOx07HO-kC2pkrvX_YPZoUYeSrSDAQJ0yfL4HpQPM4L62rLEtDxpONGUtajI2N1nXEanGRe_mW_4iHZTZs4ENV_ETLNWs/s640/banner+cell+phone.jpg" width="125" /></a> 

</div> 

<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEoDSaIQXdGZSKL71K-SRm9U7HS2NYGb0Kafd-WWqCZbB5axgNJos-8pu7oSuVFnBWGisqFz-6k-nOzdt-owkyI764LAhE8oUOWGmWApeH5gPP1y-pHWAKBxwRgfj1IOgJLn80gvKReX0/s1600/The+Gioi+Tin+Hoc+Online-+laptop+hot.jpg" 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>

Trong đoạn code trên :

• <a href="#"> : liên kết đến khi người đọc click vào. Thay # bằng liên kết trang bạn cho phù hợp

• <img src=”…”/> : banner bạn muốn hiển thị bạn có thể tự tay thiết kế cho mình một banner theo ý muốn chỉ cần dùng phần mềm photoshop cắt dán chỉnh sửa một chút là có được một banner ưng ý.

• width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu cùng màu đỏ

• MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu xanh lá

• LeftAdjust = 5 : khoảng cách từ bìa trái trang web đến banner

• RightAdjust = 5 : khoảng cách từ bìa phải trang web đến banner

• TopAdjust = 10 : khoảng cách từ rìa trên trang web đến banner

Lưu ý : Do tiện ích sử dụng những giá trị xác định để điều chỉnh vị trí của banner so với trang web, do đó, tính thẩm mỹ của tiện ích sẽ phụ thuộc vào độ phân giải của màn hình máy tính.

3. Save and Done.

Chúc các bạn thành công.

Share: