Cách Tạo Popup Quảng Cáo Ảnh/Video Hiển Thị Góc Phải Website Nhanh Chóng

Trong thời đại website ngày càng phát triển, việc chèn Popup quảng cáo vào Website là một trong những cách hiệu quả để thu hút sự chú ý của người dùng.

Popup không chỉ giúp tăng tương tác mà còn là công cụ tuyệt vời để bạn giới thiệu sản phẩm, dịch vụ hoặc thông tin quan trọng ngay trên website của mình.

Hôm nay, Thịnh sẽ hướng dẫn bạn chi tiết cách tạo popup quảng cáo ảnh/video hiển thị ở góc phải website WordPress cực kỳ đơn giản và nhanh chóng.

Cùng mình bắt đầu nhé!

Lợi ích của việc chèn popup tự động vào WordPress?

Popup tự động xuất hiện giúp bạn giữ chân người dùng lâu hơn trên website, đồng thời cung cấp nội dung hoặc khuyến mãi nhanh ngay lập tức.

Một popup được thiết kế hợp lý có thể:

• Tăng tỉ lệ chuyển đổi: Đưa thông điệp quảng cáo tới người dùng một cách trực tiếp.
• Gây sự chú ý: Đảm bảo nội dung quan trọng không bị bỏ lỡ.
• Thu thập dữ liệu khách hàng: Tạo popup thu thập email hoặc phản hồi từ khách hàng.

Hướng dẫn chèn popup quảng cáo vào WordPress?

Để chèn popup quảng cáo vào WordPress nhanh chóng, bạn sẽ sử dụng đoạn code, Thịnh chia sẻ ở ngay dưới đây.

Đầu tiên là đoạn code bạn sẽ cần thêm vào: Đầu trang giao diện (header.php)

Cách thêm như sau: Bạn chọn Giao diện —> Sửa giao diện —-> Chọn giao diện gốc cần chỉnh sửa —-> Chọn mục có tên là Header.php

<!-- Script Popup-->
<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
 }
 }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>

Để thêm chính xác bạn hãy xem ảnh hướng dẫn ở ngay dưới đây

Kế tiếp, bạn cần vào thư mục media, bạn tải hình ảnh quảng cáo bạn muốn làm Popup quảng cáo lên website, sau đó bạn ấn sao chép liên kết đến hình ảnh đó và lưu trữ link đó lại.

Bước tiếp theo, bạn chọn Giao diện —-> Tiện ích ( Widgets) —-> Bạn tìm đến Chân trang —> Kéo 1 ô HTML vào chân trang

Tại ô HTML Tùy Chỉnh này bạn sẽ cần thêm đoạn code ở dưới đây

<!-- Code hien thi -->
<div id="mobile-hide" class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao: phần này sẽ hiển thị nội dung của quảng cáo có thể chèn ảnh hoặc video hay flash tùy bạn -->
<a href="link ảnh trỏ đến" target="_blank"><img src="dán link ảnh ở bước trên vào đây" alt="bannerquangcao"/></a>
<!-- End quang cao -->
</div>
</div>

Bạn thêm như hình ở ngay dưới đây

Về đoạn code bạn sẽ cần sửa 2 chỗ này: <a href=”link ảnh trỏ đến” target=”_blank”><img src=”dán link ảnh ở bước trên vào đây” alt=”bannerquangcao”/></a>

• Link ảnh trỏ đến: tức là khi họ ấn vào banner thì bạn muốn nó dẫn họ đi đâu?
• Dán link ảnh ở bước trên vào đây: chỗ này bạn sẽ thêm đường dẫn URl ảnh banner QC vừa thêm ở bước trên vào đây.

Cuối cùng, bạn bấm lưu lại và loading ra bên ngoài xem thử thành quả nhận được nhé.

Trường hợp bạn muốn thêm Video Popup quảng cáo thì sao?

Bạn cũng làm tương tự như trên, chỉ khác là code bạn cần thêm vào ở phần chân trang sẽ như sau

<!-- Code hien thi -->
<div id="mobile-hide" class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao: phần này sẽ hiển thị nội dung của quảng cáo có thể chèn ảnh hoặc video hay flash tùy bạn -->
Mã nhúng Video
<!-- End quang cao -->
</div>
</div>

Bạn cần thêm mã nhúng Video từ Youtube, sau đó thay từ ” mã nhúng video” trong đoạn code trên bằng mã nhúng thực tế.

Để có mã nhúng Video bạn làm như sau, bạn vào Youtube, chọn 1 video bạn muốn làm video quảng cáo, ấn vào chia sẻ video, chọn nhúng, copy đoạn mã nhúng đó thêm vào là xong.

Tuy nhiên, mã nhúng mặc định của Youtube khá ngu, nó sẽ không tự phát video quảng cáo.

Vì vậy, bạn có thể nhờ a bạn Chat GPT hỗ trợ khắc phục sửa đoạn mã nhúng này theo câu lệnh sau.

Câu lệnh Yêu cầu Chat GPT

Làm cho video YouTube tự chạy với âm thanh, ẩn logo, các nút điều khiển, và không hiển thị thông tin như tiêu đề và nút chia sẻ. Đây là mã iframe của video: <iframe …>.”

Nhưng lưu ý khi bạn tạo popup quảng cáo cho website?

Không gây phiền phức: Hãy đảm bảo popup của bạn không che mất nội dung chính của website hoặc xuất hiện quá thường xuyên khiến người dùng khó chịu.

Nội dung hấp dẫn: Popup chỉ nên xuất hiện với nội dung thực sự quan trọng và thu hút người dùng, chẳng hạn như khuyến mãi, thông báo sự kiện, hoặc video giới thiệu sản phẩm.

Thân thiện trên di động: Hãy chắc chắn rằng popup của bạn hoạt động tốt trên mọi thiết bị, từ máy tính đến điện thoại di động.

Hướng Dẫn Chi Tiết Cách Làm Bằng Video – Đơn Giản, Hiệu Quả

Kết luận

Việc chèn popup tự động vào WordPress là cách tuyệt vời để bạn tận dụng không gian website cho các mục đích quảng bá và tương tác với khách hàng.

Hy vọng qua bài viết này, bạn đã biết cách tạo popup quảng cáo ảnh/video hiển thị ở góc phải website nhanh chóng và dễ dàng.

Nếu có bất kỳ thắc mắc nào, đừng ngần ngại để lại bình luận bên dưới, Thịnh sẽ hỗ trợ bạn sớm nhất có thể.