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

Lần trước Adam Thiên đã giới thiệu cho các bạn: Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên 

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

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

Có gì mới ở phiên bản này:

• Banner ban đầu sát với lề trên của trình duyệt.
• Tốc độ trượt mượt hơn.
• 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 che khuất các thành phần khác của giao diện.
• 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.

Quy trình gồm 4 bước cơ bản sau:

Bước 1: Đăng nhập vào Blog

Bước 2: Vào bố cục

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

<Script type="text/javascript">
/* design by AdamThien: http://www.hocinternetmarketing.net/*/
function ShowRightAdDiv(){
if (document.body.clientWidth > 900){
document.write("<table width='110' border=0 cellspacing=0 cellpadding=0><tr><td><a href='http://khoahuanluyeninternetmarketing3h.blogspot.com/' target='_blank' title=''><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzcHYJKP67is6B63mP5Z2Mtrlzukm97zjevvY2IworawmDnqDcVLwwZ4CxnqhRVUxafhVHuEI8lbSVzfCD2m2aUqWWgQHpRU7n_0lUQCoYp6j0scwM7avrdZu90I3GNQkAYabTeEGRXS1/s1600/banner-160x600.jpg' 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://khoahuanluyeninternetmarketing3h.blogspot.com/' target='_blank' title=''><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzcHYJKP67is6B63mP5Z2Mtrlzukm97zjevvY2IworawmDnqDcVLwwZ4CxnqhRVUxafhVHuEI8lbSVzfCD2m2aUqWWgQHpRU7n_0lUQCoYp6j0scwM7avrdZu90I3GNQkAYabTeEGRXS1/s1600/banner-160x600.jpg' 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 đoạn code trên :
 

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

<img src=”…”/> : banner bạn muốn hiển thị 

Bước 4: Lưu tiện ích lại là OK.

Chúc các bạn và anh/chị sớm thành công trên môi trường internet. Nếu có thắc mắc gì mọi người có thể để lại comments bên dưới để cùng thảo luận nhé.

Bài viết được siêu tầm từ Adam Thiên, một chuyên gia trẻ trong lĩnh vực IM.