Tạo quảng cáo phía dưới màn hình cố định bằng CSS

Thật ra nếu các bạn sử dụng WordPress thì có rất nhiều Plugin hỗ trợ việc chèn quảng cáo ở rất nhiều vị trí tùy theo nhu cầu của bạn, nhưng có một số cách đơn giản mà không cần phải cài Plugin hỗ trợ. Hôm nay chúng tôi sẽ giới thiệu đến các bạn 1 cách đó là sử dụng CSS để tạo quảng cáo cố định phía dưới chân màn hình hiển thị, các bạn cùng ngâm cứu nhé!

Các bạn xem Demo giới thiệu:

Mã CSS

.fixedbottomad {
    cursor: pointer;
    text-align: center;
    position: fixed;
    bottom: 2px;
    width: 1164px;
    height: 90px;
    z-index: 9999;   
}

Ở đây có một số mã mà ý nghĩa của nó như sau:

• cursor: pointer;: Hiển thị chuột bằng bàn tay khi di chuột vào.
• text-align: center;: Văn bản được canh giữa.
• position: fixed;: Hiển thị ở vị trí cố định khi chúng ta lướt trang.
• bottom: 2px;: Cách phía dưới 2px.
• width: 1164px;: Chiều rộng, các bạn tùy chỉnh phù hợp với nhu cầu.
• height: 90px;: Chiều cao, các bạn tùy chỉnh phù hợp với nhu cầu.
• z-index: 9999;: Hiển trị trên các phần tử khác.

Nếu các bạn không muốn nó hiển thị ở các loại màn hình có độ phân giải dưới 767px thì các bạn có thể thêm mã:

@media (max-width: 767px) {
  .fixedbottomad {
    display: none;
  }
}

Thông số max-width: 767px các bạn có thể điều chỉnh theo nhu cầu, ví dụ max-width: 480px…

Mã HTML

<div class="fixedbottomad" onclick="window.open('url đích');" style="cursor:pointer;"><img src="url file ảnh" alt="" width="" height="" class="aligncenter size-full wp-image-25554" /></div>

Ví dụ:

<div class="fixedbottomad" onclick="window.open('https://accounts.binance.com/en/register?ref=OE5FV15Y','new_window');" style="cursor:pointer;"><img src="https://tradevn.net/wp-content/uploads/2022/04/binance-bottom.gif" alt="Tận hưởng giảm 20% phí giao dịch!" width="1160" height="90" class="aligncenter size-full wp-image-25554" /></div> 

Tương tự các bạn có thể tạo quảng cáo hiển thị phía trên cố định, chỉ cần thay đổi bottom: 2px; thành top: 2px; Chúc các bạn thành công!

---

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

---