(iCOM) Khi bạn
muốn nhấn mạnh cho 1 chương trình hay sự kiện quan trọng nào đó, thì
cách tốt nhất là tạo banner chạy dọc theo rìa của website. Quảng cáo này
không đè lên nội dung bài viết, mà lại có thể chạy lên xuống tùy theo
việc kéo chuột. Tôi sẽ hướng dẫn bạn thủ thuật để làm tiện ích này.
Banner Fix đứng:
- Đối với Blogspot:
- Vào bố cục (Layout) / Chọn Thêm tiện ích (add widget)
-Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :
- Đối với website: Thêm phần code dưới lên trên thẻ đóng </body>
------------------------------------------------------
<div id="left_ads_float">
<a href="Link đường dẫn" target="_blank"><img border="0" src="Link ảnh" width="120" /></a>
</div>
<div id="right_ads_float">
<a href="Link đường dẫn" target="_blank"><img border="0" src="Link ảnh" width="120" /></a>
</div>
<style>
#left_ads_float
{
bottom:24px;
left: 10px;
position:fixed; }
#right_ads_float
{
bottom:24px;
right: 10px;
position:fixed;
}
</style>
<script>
var vtlai_remove_fads=false;
function vtlai_check_adswidth()
{
if(vtlai_remove_fads)
{
document.getElementById('left_ads_float').style.display='none';
document.getElementById('right_ads_float').style.display='none';
return;
}else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1)
{
vtlai_remove_fads=true;
vtlai_check_adswidth();
return;
}
else
{
var lwidth=parseInt(document.body.clientWidth);
if(lwidth<1110)
{
document.getElementById('left_ads_float').style.display='none';
document.getElementById('right_ads_float').style.display='none';
}
else
{
document.getElementById('left_ads_float').style.display='block';
document.getElementById('right_ads_float').style.display='block';
}
setTimeout('vtlai_check_adswidth()',10);
}
}
</script>
------------------------------------------------------
Banner trượt dọc:
- 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
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
- Vào bố cục (Layout) / Chọn Thêm tiện ích (add widget)
-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: 0px">
<a href="Link đường dẫn"><img src="Link ảnh" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="Link đường dẫn"><img src="Link ảnh" 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 = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>
------------------------------------------------------
Tùy chỉnh code:
- Link đường dẫn : là liên kết mở ra khi người đọc click vào ảnh.
- Linh ảnh: là link ảnh banner trượt dọc sẽ hiển thị.
- width="125" : chiều rộng của banner.
- MainContentW = 1000 : chiều rộng phần nội dung (post) trong trang web.
- 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.
- Nguyễn Quốc Chiến,
Chuyên gia Tư vấn, Đào tạo
No comments:
Write nhận xét