Chủ Nhật, 17 tháng 3, 2013

Tạo Banner di chuyển hai bên trong Blog/Web

Tại Label tiện ích Blog mình đã giới thiệu cho các bạn khá nhiều thủ thuật hay để có một Blog cá nhân hoàn thiện và tạo tiền đề phát triển thành web. Vì cũng trong khi giới thiệu mình nhận được một số thắc mắc, ý kiến của các bạn về việc chia sẻ code làm banner chạy dọc hai bên trong web của mình.

Thực chất đây là một code được khá nhiều bạn sử dụng và tùy biến song với code banner này có hai ưu điểm mà mình đảm bảo nhiều bạn rất thích.

Banner quảng cáo hai bên tự động di chuyển lên xuống khi bạn lăn con trỏ chuột.
Ở màn hình giao diện bình thường banner sẽ xuất hiện, nhưng khi full màn hình và vượt quá kích thước ban đầu thì Banner sẽ ẩn đi. Việc này sẽ có lợi không làm khuất nội dung bài đăng, cản trở người xem.

Tạo Banner QUẢNG CÁO, hai bên trong Blog/Web

DEMO

Bây giờ thì bạn thực hiện nhé!!! Rất đơn gian thôi.
Bạn vào Bố cục-> Chọn thêm HTML/Javascript
Với đoạn code sau:

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="http://blog.yume.vn/xem-blog/huong-dan-giao-dich-mua-nien-luan-khoa-luan-luan-van-bao-cao.chithanh888.35D14554.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHxmK3cbA0Mxx55xDGr6lJ-rhkwfrXX0arOkuDFqGqOWYYV5PpnewWlPRbWHcWiI91w8jILjZl-MQfomwbe7loexLVunonZQQuzFNJG16NeHzU-EwGitU-2fX8beKDEqbGor6N6XQQ7Q/s1600/right.png" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="http://blog.yume.vn/xem-blog/huong-dan-giao-dich-mua-nien-luan-khoa-luan-luan-van-bao-cao.chithanh888.35D14554.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiiL2BMAl1-Ejxu7w_WCX_WnSicq93oxRQrhp2fMwTFKk9f280yfVS9Ft0X1ZSfK6jlX2jbPZ7gLaVY7r7tui_rAVK815v-50is1FQItdrUf3y0uMKP88jmSpZ32EQpKx2lRkeuRMo-E/s1600/left.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 =5;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>

Bạn thay Link màu đỏ bằng địa chỉ liên kết cần đến, màu xanh bằng link hình nhé.
Chúc thành công.
Nhấn like để chia sẻ với bạn bè nhé.

Tags: Cộng đồng, Templates-Giao diện

Tin liên quan

Bài viết hot

Tạo Banner di chuyển hai bên trong Blog/Web

Comments[ 0 ]

Đăng nhận xét

Tin nổi bật