Tuesday, May 31, 2016

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

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

Giúp bạn quảng bá sản phẩm của mình đến người đọc trên trang Blogspot của mình


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 Nguyễn Trường Sơn 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 để Sơn Nguyễn lo :D

Đố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. Sơn Nguyễn 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.

Banner quảng cáo dọc 2 bên website/Blogspot


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


Đố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>


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

<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>

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
Như vậy Nguyễn Trường Sơn đã hướng dẫn cho bạn cách tạo banner quảng cáo trượt dọc 2 bên Blogspot rồi đấy. Hi vọng nó có ích đối với bạn.

Nếu bạn có câu hỏi nào thì hãy comment xuống phía dưới nhé

Chúc các bạn thành công!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 9: Hướng dẫn gắn tên miền vào Blogspot đơn giản, nhanh gọn
Bài 10: Hướng dẫn khắc phục lỗi không hiển thị hình ảnh của Blogspot
Bài sau >>>