Trang chủ
Blogspot Tips

Thêm quảng cáo cố định trên thiết bị di động

Adding Anchor Ads on Mobile, Thêm quảng cáo cố định trên thiết bị di động
Vũ Văn Hoàn

Quảng cáo cố định (Anchor Ad) sẽ chỉ xuất hiện trên màn hình di động, cụ thể là quảng cáo cố định được gắn vào cuối hoặc đầu màn hình. Trên thực tế, Google Adsense đã cung cấp đơn vị quảng cáo này có thể được thêm vào bằng cách bật Quảng cáo tự động trên blog.

Những bất lợi của mặc định của Google Quảng cáo cố định là đôi khi nó xuất hiện và đôi khi không, nó cũng xuất hiện ở vị trí ngẫu nhiên trong cùng hoặc dưới cùng, ví dụ về Quảng cáo cố định giống như hình dưới đây:

Iklan Anchor Ads

Bật vùng quảng cáo

  1. Trên trang tổng quan Blogger, nhấp vào 'Chủ đề'.

  2. Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy chỉnh'.

  3. Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Cũng giống như bất kỳ mã quảng cáo nào khác, vui lòng tìm và xóa các thẻ nhận xét <!--'> và -->'> trong mã bên dưới:

<!--[ Sticky ad ]-->
<!--<input class='stickAdin hidden' id='stickAdin' type='checkbox'/>
<div class='stickAd'>
  <label class='stickAdclose' for='stickAdin'>
    <svg class='line' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
  </label>
  <div class='stickAdcontent'>
    <ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block;text-align:center'/>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
</div>-->

Việc áp dụng chính xác là như sau:

<!--[ Sticky ad ]-->
<input class='stickAdin hidden' id='stickAdin' type='checkbox'/>
<div class='stickAd'>
  <label class='stickAdclose' for='stickAdin'>
    <svg class='line' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
  </label>
  <div class='stickAdcontent'>
    <ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block;text-align:center'/>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  </div>
</div>

Theo mặc định, đơn vị quảng cáo sẽ xuất hiện ở cuối màn hình, bạn có thể thay đổi để xuất hiện ở đầu màn hình Blog hoặc trong phần tiêu đề. Để thử nó, xin vui lòng tìm mã CSS bên dưới:

/* Sticky Ad */
.stickAd{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50}
.stickAdclose{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:inherit}
.stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickAdin:checked ~ .stickAd{padding:0;min-height:0}
.stickAdin:checked ~ .stickAd .stickAdcontent{display:none}
.darkMode .stickAd{background-color:var(--dark-bg-alt)}

Thay thế phần được đánh dấu ở trên, chỉ cần thay thế toàn bộ mã ở trên bằng mã này:

/* Sticky Ad */
.stickAd{position:fixed;top:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50}
.stickAdclose{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:0 0 0 12px;position:absolute;right:0;bottom:-30px;background-color:inherit}
.stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickAdin:checked ~ .stickAd{padding:0;min-height:0}
.stickAdin:checked ~ .stickAd .stickAdcontent{display:none}
.darkMode .stickAd{background-color:var(--dark-bg-alt)}

Thêm mã quảng cáo AdSense

Vui lòng thay thế mã quảng cáo ngu ngốc này bằng mã Adsense của bạn:

<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block;text-align:center'/> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Lưu mẫu của bạn và đợi một lát để quảng cáo xuất hiện.

Giải thích về data-ad-format='horizontal'

Phục vụ để xác định hình thức chung của quảng cáo, theo mặc định, mỗi mã quảng cáo Google Adsense bao gồm một thẻ data-ad-format='auto' tuân theo hành vi đo lường tự động cho quảng cáo đáp ứng. Tuy nhiên, bạn có thể chỉ định hình dạng chung cho đơn vị quảng cáo đáp ứng bằng cách thay đổi giá trị của thuộc tính thành một trong các giá trị sau: 'rectangle', 'vertical', 'horizontal' hoặc kết hợp các giá trị này được phân tách bằng dấu phẩy, ví dụ: 'rectangle, horizontal'.

Tham khảo: jagodesain.com

Đăng nhận xét