Làm thế nào để hiển thị quảng cáo trong bài viết mà không phải chèn mã quảng cáo thủ công từng bài một? Đó là một câu hỏi mà chắc nhiều bạn đang đi tìm câu trả lời nếu đã gặp bài viết hướng dẫn kiểu như vậy mà bạn chưa thỏa mãn thì hôm nay thử tham khảo bài viết này của mình xem có khác những bài hướng dẫn trước đây không nhé.
Quảng cáo tự động là gì? Là khi bạn chỉ cần chèn mã quảng cáo một lần ở bất kỳ vị trí nào trong theme blogspot mà bạn nên chèn mỗi mã quảng cáo vào tiện ích HTML/JavaScript cho nó đơn giản. Từ mã quảng cáo đó sử dụng Jquery chèn tự động vào bài viết.
Quảng cáo chỉ hiển thị trên thiết bị di động, những smartphone cầm tay màn hình nhỏ. Mình giới thiệu hai loại quảng cáo hiển thị trong bài viết trên mobile:
- Loại trượt kích thước 300x600
- Loại cố định kích thước 300x200
 |
| Hiển thị quảng cáo kích thước 300x200 và 300x600 trong bài viết |
Ưu điểm
- Chèn 2 mã quảng cáo 300x200 và 300x600 vào 2 widget HTML/JavaScript khác nhau
- Quảng cáo chỉ hiển thị trên mobile
- Loại trượt 300x600: bài nào cũng có nằm ở gần giữa bài có sai số
- Loại cố định 300x200: tùy theo độ dài bài viết mà nhân bản cứ sau vài dòng lại hiển thị một quảng cáo
- Sau này không hiển thị quảng cáo nữa chỉ cần tắt hiển thị widget
Nhược điểm
- Quảng cáo trùng lặp: quảng cáo 300x200 được nhân bản lên do đó trong bài viết sẽ chỉ hiển thị một quảng cáo duy nhất.
- Hai quảng cáo hiển thị một ví trí: Ví dụ quảng cáo 300x600 hiển thị ở giữa và quảng cáo 300x200 ngay dưới nó. Trường hợp này có thể xảy ra nhưng không phải bài nào cũng có.
Mô tả
Sử dụng Jquery chèn widget quảng cáo hiển thị theo số thẻ <br> ngắt dòng trong bài viết, có thể thay bằng thẻ <p> nếu bài viết sử dụng thẻ <p> thay vì thẻ <br> mặc định.
Hướng dẫn chèn quảng cáo tự động trong bài viết blogspot hiển thị trên mobile
Bước 1: Chèn mã quảng cáo vào tiện ích HTML/JavaScript
Trong Bố cục tiện ích lần lượt thêm 2 tiện ích HTML/JavaScript và kéo nó nằm bên dưới tiện ích Bài đăng trên Blog.
 |
| Chèn 2 widget quảng cáo bên dưới widget blog posts |
Trong mỗi tiện ích chèn mã quảng cáo 300x600 và 300x200
 |
| Cấu hình chèn mã quảng cáo trong Nội dung của tiện ích |
Đặt tên cho tiện ích quảng cáo và Lưu lại.
Bước 2: Chỉnh sửa lại tiện ích đã thêm trong HTML của Chủ đề
Vào chỉnh sửa HTML của Chủ đề chọn Chuyển đến tiện ích HTML đã thêm, chèn điều kiện hiển thị widget trên mobile và trang bài viết
<b:widget cond='data:blog.isMobileRequest and data:view.isPost'>...</b:widget>
Hình minh họa
 |
| Thêm điều kiện hiển thị widget cho trang bài viết và trên mobile |
Tiếp theo sửa lại nội dung trong thẻ <b:includable id='main'> của tiện ích
Tiện ích QC 300x600
<b:includable id='main'>
<b:attr name='class' value='banner-body hidden'/>
<b:attr name='data-version' value=''/>
<b:attr name='id' value=''/>
<div class='banner-content'>
<div class='banner-position'>
<div class='banner-display'><div class='banner-iframe'><data:content/></div></div>
</div>
</div>
</b:includable>
Tiện ích QC 300x200
<b:includable id='main'>
<b:attr name='class' value='banner-post hidden'/>
<b:attr name='data-version' value=''/>
<b:attr name='id' value=''/>
<div class='banner-300'><data:content/></div>
</b:includable>
Tiến hành Lưu chủ đề sau khi đã cấu hình lại tiện ích.
Bước 3: Chèn quảng cáo tự động trong nội dung bài viết.
Sử dụng script với jquery, chèn trước thẻ đóng </body>
<script>//<![CDATA[
window.addEventListener('load',function(){
var a=15, // QC hiển thị sau mỗi 15 thẻ <br>
b=$('.banner-post'),
c='<div class="banner-post">'+b.html()+'</div>',
d=$('.banner-body'),
br=$('.post-body br'),
e=Math.ceil(br.length/2)
if(br.length!=''){
if(b.length!=''){
if(br.length>a)for(var i=a;i<br.length;i+=a)$(c).insertAfter(br[i])
$(b).remove()
}
if(d.length!=''){
$(d).insertAfter(br[e]).removeClass('hidden')
var _w=$(window).width()+'px',_h=$(window).height()+'px'
$('.banner-content').css({'height':_h})
$('.banner-position').css({'height':_h,'clip':'rect(0 '+_w+' '+_h+' -20px)'})
$('.banner-display').css({'width':_w,'height':_h})
$('.banner-iframe').css({'height':_h})
}
}
})
//]]></script>
Bước 4: Chèn CSS hiển thị quảng cáo
Chèn css trong thẻ <b:skin>
banner-post.hidden, .banner-body.hidden {
display: none;
}
.banner-post {
background: #f8f9fa;
margin: 20px -15px;
}
.banner-post:before {
content: "Quảng cáo";
display: block;
text-align: center;
font-size: 12px;
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
margin: -5px 0 5px 0;
}
.banner-post>.widget-content {
width: 300px;
margin: 0 auto;
}
.banner-post a {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.banner-post img {
width: 100%;
height: auto;
}
.banner-body {
position: relative;
top: 20px;
}
.banner-body:after {
content: "Kéo xuống để xem tiếp sau quảng cáo";
font-size: 12px;
color: #ccc;
text-transform: uppercase;
text-align: center;
position: absolute;
top: -35px;
left: 0;
right: 0;
}
.banner-content {
width: 100%;
margin:20px 0;
}
.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;
}
@media (min-width:481px) {
.banner-body,.banner-post {
display: none!important;
}
}
Bước 5: Kiểm tra hiển thị quảng cáo
Các bạn test bằng điện thoại theo URL bài viết tại trang theme blogspot tin tức của mình.
Bài tham khảo:
- Kinh nghiệm đăng ký Google AdSense thành công cho Blog gắn tên miền tùy chỉnh
- Cách sử dụng thẻ b:tag trong blogspot
- Tìm hiểu về cách chặn font, css và js mặc định của Blogger
- Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js
