[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/AVvXsEhD4awOkOGeORvQoWq8rtA6IpXG2Mbcji4Piwq6HLsnTxu7TakBfL1FMSqgx9zrbdtzEGhdCRG4DsCJnZXQ_57KVEsQPqyIG-KzEjzTxcLYuiamH4fqkeVBmwpu3Gs5I5oplAksyvWu6gRm/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/AVvXsEhD4awOkOGeORvQoWq8rtA6IpXG2Mbcji4Piwq6HLsnTxu7TakBfL1FMSqgx9zrbdtzEGhdCRG4DsCJnZXQ_57KVEsQPqyIG-KzEjzTxcLYuiamH4fqkeVBmwpu3Gs5I5oplAksyvWu6gRm/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. Thay http://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ạn đã cố gắng hết sức, và công việc liên quan đến kỹ thuật này thật sự làm cho bạn khó chịu và đau đầu?! Đã đến lúc bạn HÃY QUÊN VIỆC KỸ THUẬT ĐI! Hãy để việc đó chúng tôi xử lý giúp bạn Hãy tham dự khóa học:  Internet Marketing Coaching - Huấn luyện từng bước để thành công trên internet Đảm  bảo hoàn lại tiền 100% trong trường hợp: Nếu bạn không tạo ra hệ thống như chúng tôi giới thiệu. Nếu bạn không nhận được giá trị gấp 3 lần số tiền bạn bỏ ra. Nếu bạn không hài lòng về huấn luyện viên đào tạo. Nếu bạn không kiếm được tiền sau khóa học.    => Chúng tôi sẽ hoàn lại 100% số tiền cho bạn  Mời bạn xem chi tiết tại http://coaching.internetmarketing.vn/ HOTLINE: 0963 132 916 (Adam Thiên) *Ghi chú: Dành tặng 1 bộ tài liệu SEO top 10 google trị giá 2.000.000VNĐ cho 10 thành viên đăng ký trước 15 ngày khai giảng

Adam Thiên

http://www.hocinternetmarketing.net/