Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên (Phiên bản 3)

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 “đấ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.  Phiên bản 3 này sẽ khắc phục được những lỗi mà phiên bản 2 gặp phải trước đây mình đã giới thiệu cho các bạn.

Xem Demo 

Hôm nay mình giới thiệu cho các bạn thêm một phiên bản 3, để các bạn có thể lựa chọn theo ý mình muốn

☼ 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 Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên (Phiên bản 3)

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 ích HTML/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:

<Script type="text/javascript">
/* design by namkna: http://namkna.blogspot.com/2012/01/tao-banner-quang-cao-voi-hieu-ung-truot.html */
function ShowRightAdDiv(){
if (document.body.clientWidth > 900){
document.write("<table width='110' border=0 cellspacing=0 cellpadding=0><tr><td><a href='http://namkna.blogspot.com/' target='_blank' title=''><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLxGc663cIt9-NS-DtVWMTu-V9RjIfBZnvX2BcV-PqtVRp5Oudpm_rZK2yh22R9unigFCDI8HND0qXF72ArqQhTRdCkKrHQvg2TD8L_TZy092aVkOBWaaVjuOfcgWzwi3uFaXxJil8rPa/s1600/banner-quang-cao-dep-nhat-truot-doc-2-ben-namkna-blogspot.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://namkna.blogspot.com/' target='_blank' title=''><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLxGc663cIt9-NS-DtVWMTu-V9RjIfBZnvX2BcV-PqtVRp5Oudpm_rZK2yh22R9unigFCDI8HND0qXF72ArqQhTRdCkKrHQvg2TD8L_TZy092aVkOBWaaVjuOfcgWzwi3uFaXxJil8rPa/s1600/banner-quang-cao-dep-nhat-truot-doc-2-ben-namkna-blogspot.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!