Download this Blogger Template by Clicking Here!

Ad 468 X 60

Thủ Thuật Blogger

9/24/15

Widgets

Cách tạo Banner quảng cáo trượt dọc 2 bên cho blogspot / website



Hình minh họa banner quảng cáo

1- Đăng nhập vào Blog
2- Vào bố cục (Layout)
3- Chọn Thêm tiện ích (add widget)
4-Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :
<div id=”divAdRight” style=”DISPLAY: none; POSITION: absolute; TOP: 50px”>
<a href=”http://vnexpress.net”><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudSsevWVkSpa1_V7WJ9NBRE0S2o47uzQyvnvvxP8v1WUnT_gEoUH_DoY5UmtGrHfoDqILNMTaIrWTrlc4fqhPuluYEB2qBBRucTCkeUfzOt8nL-Y2FehDP-StvgSVNQh-eeaeYZ4Ktv8/s1600/minh123.gif” width=”125″ /></a>
</div>
<div id=”divAdLeft” style=”DISPLAY: none; POSITION: absolute; TOP: 50px”>
<a href=”http://vnexpress.net/”><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudSsevWVkSpa1_V7WJ9NBRE0S2o47uzQyvnvvxP8v1WUnT_gEoUH_DoY5UmtGrHfoDqILNMTaIrWTrlc4fqhPuluYEB2qBBRucTCkeUfzOt8nL-Y2FehDP-StvgSVNQh-eeaeYZ4Ktv8/s1600/minh123.gif” 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 = 50;RightAdjust = 50;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>”);
</script>
5-  Lưu tiện ích lại là Ok.

Tùy chỉnh code!

  1. http://vnexpress.net/ : là liên kết mở ra khi người đọc click vào ảnh.
  2. Phần màu vàng trong đoạn code <img src=”…”/>  là link ảnh banner trượt dọc sẽ hiển thị
  3. width=”125″ : chiều rộng của banner. Có 2 giá trị được đánh dấu màu cam
  4. MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùngmàu tím,
  5. LeftAdjust = 5 : khoảng cách từ mép trái trang web đến banner
  6. RightAdjust = 5 : khoảng cách từ mép phải trang web đến banner
  7. TopAdjust = 10 : khoảng cách từ mép trên trang web đến banner

SHARE THIS POST   

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Author: Hamedledam
Sửa chữa và bảo trì máy tính, quản trị hệ thống mạng doanh nghiệp.Cung cấp các giải pháp ứng dụng CNTT - Thiết kế, quản trị website.

0 comments: Bài đăng của bạn! Quy định comments▼
XIN LƯU Ý:
Comments spam sẽ bị xóa ngay. Bạn có thể để lại link blog. Liên kết blog vui lòng liên hệ...

» Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục
» Mọi thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới hoặc Gửi thư
» Hãy viết bằng tiếng Việt có dấu để mọi người có thể đọc!
» Để viết chữ in đậm hãy sử dụng thẻ chữ in đậm