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

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

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-0000000000000000 và 0000000000 thành mã ca-pub và data-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ả!