Để 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
Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.
Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.
Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.
Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.
Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.
/* 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 6: 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 == "true"'>
<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-0000000000000000 và data-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.
Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .
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.
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