Nhúng quảng cáo cố định vào bài viết giao diện điện thoại

(Chơi Game Kiếm Tiền) xin chia sẻ cách nhúng bài viết cố định ở điện thoại trong phần nội dung bài viết ở Blogspot.

Bài viết này được lấy từ Việt Blogger trang thietkeblogspot.com

Ảnh minh họa

Bước 1: Vào chủ đề - chọn tùy chỉnh - chọn tùy chỉnh sửa HTML, tìm thẻ <data:post.body/> dán đoạn mã sau vào bên dưới thẻ <data:post.body/>

<b:if cond='data:view.isPost and data:blog.isMobileRequest'>
  <div class='banner-content'>
    <div class='banner-position'>
      <div class='banner-display'>
        <div class='banner-iframe'>
         <!-- Chèn mã quảng cáo ở đây -->
          <a expr:href='data:post.url.canonical' expr:title='data:post.title'>
            <img src='https://2.bp.blogspot.com/-JIHQl-TACCQ/XP5y6GbGGwI/AAAAAAAAQxk/KJwAMUJhDsEi0grfarcrc339wcS0hwB2QCLcBGAs/s1600/banner-img.jpg' width='100%'/>
          </a>
        </div>
      </div>
    </div>
  </div>
</b:if>

Bước 2, chèn đoạn script sau vào trước thẻ đóng </body>

<b:if cond='data:view.isPost and data:blog.isMobileRequest'>
  <script>//<![CDATA[
    $(function() {
      var banner_content = document.querySelector('#banner-body');
      var banner_width = $(window).width() + 'px';
      var banner_height = $(window).height() + 'px';
      $('.banner-content').css({'height': banner_height});
      $('.banner-position').css({'height': banner_height,'clip': 'rect(0 '+ banner_width +' '+ banner_height +' -20px)'});
      $('.banner-display').css({'width': banner_width,'height': banner_height});
      $('.banner-iframe').css({'height': banner_height});
      if (banner_content) {
        $('.banner-content').appendTo(banner_content);
      } else {
        $('.banner-content').remove();
      }
    });
  //]]></script></b:if>

Bước 3, chèn CSS sau trước thẻ </head>

<b:if cond='data:view.isPost and data:blog.isMobileRequest'>
<style>
@media (min-width:415px) {
    #banner-body {
       display:none!important;
    }
}
.banner-content {
    width: 100%;
    margin-bottom: 20px;
}
.banner-position {
    position: absolute;
    width: 100%;
}
.banner-display {
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}
.banner-iframe {
    display: block;
    position: relative;
}
</style>
</b:if>

 Bước 4, mỗi lần viết bài đăng mới, hãy nhập đoạn code bên dưới vào vị trí muốn hiển thị quảng cáo là xong.

<div id="banner-body"></div> 

 

Tác giả: Chơi game kiếm tiền

Nếu thấy thông tin mình chia sẻ cho Cộng đồng là hữu ích

Nếu bạn hào sảng, hãy mời mình một ly cafe để mình có động lực và tài chính bản thân để tìm tòi và chia sẻ nhiều thông tin hữu ích cho bạn thông qua các số tài khoản dưới đây

Số tài khoản: 0868666811368 tại MB Ngân hàng Quân đội

Ví BEP20 tất cả các loại coin: 0xe2dd35546080e713bd8e9eb2047e12e1987f63f2


Đăng nhận xét

4 Nhận xét