Cách tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên web - Blogspot

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/Website lớn. Không những giúp tận dụng không gian, 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.

Code này khá tiện lợi vì khi gặp màn hình vuông (độ phân giải 768x1024) thì banner sẽ không bị chèn vào trong gây khó chịu vướng víu mà nó sẽ tự mất đi, nhưng chỉ những ai sử dụng màn hình dài mới thấy được quảng cáo. Dạng này là dạng 2 banner ở 2 bên web. Khi kéo chuột xuống sẽ có hiệu ứng 2 banner trượt theo khi kéo chuột xuống.

Hôm nay, Vinll 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 các bước rất đơn giản sau.

1. Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot khi kéo chuột xuống thì nó chạy theo (mẫu 1).

Cách làm như sau:

Đối với website: Bạn chỉ cần thêm phần code dưới lên trên thẻ đóng </body>

Đối với Blogspot

Bước 1: Đăng nhập vào Blog
Bước 2: Vào bố cục (Layout)
Bước 3: Chọn Thêm tiện ích (add widget)
Bước 4: Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :

HTML
<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="http://vinll.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcJew9bMfIx5eubMpZI7POLCdJmkltnLN3WuUfpb2JP8Ye2agmySxfk7XodL6PyjfxtNGBM7grtXnSBHE60Eaeu8_S7sAuoKSnYsJc1slekdLnJQ19nME5XsvVgsi93QKJJYgUfRTaJZo/s1600/fptarena1.png" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="http://vinll.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcJew9bMfIx5eubMpZI7POLCdJmkltnLN3WuUfpb2JP8Ye2agmySxfk7XodL6PyjfxtNGBM7grtXnSBHE60Eaeu8_S7sAuoKSnYsJc1slekdLnJQ19nME5XsvVgsi93QKJJYgUfRTaJZo/s1600/fptarena1.png" 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");
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>

Tùy chỉnh code!

http://vinll.blogspot.com/ : là liên kết mở ra khi người đọc click vào ảnh.

Phần màu vàng trong đoạn code <img src=”…”/> là link ảnh banner trượt dọc sẽ hiển thị

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

MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùngmà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

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.

2. Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot khi kéo chuột xuống thì nó chạy theo (mẫu 2).

Tính năng mới của scripts tạo banner quảng cáo trượt dọc 2 bên blogspot phiên bản 3

Banner ban đầu sát với lề trên của trình duyệt, không còn hiện tượng banner bị che khuất bởi lề trên hoặc dưới của trình duyệt web.

Độ tương tác tốt hơn, chuyển động mượt mà hơn khi bạn cuộn xuống cuối hoặc lên trên đầu blog.

Khi kích thước trình duyệt có chiều ngang nhỏ hơn 1024px, banner tự động biến mất để tránh đè lên hoặc che khuất các thành phần khác của blog của bạn tránh gây ức chế cho người đọc.

Khi kích thước trình duyệt có chiều ngang lớn hơn 1024px, banner sẽ tự động canh lề & giữ khoảng cách với mép 2 bên trình duyệt để tránh gây ra khoảng trống vô nghĩa.

Cách làm như sau:

1- Đăng nhập vào Blog

2- Vào Bố cục (layout) => Chọn Thêm tiện ích (Add widget) => Tạo một tiện íchHTML/Javascripts và chèn vào đoạn code bên dưới vào phần nội dung của tiện ích bạn vừa tạo:

HTML
<Script type="text/javascript">
function ShowRightAdDiv(){
if (document.body.clientWidth > 900){
document.write("<table width='110' border=0 cellspacing=0 cellpadding=0><tr><td><a href=http://vinll.blogspot.com/' target='_blank' title=''><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcJew9bMfIx5eubMpZI7POLCdJmkltnLN3WuUfpb2JP8Ye2agmySxfk7XodL6PyjfxtNGBM7grtXnSBHE60Eaeu8_S7sAuoKSnYsJc1slekdLnJQ19nME5XsvVgsi93QKJJYgUfRTaJZo/s1600/fptarena1.png' width='110' style='margin-bottom:4px'></a></td></tr></table>");
}
}
function ShowLeftAdDiv(){
if (document.body.clientWidth > 900){
document.write("<table width='110' border=0 cellspacing=0 cellpadding=0><tr><td><a href='http://vinll.blogspot.com/' target='_blank' title=''><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcJew9bMfIx5eubMpZI7POLCdJmkltnLN3WuUfpb2JP8Ye2agmySxfk7XodL6PyjfxtNGBM7grtXnSBHE60Eaeu8_S7sAuoKSnYsJc1slekdLnJQ19nME5XsvVgsi93QKJJYgUfRTaJZo/s1600/fptarena1.png' width='110' style='margin-bottom:4px'></a></td></tr></table>");
}
}
</Script>
<DIV id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 10px"><script language="JavaScript">ShowRightAdDiv();</script></DIV>
<DIV id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 10px"><script language="JavaScript">ShowLeftAdDiv();</script></DIV>
<SCRIPT language=JavaScript>
window.onresize=ShowAdDiv;
function FloatTopDiv()
{
var ns = (navigator.appName.indexOf("Netscape") != -1);
if(!ns)
{
startLX = ((document.body.clientWidth -1215)/2) + 105 , startLY = 0;
startRX = ((document.body.clientWidth)/2) + 391 , startRY = 0;
}
else
{
startLX = ((document.body.clientWidth -1215)/2) + 105 , startLY = 0;
startRX = ((document.body.clientWidth -775)/2) + 778 , startRY = 0;
}
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;this.style.top=y;};
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;this.style.top=y;};
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 > 10){startLY = 10;startRY = 10;} else {startLY = 10;startRY = 10;};
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");
ftlObj2 = m2("divAdLeft");
stayTopLeft();
}
function ShowAdDiv()
{
var objAdDivRight = document.getElementById("divAdRight");
var objAdDivLeft = document.getElementById("divAdLeft");
if (document.body.clientWidth < 980)
{
objAdDivRight.style.display = "none";
objAdDivLeft.style.display = "none";
}
else
{
objAdDivRight.style.display = "block";
objAdDivLeft.style.display = "block";
FloatTopDiv();
}
}
ShowAdDiv();
</SCRIPT>

Trong đó:

Màu xanh: là link ảnh banner hiển thị 2 bên của trình duyệt, bạn hãy thay đổi thành link ảnh của bạn nha.

Màu đỏ: là link liên kết tới trang quảng cáo, đây là phần sẽ được chuyển hướng tới khi độc giả bấm vào liên kết quảng cáo của bạn.

Chúc thành công!