Hướng Dẫn Tạo Banner Quảng Cáo Chạy Dọc 2 Bên Website Bằng HTML (Tối Ưu & Nhẹ Nhàng)

Bạn đang tìm cách làm banner quảng cáo chạy dọc 2 bên website bằng HTML để không làm chậm trang, thay vì dùng các plugin nặng nề? Đây chính là giải pháp tối ưu dành cho bạn.

Trong bài viết này, Thiết kế Website WordPress sẽ chia sẻ đoạn code sạch, nhẹ và hướng dẫn bạn tích hợp banner quảng cáo cố định hai bên một cách chi tiết, áp dụng được cho cả WordPress, Blogspot và website HTML thuần.

Hướng dẫn làm banner quảng cáo chạy dọc 2 bên website bằng HTML

Tại Sao Nên Dùng Code HTML Thay Vì Plugin Quảng Cáo?

Nhiều người thường tìm đến plugin như Float Left Right Advertising trên WordPress, nhưng chúng thường đi kèm với Javascript có thể làm giảm tốc độ tải trang. Sử dụng code HTML và CSS mang lại nhiều lợi ích vượt trội:

  • Tốc Độ Vượt Trội: Code HTML/CSS cực kỳ nhẹ, giúp website của bạn load nhanh hơn, cải thiện trải nghiệm người dùng và điểm số SEO.
  • Tùy Biến Linh Hoạt: Bạn có toàn quyền kiểm soát vị trí, kích thước và cách hiển thị của banner.
  • Không Xung Đột: Giảm thiểu nguy cơ xung đột với các plugin hoặc theme khác.
  • Thân Thiện Với SEO: Website nhanh hơn luôn được Google ưu ái.

Code Banner Quảng Cáo Cố Định 2 Bên Website (HTML & CSS)

Đây là toàn bộ đoạn code bạn cần. Phần CSS giúp định dạng và cố định vị trí, còn HTML để chứa hình ảnh và liên kết quảng cáo.

Mẹo: Hãy dán đoạn CSS vào file style.css của theme, và dán đoạn HTML vào trước thẻ đóng </body> trong file footer.php (với WordPress) hoặc trong widget HTML.

<!-- PHẦN CSS ĐỊNH DẠNG BANNER -->
<style>
.qc-doc-trai, .qc-doc-phai {
    position: fixed; /* Luôn cố định khi cuộn trang */
    z-index: 9999; /* Hiển thị trên cùng */
    top: 150px; /* Khoảng cách từ trên xuống */
    width: 130px; /* Chiều rộng của banner */
}
.qc-doc-trai {
    left: 20px; /* Khoảng cách từ lề trái */
}
.qc-doc-phai {
    right: 20px; /* Khoảng cách từ lề phải */
}
/* Tự động ẩn banner trên màn hình nhỏ hơn 1024px */
@media (max-width: 1024px) {
    .qc-doc-trai, .qc-doc-phai {
        display: none;
    }
}
</style>

<!-- PHẦN HTML HIỂN THỊ BANNER -->
<div class="qc-doc-trai">
    <a href="#URL-LIEN-KET-QUANG-CAO-BEN-TRAI" target="_blank" rel="nofollow">
        <img src="#URL-HINH-ANH-BANNER-BEN-TRAI" alt="Banner quảng cáo bên trái" width="130" />
    </a>
</div>

<div class="qc-doc-phai">
    <a href="#URL-LIEN-KET-QUANG-CAO-BEN-PHAI" target="_blank" rel="nofollow">
        <img src="#URL-HINH-ANH-BANNER-BEN-PHAI" alt="Banner quảng cáo bên phải" width="130" />
    </a>
</div>

Hướng Dẫn Tích Hợp Banner Vào Website Từng Bước

Thực hiện theo các bước dưới đây để đảm bảo banner hiển thị chính xác và đẹp mắt trên website của bạn.

Làm banner quảng cáo chạy dọc 2 bên website bằng HTML

Bước 1: Chuẩn Bị Hình Ảnh và Liên Kết

  • Hình ảnh: Chuẩn bị 2 file ảnh banner (định dạng .jpg, .png, hoặc .gif) với kích thước phù hợp (ví dụ: chiều rộng 130px).
  • Liên kết: Lấy URL đích mà bạn muốn người dùng truy cập khi họ nhấp vào banner.

Bước 2: Tùy Chỉnh Đoạn Code

Mở đoạn code trên bằng một trình soạn thảo văn bản và thay thế các giá trị sau:

  • #URL-LIEN-KET-QUANG-CAO-BEN-TRAI: Dán link đích cho banner bên trái.
  • #URL-HINH-ANH-BANNER-BEN-TRAI: Dán link ảnh banner bên trái (đã tải lên media của website).
  • #URL-LIEN-KET-QUANG-CAO-BEN-PHAI: Dán link đích cho banner bên phải.
  • #URL-HINH-ANH-BANNER-BEN-PHAI: Dán link ảnh banner bên phải.
  • Tùy chỉnh vị trí (nếu cần):
    • top: 150px;: Thay đổi khoảng cách từ đầu trang xuống.
    • left: 20px; / right: 20px;: Thay đổi khoảng cách từ hai lề vào trong.

Bước 3: Chèn Code Vào Website

  • Đối với Website WordPress:

    1. Vào Giao diện (Appearance) -> Tùy biến (Customize) -> CSS bổ sung (Additional CSS).
    2. Dán phần <style>...</style> vào đây.
    3. Để chèn phần HTML, bạn có thể dùng plugin cho phép chèn code vào header/footer (như “Insert Headers and Footers”) và dán phần HTML vào mục Footer. Hoặc chèn trực tiếp vào file footer.php của theme con (child theme).

  • Đối với Blogspot hoặc Website HTML thuần:

    1. Dán toàn bộ đoạn code (cả CSS và HTML) vào ngay trước thẻ đóng </body> trong template/file HTML của bạn.

Câu Hỏi Thường Gặp (FAQ)

1. Làm sao để banner không che mất nội dung website?

Giá trị z-index: 9999; trong CSS đảm bảo banner luôn nổi lên trên. Nếu vẫn bị che, hãy thử tăng giá trị này lên cao hơn (ví dụ: 99999).

2. Banner quảng cáo chạy dọc có ảnh hưởng đến SEO không?

Sử dụng code HTML/CSS nhẹ nhàng sẽ có tác động tích cực đến SEO vì nó không làm chậm website như plugin. Tuy nhiên, hãy đảm bảo banner không gây khó chịu cho người dùng, đặc biệt trên di động.

3. Làm thế nào để ẩn banner trên điện thoại?

Đoạn code CSS ở trên đã tích hợp sẵn giải pháp. Dòng @media (max-width: 1024px) sẽ tự động ẩn cả hai banner trên các thiết bị có chiều rộng màn hình từ 1024px trở xuống, đảm bảo trải nghiệm người dùng mobile tốt nhất.

4. Tôi có thể dùng AI để viết code này không?

Hoàn toàn có thể. Bạn có thể yêu cầu các AI như Gemini hoặc ChatGPT: “Viết code CSS để tạo 2 banner cố định ở hai bên màn hình, và tự động ẩn khi màn hình nhỏ hơn 1024px”. Tuy nhiên, hãy luôn kiểm tra và thử nghiệm kỹ đoạn code do AI tạo ra trước khi áp dụng lên website chính thức.

Chỉ với vài bước đơn giản, bạn đã có thể tự tạo banner quảng cáo chạy dọc hai bên website một cách chuyên nghiệp mà không cần cài đặt thêm plugin. Điều này không chỉ giúp trang trí cho website mà còn góp phần quan trọng vào việc tối ưu tốc độ và hiệu suất.

Nếu bạn cần tìm hiểu thêm, hãy tham khảo các bài viết khác trong chuyên mục Thủ thuật WordPress của chúng tôi.

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

4.7/5 - (102 bình chọn)
4.7/5 - (102 bình chọn)