Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot Fix đứng
- Đối với Blogspot
B1- Đăng nhập vào Blog
B2- Vào bố cục (Layout)
B3- Chọn Thêm tiện ích (add widget)
B4-Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :
- Còn đối với website thì bạn chỉ cần thêm phần code dưới lên trên thẻ đóng </body> ( Chú ý: các bạn thay đổi phần chữ màu đỏ theo ý thích của bạn nhé )
<div id="left_ads_float">
<a href="Link đường dẫn" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb3yhMXl6CfqthC9iqo_xiM-HhXUZHqUI37L7zKKRuUgperrW_73H6hACUpki_j8Q7qYzuDkgkK79RCdsXdyR8izEnOrMWluQ1MwkQ9QJNgzxV4So9AiqtBXy9Qs1W9GvSecbggmOaK3g/s1600/fptarena1.png" width="120" /></a>
</div>
<div id="right_ads_float">
<a href="Link đường dẫn" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb3yhMXl6CfqthC9iqo_xiM-HhXUZHqUI37L7zKKRuUgperrW_73H6hACUpki_j8Q7qYzuDkgkK79RCdsXdyR8izEnOrMWluQ1MwkQ9QJNgzxV4So9AiqtBXy9Qs1W9GvSecbggmOaK3g/s1600/fptarena1.png" 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>
- 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
B1- Đăng nhập vào Blog
B2- Vào bố cục (Layout)
B3- Chọn Thêm tiện ích (add widget)
B4-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="http://bittuot.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb3yhMXl6CfqthC9iqo_xiM-HhXUZHqUI37L7zKKRuUgperrW_73H6hACUpki_j8Q7qYzuDkgkK79RCdsXdyR8izEnOrMWluQ1MwkQ9QJNgzxV4So9AiqtBXy9Qs1W9GvSecbggmOaK3g/s1600/fptarena1.png" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="http://bittuot.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb3yhMXl6CfqthC9iqo_xiM-HhXUZHqUI37L7zKKRuUgperrW_73H6hACUpki_j8Q7qYzuDkgkK79RCdsXdyR8izEnOrMWluQ1MwkQ9QJNgzxV4So9AiqtBXy9Qs1W9GvSecbggmOaK3g/s1600/fptarena1.png" 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>
Phần bạn cần tùy chỉnh code
- http://bittuot.blogspot.com/ : là liên kết mở ra khi người đọc click vào ảnh.
- Phần màu cam trong đoạn code <img src="…"/> là link ảnh banner trượt dọc sẽ hiển thị
- width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu màu cam
- MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu tím,
- 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
Chúc các bạn thành công !
cho mình hỏi là làm sao để lấy link của của mình để thay cái link ảnh đó của bạn vậy?làm ơn chỉ mình với
ReplyDeleteThay ảnh chỗ này bạn.
ReplyDeleteCảm ơn về bài viết .
ReplyDeleteCám ơn bài viết của bạn, rất hữu ích. Mình tạo thêm 2 cái trượt dọc nữa ở hai bên được ko bạn (tổng cộng là 4 cái cho 2 cái quảng cáo khác nhau) Blog mình: http://yeutienganh123.com/
ReplyDeletelàm 1 cái bên phải thì sao bạn
ReplyDeleteBài viết rất hay, tks ad về bài viết
ReplyDeleteQuý khách có nhu cầu in ấn bao bì giấy xin liên hệ
in túi giấy giá rẻ
in decal giá rẻ
in hộp giấy giá rẻ