Chào đón độc giả đến với blog “Hướng dẫn Chèn Hình Ảnh Quảng Cáo 2 bên website ẩn trên Mobile” Trong thế giới ngày nay, việc tối ưu hóa trải nghiệm người dùng trên các thiết bị di động trở nên ngày càng quan trọng. Trong hướng dẫn này, chúng ta sẽ khám phá cách chèn hình ảnh quảng cáo một cách tinh tế và hiệu quả, đặc biệt là khi chúng ẩn đi trên mobile để tối ưu hóa không gian và giữ cho trang web của bạn trông chuyên nghiệp.
Chắc chắn rằng, việc sử dụng đoạn mã CSS và JavaScript được cung cấp sẽ giúp bạn có được sự linh hoạt cần thiết để quảng cáo của bạn xuất hiện đúng lúc và đúng chỗ trên các thiết bị di động. Bạn không chỉ có cơ hội để tối ưu hóa thu nhập từ quảng cáo mà còn đảm bảo rằng người dùng trên mobile trải nghiệm trang web của bạn một cách mượt mà nhất.
Hãy bắt đầu hành trình học tập cùng chúng tôi, bằng cách hiểu rõ và ứng dụng đoạn mã code chính xác, giúp trang web của bạn nổi bật và thu hút người dùng mọi nơi.
I. Giới thiệu
A. Mục đích hướng dẫn
Mục đích chính của bài viết này là hướng dẫn chi tiết cách chèn hình ảnh quảng cáo ẩn trên thiết bị di động, tập trung vào việc sử dụng đoạn mã CSS và JavaScript. Chúng tôi mong muốn giúp độc giả hiểu rõ về cách triển khai một chiến lược quảng cáo linh hoạt, tối ưu hóa không gian trên trang web mà không làm giảm trải nghiệm người dùng.
B. Ưu điểm của việc chèn hình ảnh quảng cáo ẩn trên mobile
- Tối ưu hóa không gian: Việc ẩn hình ảnh quảng cáo trên mobile giúp tiết kiệm không gian trang web, làm cho trang web trở nên gọn gàng hơn và tăng khả năng tương tác của người dùng.
- Tăng hiệu suất trang web: Bằng cách kiểm soát việc hiển thị quảng cáo trên các thiết bị di động, trang web có thể tải nhanh hơn và cung cấp trải nghiệm người dùng mượt mà hơn.
- Tăng cơ hội chuyển đổi: Quảng cáo hiển thị đúng cách trên mobile tăng cơ hội chuyển đổi, vì người dùng dễ dàng tiếp cận thông điệp quảng cáo mà không bị làm phiền.
C. Đối tượng đọc hướng dẫn
Hướng dẫn này dành cho những người quản trị trang web, nhà phát triển web, và những ai đang tìm kiếm cách hiệu quả để tích hợp quảng cáo trên trang web của mình. Độc giả cũng có thể là những người muốn tối ưu hóa thu nhập từ quảng cáo mà không làm ảnh hưởng đến trải nghiệm người dùng trên thiết bị di động. Bất kỳ ai quan tâm đến việc làm cho trang web của mình trở nên linh hoạt và hiệu quả hơn trên nền tảng di động đều có thể hưởng lợi từ hướng dẫn này.
II. Hiểu rõ về đoạn code
A. Phần <style>
1. Media query điều chỉnh hiển thị trên thiết bị di động:
Đoạn mã sử dụng media query để xác định kích thước của trình duyệt và ẩn các phần quảng cáo khi độ rộng của trình duyệt nhỏ hơn 600px, đảm bảo rằng chúng sẽ không hiển thị trên các thiết bị di động.
@media (max-width: 600px) {
#left_ads_float,
#right_ads_float {
display: none;
}
}
2. CSS cho #left_ads_float và #right_ads_float:
Đoạn mã này định nghĩa kiểu dáng cho các phần tử chứa quảng cáo bên trái và bên phải của trang web khi hiển thị trên máy tính hoặc tablet.
#left_ads_float {
top: 170px;
left: 30px;
position: fixed;
}
#right_ads_float {
top: 170px;
right: 30px;
position: fixed;
}
B. Phần <div> chứa hình ảnh quảng cáo
1. Đường dẫn hình ảnh:
Trong phần này, bạn cần thay đổi đường dẫn của hình ảnh quảng cáo theo ý muốn của bạn. Hiện tại, đoạn mã đang sử dụng đường dẫn mẫu:
<img border="0" src="https://w.ladicdn.com/5e38f7515ad82f5e86c989ef/ads1-20231223092340-fxo41.jpg" width="250px">
2. Kích thước hiển thị:
Đoạn mã cũng xác định kích thước hiển thị của hình ảnh quảng cáo là 250px.
C. Phần <script>
1. Biến và hàm kiểm tra hiển thị quảng cáo:
Đoạn mã JavaScript khai báo một biến cvblog_remove_fads và một hàm cvblog_check_adswidth() để kiểm tra và quyết định xem quảng cáo có nên hiển thị hay không. Biến cvblog_remove_fads được sử dụng để kiểm soát việc ẩn quảng cáo.
var cvblog_remove_fads = false;
function cvblog_check_adswidth() {
if (cvblog_remove_fads) {
// Nếu biến cvblog_remove_fads đã được đặt là true, ẩn quảng cáo
document.getElementById('left_ads_float').style.display = 'none';
document.getElementById('right_ads_float').style.display = 'none';
return;
} else if (document.cookie.indexOf('cvblog_remove_float_ads') != -1) {
// Nếu cookie tồn tại, đặt biến cvblog_remove_fads là true và gọi lại hàm
cvblog_remove_fads = true;
cvblog_check_adswidth();
return;
}
2. Kiểm tra chiều rộng trình duyệt và ẩn quảng cáo theo điều kiện:
Hàm cvblog_check_adswidth() kiểm tra chiều rộng của trình duyệt và ẩn quảng cáo nếu điều kiện thỏa mãn. Nó cũng kiểm tra cookie để xem người dùng có yêu cầu ẩn quảng cáo không.
if (lwidth < 600) {
document.getElementById('left_ads_float').style.display = 'none';
document.getElementById('right_ads_float').style.display = 'none';
} else {
document.getElementById('left_ads_float').style.display = 'block';
document.getElementById('right_ads_float').style.display = 'block';
}
Đồng thời, hàm sẽ tự động gọi lại sau mỗi 10ms để liên tục kiểm tra và cập nhật trạng thái hiển thị của quảng cáo, đảm bảo rằng chúng sẽ hiển thị đúng theo điều kiện mới nếu trình duyệt thay đổi kích thước.
setTimeout('cvblog_check_adswidth()', 10);
Hữu ích khi người dùng xoay màn hình hoặc thay đổi kích thước cửa sổ trình duyệt trên thiết bị di động, giữ cho quảng cáo luôn hiển thị đúng cách.
III. Hướng dẫn sử dụng
A. Bước 1: Sao chép đoạn code vào trang web
Đầu tiên, để tích hợp chức năng quảng cáo ẩn trên thiết bị di động, bạn cần sao chép toàn bộ đoạn mã CSS và JavaScript vào trang web của mình. Đoạn mã này sẽ giúp kiểm soát hiển thị của quảng cáo theo điều kiện chiều rộng của trình duyệt.
<style>
@media (max-width: 600px) {
#left_ads_float,
#right_ads_float {
display: none;
}
}
#left_ads_float {
top: 170px;
left: 30px;
position: fixed;
}
#right_ads_float {
top: 170px;
right: 30px;
position: fixed;
}
</style>
<div id="left_ads_float"> <a href="#" target="_blank"><img border="0" src="ĐƯỜNG_DẪN_HÌNH_ẢNH_QUẢNG_CÁO_1" width="250px"></a> </div>
<div id="right_ads_float"> <a href="#" target="_blank"><img border="0" src="ĐƯỜNG_DẪN_HÌNH_ẢNH_QUẢNG_CÁO_2" width="250px"></a> </div>
<script>
var cvblog_remove_fads = false;
function cvblog_check_adswidth() {
// Logic kiểm tra và ẩn quảng cáo
}
</script>
B. Bước 2: Thay đổi đường dẫn và kích thước hình ảnh quảng cáo
Trong mã HTML, bạn cần thay đổi đường dẫn của hình ảnh quảng cáo. Tìm các đoạn mã sau và thay thế “ĐƯỜNG_DẪN_HÌNH_ẢNH_QUẢNG_CÁO_1” và “ĐƯỜNG_DẪN_HÌNH_ẢNH_QUẢNG_CÁO_2” bằng đường dẫn thực của hình ảnh quảng cáo mà bạn muốn sử dụng.
<img border="0" src="ĐƯỜNG_DẪN_HÌNH_ẢNH_QUẢNG_CÁO_1" width="250px">
<img border="0" src="ĐƯỜNG_DẪN_HÌNH_ẢNH_QUẢNG_CÁO_2" width="250px">
C. Bước 3: Tùy chỉnh vị trí hiển thị trên mobile (nếu cần)
Nếu bạn muốn điều chỉnh vị trí hiển thị của quảng cáo trên thiết bị di động, bạn có thể sửa đổi giá trị của thuộc tính top, left, right, và position trong đoạn mã CSS.
#left_ads_float {
top: 170px;
left: 30px;
position: fixed;
}
#right_ads_float {
top: 170px;
right: 30px;
position: fixed;
}
Chắc chắn rằng bạn thực hiện kiểm thử trên nhiều loại thiết bị di động để đảm bảo quảng cáo hiển thị một cách hài hòa và không làm ảnh hưởng đến trải nghiệm người dùng.
Nếu bạn không chèn được, có thể inbox mình qua Facebook cá nhân hoặc Fanpage mình chèn cho, phí là 30k nha :D
IV. Tất cả các đoạn code cho bạn
Phần này giúp bạn chỉ cần copy code, sửa lại link ảnh, kích thước, sau đó dán vào là sử dụng được. Ngoài ra cũng có các đoạn ghi chú để bạn hiểu rõ hơn cách sử dụng.
A. Đoạn code chi tiết chèn Hình Ảnh Quảng Cáo 2 bên website ẩn trên Mobile
Nội dung này đã bị khóa
Nội dung này chỉ dành cho thành viên VIP đã đăng ký gói Tháng hoặc gói Năm!
B. Đoạn code chi tiết chèn Hình Ảnh Quảng Cáo 2 bên cách 1 đoạn so với phần đầu website (Vẫn ẩn trên Mobile)
Với đoạn code này sẽ giúp bạn không để 2 hình ảnh quảng cáo của mình che mất slide ở đầu website, vì thông thường đầu website sẽ có slide ảnh full chiều rộng.
Nội dung này đã bị khóa
Nội dung này chỉ dành cho thành viên VIP đã đăng ký gói Tháng hoặc gói Năm!
C. Đoạn code chi tiết chèn Hình Ảnh Quảng Cáo 2 bên website chỉ hiển thị sau bao nhiêu thời gian người dùng ở trên trang (ẩn trên Mobile)
Nội dung này đã bị khóa
Nội dung này chỉ dành cho thành viên VIP đã đăng ký gói Tháng hoặc gói Năm!
Trong đoạn mã trên, setTimeout được sử dụng để chờ một khoảng thời gian trước khi kiểm tra và hiển thị quảng cáo. Thời gian chờ là 10 giây (10,000 miliseconds), nhưng bạn có thể điều chỉnh giá trị của biến delayTime tùy thuộc vào yêu cầu của bạn.
D. Đoạn code chi tiết chèn Hình Ảnh Quảng Cáo 2 bên website sẽ tự động ẩn sau bao nhiêu thời gian người dùng ở trên trang (ẩn trên Mobile)
Nội dung này đã bị khóa
Nội dung này chỉ dành cho thành viên VIP đã đăng ký gói Tháng hoặc gói Năm!
Trong đoạn mã trên, setTimeout được sử dụng để chờ một khoảng thời gian trước khi kiểm tra và ẩn quảng cáo. Thời gian chờ là 30 giây (30,000 miliseconds), nhưng bạn có thể điều chỉnh giá trị của biến delayTime tùy thuộc vào yêu cầu của bạn. Sau khi quảng cáo đã bị ẩn, nó sẽ không hiển thị lại khi người dùng truy cập trang web sau.
V. Cảnh báo và lưu ý
A. Kiểm tra tích hợp đúng đoạn code
Trước khi triển khai đoạn mã vào trang web của bạn, hãy đảm bảo rằng bạn đã sao chép đúng toàn bộ đoạn mã CSS và JavaScript. Một sai sót nhỏ có thể dẫn đến việc không chính xác trong hiển thị quảng cáo trên các thiết bị di động. Hãy kiểm tra kỹ lưỡng để tránh tình trạng lỗi và đảm bảo tích hợp đúng cú pháp.
B. Hạn chế ảnh hưởng đến trải nghiệm người dùng
Quan trọng nhất, hãy đảm bảo rằng việc ẩn quảng cáo trên mobile không làm giảm trải nghiệm người dùng. Nếu quảng cáo quá nổi bật hoặc làm phiền, có thể dẫn đến tình trạng người dùng rời khỏi trang web của bạn. Luôn duy trì sự cân nhắc và thử nghiệm để đảm bảo rằng quảng cáo không gây phiền hại và vẫn giữ được sự chuyên nghiệp của trang web.
C. Kiểm tra hiển thị trên nhiều thiết bị di động khác nhau
Đa dạng hóa thiết bị di động là một yếu tố quan trọng khi sử dụng đoạn mã này. Trước khi triển khai chính thức, hãy kiểm tra hiển thị của quảng cáo trên nhiều thiết bị và kích thước màn hình khác nhau. Điều này giúp đảm bảo rằng đoạn mã hoạt động linh hoạt và quảng cáo hiển thị chính xác trên mọi loại điện thoại di động và máy tính bảng.
Nhớ luôn thực hiện kiểm thử trước khi triển khai nó live để đảm bảo rằng không có vấn đề nào ảnh hưởng đến trang web của bạn và trải nghiệm người dùng của họ.
VI. Kết luận
A. Tóm tắt hướng dẫn chèn hình ảnh quảng cáo ẩn trên mobile
Trong bài viết này, chúng ta đã đi sâu vào việc hướng dẫn cách chèn hình ảnh quảng cáo một cách ẩn trên thiết bị di động, tập trung vào việc sử dụng đoạn mã CSS và JavaScript. Tích hợp đoạn mã này vào trang web giúp quảng cáo hiển thị linh hoạt và hiệu quả hơn, đồng thời giúp duy trì sự gọn gàng của trang web trên nền tảng di động. Bằng cách sử dụng các media query và các kỹ thuật kiểm soát, chúng ta có thể tối ưu hóa không gian và tăng khả năng tương tác với người dùng trên thiết bị di động.
B. Khuyến khích sự sáng tạo và tùy chỉnh theo nhu cầu cụ thể
Mặc dù hướng dẫn cung cấp một phương pháp cơ bản, nhưng chúng tôi cũng khuyến khích bạn sáng tạo và tùy chỉnh theo nhu cầu cụ thể của trang web và mục tiêu quảng cáo của bạn. Có thể điều chỉnh vị trí, kích thước, hoặc thậm chí thay đổi cách hiển thị để đáp ứng đúng nhu cầu của doanh nghiệp hoặc nội dung trang web của bạn.
Một số bài viết có thể bạn sẽ thích:
- Cài đặt WP Mail SMTP cho website WordPress trên mọi loại Hosting
- Cách Chặn Đăng ký website WordPress từ Các domain Email Cụ thể
- Tại sao bạn nên sử dụng WordPress để thiết kế website?
- Top 4 Plugin SEO tốt nhất cho website WordPress của bạn
- 42 thủ thuật cực kỳ hữu ích cho file Functions WordPress
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của CongVietBlog để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy CongVietBlog trên Facebook.
