Hướng dẫn Trang trí banner vui Tết cho diễn đàn của bạn

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
931
Được Like
1,553
Cách đây 2 năm có 1 bài viết của @PVS hướng dẫn gắn banner vui Tết cho các website, đặc biệt là các diễn đàn dùng XenForo, đến nay dùng lại và thấy nó vẫn còn rất hữu dụng.

Nhân dịp gắn ở VNXF mình cũng xin hướng dẫn các bạn dùng nó để trang trí cho website luôn, trông rất đẹp mắt. Thực hiện rất đơn giản, chỉ cần gắn đoạn mã bên dưới vào cuối template footer của style đang sử dụng.

Mã:
<style type="text/css">
.banner_left img{
position:fixed;z-index:9999;top:10px;left:0;
}
.banner_right img{
position:fixed;z-index:9999;top:10px;right:0;
}
@media (max-width: 1100px) {
.banner_left img,.banner_right img{
display:none;
}
}
</style>
<a href="http://vnxf.vn" class="banner_left"><img src="http://vnxf.vn/anh/banner_left.png"/></a>
<a href="http://vnxf.vn" class="banner_right"><img src="http://vnxf.vn/anh/banner_right.png"/></a>

Banner này chỉ hiện trên màn hình có bề ngang lớn hơn 1024px và các bạn có thể tải banner đính kèm để gắn lên web, ai giỏi design thì có thể đổi ảnh và chữ như mong muốn.

Chúc các bạn thành công và đưa ông Táo lên đường thuận lợi :)
 

Đính kèm

  • banner-tet.zip
    161.8 KB · Lượt xem: 18

daklak1985

MasterCorporal
Tham gia
01/09/2016
Bài viết
216
Được Like
68
forum của mình có cả chân trang dưới footer nữa,mình ẩn banner chân trang không được,đây là code mình ẩn thử mà k đc,mình thêm bottom vào code ẩn chung với banner left-right:
HTML:
.banner_left img,.banner_right img,.bottom img{
display:none;
}
}
Còn đây là code banner chân trang:
HTML:
<div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(images/nentet.png) repeat-x bottom left;">
</div>
<a href="http://vnxf.vn/" target="_blank">
<img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="images/banner_header.png"/>
</a>
Giúp mình ẩn cái banner chân trang trên mobile như 2 banner left-right với,thanks !
@Blue ẹp zai ơi :=D
 

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
931
Được Like
1,553
Mã:
<div class="bot_img" style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(images/nentet.png) repeat-x bottom left;">
</div>
<a href="http://vnxf.vn/" target="_blank">
<img style="position:fixed;z-index:9999;bottom:20px;left:20px" class="bot_bn" src="images/banner_header.png"/>
</a>
Đây là code chứa banner
Mã:
.banner_left img,.banner_right img,.bot_bn {
display:none;
}
Còn đây là css, bạn thay thế nhé
 

daklak1985

MasterCorporal
Tham gia
01/09/2016
Bài viết
216
Được Like
68
Mã:
<div class="bot_img" style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(images/nentet.png) repeat-x bottom left;">
</div>
<a href="http://vnxf.vn/" target="_blank">
<img style="position:fixed;z-index:9999;bottom:20px;left:20px" class="bot_bn" src="images/banner_header.png"/>
</a>
Đây là code chứa banner
Mã:
.banner_left img,.banner_right img,.bot_bn {
display:none;
}
Còn đây là css, bạn thay thế nhé
Thank you,thiếu hàm class hèn gì gọi mãi mà nó k ẩn
 
  • Like
Reactions: THB

daklak1985

MasterCorporal
Tham gia
01/09/2016
Bài viết
216
Được Like
68
à cho hỏi thêm là cái class đó mình ghi ra là class="bottom_img" thay cho class="bot_img" đc không nhĩ?
 

holyheo

Private
Tham gia
29/05/2016
Bài viết
39
Được Like
20
Em thêm vào template mà nó không hiển thị. Em có up ảnh lên link rồi thay vào cũng không được shake~~
 

Top Bottom