Mọi ý kiến đóng góp, xin liên hệ với tôi! Contact

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>

/* 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ướ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ã.

<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ả!

Tham khảo: www.wendycode.com

Getting Info...

Về tác giả

Mỗi khi có ý định từ bỏ hãy nghĩ đến lý do mà bạn bắt đầu.

Đă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.