31 C
Hanoi
Chủ Nhật, Tháng Sáu 16, 2024
spot_img

Hướng dẫn Chèn Hình Ảnh Quảng Cáo 2 bên website ẩn trên Mobile

Truy cập:

Chia sẻ:

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ướng dẫn Chèn Hình Ảnh Quảng Cáo 2 bên website ẩn trên Mobile-congvietitcom-congvietblog
Hướng dẫn Chèn Hình Ảnh Quảng Cáo 2 bên website ẩn trên Mobile 4

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.


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.

  1. 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.
  2. 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.
  3. 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.

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.


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;
}

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.

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.


Đầ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>

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">

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.


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.

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!

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!

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.

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.


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.

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.

Đ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ọ.


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.

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:

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.

5 1 đánh giá
Đánh giá
Công Việt Blog
Công Việt Bloghttps://congvietit.com
Chào các bạn, mình là Công Việt, mình đến từ kênh Youtube Công Việt Blog. Blog này hiểu đơn giản mình viết những thứ mình học được, áp dụng được và cung cấp những tài nguyên mà mình sử dụng, cũng là nơi để mình lưu trữ tài nguyên. Phần "Thành viên VIP" với gói chỉ 50k để giúp mình duy trì website mà thôi, hi vọng được sự ủng hộ của các bạn.
Theo dõi
Thông báo về
guest
0 Bình luận
Inline Feedbacks
View all comments
banner quang cao hostinger-congvietblog-congvietit
ma giam gia khi mua hosting vps congvietitcom

Bài viết liên quan

4 Cách xóa các mã Shortcode không sử dụng khỏi WordPress

Shortcode — công cụ tiết kiệm thời gian tuyệt vời cho nhiều quản trị viên WordPress đang tìm...

10 lầm tưởng về SEO mà bạn nên thay đổi

SEO đang phát triển với tốc độ nhanh chóng với những tiến bộ mới hơn của công nghệ....

Các yếu tố viết nội dung (content) cực chất cho Newbie (người mới)

Content hay tiếng Việt còn gọi là Nội Dung. Có thể là nội dung của 1 bài chia...

10 chỉ số SEO thực sự quan trọng (và 4 chỉ số không quan trọng)

Số liệu SEO là các chỉ số giúp bạn hiểu liệu SEO của bạn có đang hoạt động...
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x