Tạo quảng cáo cố định dướ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.

Tạo quảng cáo cố định dướ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: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

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

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

/* Fixed ads at the bottom of the phone screen */
.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 adjust the class if it is different or delete this section */
.darkMode .stickAd,.darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}
.darkMode .stickAd{background-color:#2d2d30}

Bước 6: 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 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Trên đây là hướng dẫn tạo quảng cáo cố định dướ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é!