Chắc đã có lần các bạn vào một website nào đó thấy có 2 banner quảng cáo chạy 2 bên website rồi đúng không? Hôm nay Bchiase.com sẽ hướng dẫn các bạn tạo banner quảng cáo chạy dọc 2 bên website chỉ bằng HTML và CSS một cách đơn giản và cũng rất chuyên nghiệp.
Tất nhiên, các bạn sẽ tìm thấy rất nhiều code trên mạng nhưng code này mình đã tối ưu tối đa trên mọi màn hình thiết bị khác nhau nên nó sẽ phù hợp với các độ phân giải màn hình. Tiện đây chia sẻ luôn đến các bạn hay làm web nhé, code này khá tiện lợi vì khi gặp màn hình vuông (độ phân giải 768×1024) thì banner sẽ không bị chèn vào trong gây khó chịu vướng víu mà nó sẽ tự mất đi, chỉ những ai sử dụng màn hình dài mới thấy được quảng cáo.
Để sử dụng code này các bạn copy về đặt ở cuối website thông thường là file footer. Nhưng lưu ý là nhớ đặt trước thẻ đóng </body> nhé. (Các bạn cũng có thể page code này vào thẻ <head> nhưng mình khuyên các bạn để cuối trang để tối ưu cho việc seo website)
Dưới đây là code quảng cáo chạy 2 bên website.
<style>#divAdRight{display:none; width:0px;}#divAdLeft{display:none; width:0px;}@media (min-width:1024px) {#divAdRight{display: block; position: fixed; top: 5px; width: 120px; right: 0px; padding: 20px;}#divAdLeft{ display: block; position: fixed; top: 5px; width: 120px; padding: 20px;}}</style>
<!--ADS RIGHT LEFT -->
<div id='divAdRight'>
YOUR CODE ADS
</div>
<div id='divAdLeft' >
YOUR CODE ADS
</div>
Bạn chèn code Adsense hoặc code ảnh vào phần YOUR CODE ADS
Với đoạn style các bạn để ý mục @media (max-width:1024px) với màn hình lớn hơn 1024px thì code ads sẽ hiện ra còn trên các màn hình nhỏ hơn tương ứng với các màn hình trên mobile code ads này sẽ ẩn đi
Các bạn nhớ thay đổi các thông số phù hợp trước khi chạy. Chúc các bạn thành công !