Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

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

Cập nhật: 11/06/2019 Bởi Duy... - A- A+

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.

Cách chèn quảng cáo cố định trong bài viết chỉ hiển thị trên mobile
Để 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:

+ Bước 1: 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://2.bp.blogspot.com/-JIHQl-TACCQ/XP5y6GbGGwI/AAAAAAAAQxk/KJwAMUJhDsEi0grfarcrc339wcS0hwB2QCLcBGAs/s1600/banner-img.jpg' width='100%'/>
    </a>
    </div>
    </div>
    </div>
  </div>
</b:if>

Ở đây mình dùng link ảnh thay thế.

+ Bước 2: 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>

* Lưu ý: Đoạn script này viết bằng jquery cho nên trong template cần link thư viện jquery

+ Bước 3: Viết 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>

+ Bước 4: Chèn id vào vị trí muốn hiển thị trong bài viết
Khi soan thảo hay chỉnh sửa bài viết, các bạn chuyển qua kkhung 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>
Các bạn thử áp dụng vào Blog mình xem thế nào, nếu làm không được hay có ý gì hay hơn cứ để lại phản hồi dưới bài viết này nhé.

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Tết Trung Thu rước đèn đi chơi em rước đèn đi khắp phố phường, lòng vui sướng với đèn trong tay em múa ca trong ánh trăng rằm. Trung thu là Tết thiếu nhi, mà sao người lớn cứ đi chơi nhiều đi nhiều nó lại làm liều, làm liều nó lại ra nhiều thiếu nhi.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter