Tạo quảng cáo cố định giữa bài viết trên blogger

Để quảng cáo cố định hiện ở giữa trang bài viết chỉ xuất hiện trên màn hình di động, không xuất hiện trên máy tính để bàn, giống như trang Vnexpress khi mình đọc tin tức thì thấy giữa trang có chèn quảng cáo mà không bị chồng chữ cái vào quảng cáo.

Ở đây mình sử dụng javascript thuần để hiển thị quảng cáo trong giữa bài viết mà không có jQuary chạm vào nên tất nhiên nó sẽ không có tác động xấu đến việc tải blog.

Tạo quảng cáo cố định giữa bài viết trên blogger
Tạo quảng cáo cố định giữa bài viết trên blogger

Tạo quảng cáo cố định giữa bài viết trên blogger

Bước 1: Đăng nhập vào Blogger > Chủ đề > Chỉnh sửa HTML, sao chép CSS bên dưới và đặt trên thẻ: ]]></b:skin>

Bước 2: Sao chép mã HTML bên dưới và đặt nó dưới mã <data:post.body/>, thường có nhiều hơn 1 mã này tùy thuộc vào mẫu bạn đang sử dụng, vì vậy hãy thử từng mã.

/* Quang cao co dinh adsense */
.giahuyparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.giahuyparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.giahuyparalax > div > div{width:calc(100% - 40px);height:100%;position:fixed;top:0;left:0;right:0;margin:0 auto;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}
.giahuyparalax > div > div > div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;-ms-flex-align:center;width:100%;height:100%;position:absolute;left:0;right:0;top:37px;align-items:center;background:#fff}
.giahuyparalax > div > div > div > *{margin:auto}
.giahuyparalax > div > div > div > a{width:100%;height:100%}
.giahuyparalax img,.giahuyparalax iframe,.giahuyparalax ins{height:100%;border:0}
.clear{clear:both;display:block}
.giahuyparalax{width:100%;min-width:300px;min-height:600px;text-align:center}
.adParallax{width:100%;min-width:300px;min-height:600px;text-align:center;display:block; margin:10px 0px; padding:0px;}
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <b:if cond='data:view.isPost'>
  <div class='giahuyparalax'>
   <div>
    <div>
      <div>
       <ins class='adsbygoogle adParallax' data-ad-client='ca-pub-0000000000000000' data-ad-slot='0000000000' style='display:block'/>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>
  </div>
 <span class='clear'/>
</div>
<script> //<![CDATA[
// Display ads in paragraphs
function giahuyparalax(Ad1) {let paralax = document.getElementsByClassName ('giahuyparalax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} giahuyparalax(5);/*]]>*/</script></b:if></b:if>

Chú ý: Bạn hãy thay đổi ca-pub-0000000000000000data-ad-slot='0000000000 của bạn.
Bạn cũng có thể đặt trong đoạn số lượng quảng cáo sẽ được hiển thị, hãy chú ý đến mã giahuyparalax(5), số 5 có nghĩa là quảng cáo sẽ xuất hiện sau đoạn văn đến 5. Vì vậy vui lòng thay đổi nếu cần.

Lưu ý!:
Khi viết bài phải sử dụng thẻ <p> khi tạo đoạn văn để quảng cáo có thể xuất hiện.

Trên đây là hướng dẫn tạo quảng cáo cố định giữa bài viết 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ả!
Khi cuộc đời cho bạn cả trăm lý do để khóc, hãy cho đời thấy bạn có cả ngàn lý do để cười.

3 nhận xét

  1. anh có zalo hay fb k anh em muốn hỏi anh này ạ :<
    1. Zalo: 0362118138
  2. a check ib e với
Cám ơn bạn đã quan tâm đặt câu hỏi với chúng tôi!
Chúng tôi sẻ phản hồi sớm nhất cho bạn.
Chúc bạn một ngày tốt đẹp!