Chèn quảng cáo cố định trên Mobile khi đọc bài viết cho Blogger

Thủ thuật Blogspot cách chèn quảng cáo cố định trong bài viết chỉ hiển thị trên mobile

Chắc hẳn khi đọc tin tức ở các trang web lớn trên thiết bị di động bạn thường thấy quảng cáo nằm cố định ngay chính giữa bài viết, khi bạn cuộn trang đến nhìn thấy quảng cáo bạn sẽ có cảm giác quảng cáo đó nằm chìm trong bài viết và bạn phải tiếp tục cuộn qua mới đọc tiếp bài viết, như hình ví dụ minh họa dưới đây:

Để làm được giống vậy cũng không quá phức tạp, các bạn làm theo các bước dưới đây:

Chèn mã quảng cáo

Các bạn tìm thẻ data của bài viết <data:post.body/> trong widget Blog1 xác định đúng thẻ data hiển thị bài viết vì template thường có ít nhất một thẻ như vậy, các bạn chèn đoạn mã sau ngay 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnQtNud9brHaWtJzJ6JWT8ndQOx1j3r_mP2NeI-M_CbrK8GeJX9K1WI7EvVsQjBq5SFFarRBGI5MtXKiFp_cttkFYURm1BM-3xgr9hwNM3lMeBJmYXeMGB3MRA7eXcJJ4HLO3anL7x2zT/s1600/banner-img.jpg' width='100%'/>

          </a>

        </div>

      </div>

    </div>

  </div>

</b:if>{codeBox}

Ở đây mình dùng link ảnh thay thế. (Đoạn mã màu đỏ)

Chèn script 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>{codeBox}

Css chèn 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>{codeBox}

Chèn id vào vị trí muốn hiển thị trong bài viết

Khi soạn thảo hay chỉnh sửa bài viết, các bạn chuyển qua khung soạn thảo HTML chèn đoạn mã sau vào vị trí muốn hiển thị thường là canh chính giữa bài viết:

<div id="banner-body"></div>{codeBox}

Lưu lại và xem kết quả! Chúc bạn thành công!

Code: ThietKeBlogspot

NQT

Mong rằng sau những bài chia sẻ của mình các bạn có thể biết thêm nhiều điều mới hơn mỗi ngày.

1
Nhận xét

Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang Upload Image, sao chép link ảnh vào khung bình luận.

  1. Đông A Trần13/10/21 15:10

    Ngon ngay, đúng lúc đang tìm cái này.

    Trả lờiXóa
Báo link hỏng | Hỗ trợ kỹ thuật | Khắc phục quá giới hạn lượt tải
TruongBlogger là website chia sẻ miễn phí các thủ thuật phần mềm cũng như phần cứng trong lĩnh vực công nghệ. Các phần mềm được chia sẻ trên TruongBlogger nên dùng cho mục đích dùng thử. Nếu thấy phần mềm tốt, hãy mua bản quyền để ủng hộ tác giả.
"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" bạn hãy tắt AdsBlock và dành thời gian click QUẢNG CÁO để ủng hộ mình nhé!