Thêm quảng cáo cố định ở cuối màn hình điện thoại trên blogger

Thêm quảng cáo cố định ở cuối màn hình điện thoại trên blogger
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào Đi tới liên kết đến đích
Chúc mừng! Liên kết được tạo

Quảng cáo tự động thì có rất nhiều như: có thể giúp bạn tăng doanh thu, dễ sử dụng, cho phép điều chỉnh quảng cáo để phù hợp với trang web và thân thiện với thiết bị di động. Nhắc đến thân thiện với thiết bị di động thì có một loại quảng cáo rất phổ biến đó là quảng cáo cố định ở dưới góc màn hình.

Hôm nay mình xin hướng dẫn các bạn cách thêm quảng cáo cố định xuất hiện dưới màn hình điện thoại và responsive.

Quảng cáo cố định ở cuối màn hình điện thoại trên blogger
Quảng cáo cố định ở cuối màn hình điện thoại trên blogger

Loại quảng cáo này cũng thường được gọi là quảng cáo nổi, bản thân loại quảng cáo này thực sự đã được cung cấp bởi Google Adsense bằng cách chỉ cần kích hoạt quảng cáo tự động và đánh dấu vào quảng cáo cố định.

Hướng dẫn thêm quảng cáo cố định ở dưới góc màn hình

Bước 1: Truy cập vào Blogger > Chủ đề > Chỉnh sửa HTML, Sao chép CSS bên dưới và đặt nó phía trên mã: ]]></b:skin>

.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);transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid #eceff1}
.stickAdclose{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid #eceff1;border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background-color:inherit}
.stickAdclose svg{width:18px;height:18px;fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickAdin:checked ~ .stickAd{padding:0;min-height:0}
.stickAdin:checked ~ .stickAd .stickAdcontent{display:none}
.stickAdin:checked ~ .stickAd .stickAdclose svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
  
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .stickAd,.darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}
.darkMode .stickAd{background-color:#2d2d30}

Bước 2: Tiếp theo sao chép mã bên dưới và đặt phía trên mã </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'>
  <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    <input class='stickAdin hidden' id='stickAdin' type='checkbox'/>
    <div class='stickAd'>
      <label class='stickAdclose' for='stickAdin'><svg viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></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'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
      </div>
    </div>
  </b:if>
</b:if>

* Các bạn hãy thay đổi ca-pub-00000000000000000000000000 thành mã ca-pubdata-ad-slot của bạn.
* Nếu bạn muốn hiển thị nó trên màn hình cũng xóa <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> và xóa thẻ </b:if>.
* Nếu bạn muốn hiển thị quảng cáo trên mọi trang, hãy xóa <b:if cond='data:view.isPost'> và xóa thẻ </b:if>

Bước 3: Bấm Lưu lại

Trên đây là hướng dẫn hêm quảng cáo cố định ở cuối màn hình điện thoại trên blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Về tác giả

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web .

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.