OBin's Blog

Hiện nay website hỗ trợ responsive đã trở nên phổ biến vì vậy việc đặt banner trên những website này cũng gặp khó khăn, đặc biệt với những website có nhiều vị trí banner quảng cáo.
Sau đây là hướng dẫn nhanh những cách làm banner responsive đơn giản để khắc phục vấn đề hiển thị banner quảng cáo trên nhiều giao diện khác nhau.

1Co giảng banner theo tỉ lệ trình duyệt:

Bạn tạo một vị trí banner có kích thước là 600x200px như sau:

<div class="banner">
    <a href="http://www.obinb.com" title="banner">
     <img src="http://www.obinb.com/src/image-banner.gif" alt="banner" />
    </a>
</div>

Đặt code css cho banner: Đây chỉ là ví dụ, tùy vào vị trí mà bạn sẽ code css khác nhau

/* kích thước trình duyệt thông thường */
.banner, .banner img {
 width:600px;
 height:200px; 
}
/* kích thước trình duyệt từ 1024px trở xuống */
@media ( max-width:1024px ){
 .banner, .banner img {
 width:800px;
 height:267px; 
 }
}
/* kích thước trình duyệt từ 460px trở xuống */
@media ( max-width:460px ){
 .banner, .banner img {
 width:100%;
 height:auto; 
 }
}

Cách làm này sẽ giúp banner co giản theo từng kích thước trình duyệt khác nhau, ưu điểm là chỉ cần 1 banner có thể đáp ứng được nhiều màn hình khác nhau, nhược điểm là chỉ sử dụng banner dạng image ( jpg, gif... ), thiết kế banner phải có kích thước lớn nhất có thể để đáp ứng cho màn hình khi vị trí này được phóng lớn ( Để không bị vỡ, xấu khi phóng lớn banner )

2Thay đổi nhiều banner khác nhau để đáp ứng từng kích thước trình duyệt

Bạn tạo một vị trí banner có kích thước là 600x200px như sau:

<div class="banner">
       <a href="http://www.obinb.com" title="banner">
           <img class="banner-size1" src="http://www.obinb.com/src/image-banner1.gif" alt="banner" />
           <img class="banner-size2" src="http://www.obinb.com/src/image-banner2.gif" alt="banner" />
           <img class="banner-size3" src="http://www.obinb.com/src/image-banner2.gif" alt="banner" />
       </a>
</div>

Code css cho banner:

/* kích thước trình duyệt thông thường */
 .banner, .banner img {
  width:600px;
  height:200px; 
 }
 .banner-size1 { 
  display:block;
 }
 .banner-size2, .banner-size3 { 
  display:none;
 }
/* kích thước trình duyệt từ 1024px trở xuống */
@media ( max-width:1024px ){
 .banner, .banner img {
 width:800px;
 height:267px; 
 }
 .banner-size2 { 
 display:block;
 }
 .banner-size1, .banner-size3 { 
  display:none;
 }
}
/* kích thước trình duyệt từ 460px trở xuống */
@media ( max-width:460px ){
 .banner, .banner img {
 width:320px;
 height:300px; 
 }
 .banner-size3 { 
 display:block;
 }
 .banner-size1, .banner-size2 { 
  display:none;
 }
}

Cách làm trên là sử dụng nhiều banner có kích thước khác nhau, tắt và hiển thị chúng theo từng kích thước màn hình. Ưu điểm là có thể dùng nhiều loại banner như images, flash,html... nhượt điểm là tốn công làm nhiều banner khác nhau :D

Trên đây chỉ là 2 cách đơn giản để làm banner responsive, còn rất nhiều cách khác nhau để làm.

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


Xem thêm:
- Code popup quảng cáo nằm dưới trình duyệt (popup under)
- Code chèn banner xuất hiện tự động random đơn giản bằng Javascript
- Code popup quảng cáo xuất hiện khi click chuột lần đầu tiên
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Hướng dẫn tạo quảng cáo sau bài viết đầu tiên cho diễn đàn Xenforo