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

Hôm nay mình xin chia sẻ cùng các bạn thủ thuật làm sao để có thể chèn quảng cáo cố định trong bài viết khi xem trên Mobile dành cho Blogspot.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLf7zfWDmc6B9qzezh3AC03DBQoIj_w1iEqSOi1-bvlEqjTMSat9grOoiRPdp-dDpZh39ct-QyiIGjkeKoaHKKYMEUpAF00_U_6nnqnglL6S-cici8VdbOte3U71vC3m863pQxtWrzTXN7/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 soạn 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>

Chúc bạn thành công!