Cách tạo quảng cáo chạy dọc hai bên cho blogspot

September 06, 2021

0

Khi bạn đã tự thiết kế website bằng Blogspot chuyên nghiệp rồi thì bạn cũng nên tạo những banner quảng cáo cho các sản phẩm mà bạn đang kinh doanh (hoặc bán quảng cáo cho các đối tác khác khi website/Blogspot của bạn có lượng truy cập nhất định).

Hôm nay ngưng làm màu sẽ hướng dẫn các bạn cách tạo banner quảng cáo dọc 2 bên website/Blogspot của bạn. Cũng đơn giản thôi, ko có gì phức tạp cả. Bạn chỉ cần thiết kế trước cho mình 2 hình ảnh banner quảng cáo cho 2 sản phẩm của bạn thôi, phần còn lại để ngưng làm màu làm nha.

Đối với dạng quảng cáo bằng banner ở 2 bên Blogspot này sẽ có 2 dạng: 1 dạng banner quảng cáo đứng im 1 chỗ và 1 dạng banner quảng cáo trượt dọc 2 bên Blogspot khi kéo chuột. Tui sẽ hướng dẫn bạn làm cả 2 dạng này luôn, còn bạn chọn dạng banner quảng cáo nào cho Blogspot của bạn thì tùy ở bạn.

{tocify} $title={Nội dung}

Hướng dẫn tạo banner quảng cáo 2 bên website/Blogspot - fix đứng im 1 chỗ

$ads={1}

Đối với website:

Bạn vào phần chỉnh sửa code và chỉ cần thêm phần code phía dưới lên trên thẻ đóng </body>

Đối với Blogspot
Bước 1: Đăng nhập vào Blog
Bước 2: Vào phần quản trị Blog ---> chọn Bố cục
Bước 3: Chọn Thêm tiện ích
Bước 4: Chọn HTML\Javascripts

Bước 5: Dán (paste) đoạn code bên dưới vào phần nội dung

Bước 6: bấm Lưu để hoàn tất

<div id="left_ads_float">
<a href="Link web 1" target="_blank"><img border="0" src="Link hình ảnh 1" width="120" /></a>
</div>
<div id="right_ads_float">
<a href="Link web 2" target="_blank"><img border="0" src=" Link hình ảnh 2" width="120" /></a>
</div>
<style>
#left_ads_float
{
top:10px;
left: 10px;
position:fixed; }
#right_ads_float
{
top:10px;
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>

$ads={2}

Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot

Dạng này là dạng 2 banner ở 2 bên website/Blogspot. Khi kéo chuột xuống thì 2 banner sẽ trượt theo (banner trượt rất êm, ko dựt dựt gây nhức mắt cho người đọc/khách hàng).

Cách thực hiện như sau

Đối với website:

Bạn vào phần chỉnh sửa code và chỉ cần thêm phần code phía dưới lên trên thẻ đóng </body>

Đối với Blogspot
Bước 1: Đăng nhập vào Blog
Bước 2: Vào phần quản trị Blog ---> chọn Bố cục
Bước 3: Chọn Thêm tiện ích
Bước 4: Chọn HTML\Javascripts

Bước 5: Dán (paste) đoạn code bên dưới vào phần nội dung

Bước 6: bấm Lưu để hoàn tất

$ads={1}

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="Link web 1"><img src="Link hình ảnh 1" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="Link web 2"><img src="Link hình ảnh 2" 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>

$ads={2}

Chú ý: Phía cuối đoạn code có vài thông số bạn tham khảo thêm để chỉnh sữa cho phù hợp với website/blogspot của bạn

LeftBannerW = 125: độ rộng của banner bên trái
RightBannerW = 125: độ rộng của banner bên phải
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

Ngoài ra các bạn có thể tham khảo thêm cách này nữa :