Cách chèn quảng cáo Adsense vào Blogspot hiển thị tại các trang khác nhau

Với những ai đã đăng ký Google Adsense thành công rồi thì cũng đều mong muốn là được kiếm thật nhiều tiền, vì vậy việc triển khai mã code quảng cáo Google Adsense vào Blogspot cũng mong đem lại cho các bạn một khoản thu nhập khá.

{tocify} $title={Nội dung bài viết}

Hiện tại bên cạnh loại quảng cáo tự động trong các đơn vị quảng cáo có 3 loại quảng cáo (tài khoản mới)

Quảng cáo văn bản và quảng cáo hiển thị hình ảnh
Quảng cáo trong nguồn cấp dữ liệu
Quảng cáo trong bài viết

Căn cứ vào 3 loại quảng cáo có thể bố trí tại các trang như sau:

Quảng cáo văn bản và quảng cáo hiển thị hình ảnh

Đầu trang chèn trong widget ngay dưới menu lấy kích thước 970x90 sau khi lấy mã sửa 970px thành 100%
Sidebar chèn trong widget loại hiển thị biểu ngữ dọc, đáp ứng và kích thước tùy chỉnh

Quảng cáo trong nguồn cấp dữ liệu

Chèn vào giữa các bài viết tại trang chủ tùy vào thiết kế mà lấy loại hiển thị phù hợp

Quảng cáo trong bài viết

Chèn trong bài viết dưới tiêu đề, dưới dấu ngắt nháy, vào một vị trí bất kỳ có thể canh giữa bài, dưới chân bài viết, tùy vào thiết kế mà lấy loại hiển thị phù hợp.

Hướng dẫn chèn mã quảng cáo

-> Hướng dẫn cách lấy mã quảng cáo Google Adsense

Chèn vào các vị trí như đầu trang, hay chân trang, sidebar các bạn chỉ cần lấy mã rồi tại một Widget HTML sau đó dán mã là xong.

Lưu ý: Trước khi thực hiện bạn cần sao lưu mẫu lại, để đề phòng khi có lỗi xảy ra bạn có thể Backup mẫu lại như ban đầu để tránh tình trạng mất mẫu của bạn.{alertError}

Chèn mã quảng vào giữa các bài viết tại trang chủ

Các bạn vào chỉnh sửa mẫu chọn chuyển đến tiện ích Blog1 chọn mở rộng cặp thẻ tag ~~<b:includable id='main'>~~ các bạn thêm ~~index='item'~~ vào trong thẻ lặp ~~<b:loop values='data:posts' var='post'>~~ thành ~~<b:loop index='item' values='data:posts' var='post'>~~ Tiếp theo ngay dưới thẻ lặp b:loop này các bạn thêm đoạn code sau:

<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:item==3'>
<div class='post'>

</div>
</b:if>
<b:if cond='data:item==6'>
<div class='post'>

</div>
</b:if>
</b:if>{codeBox}

Trong đó các số 3 và 6 là vị trí hiện thị quảng cáo sau bài viết thứ 3 và bài viết thứ 6, nếu trang chủ có nhiều bài chẳng hạn 20 thì các bạn thay đổi vị trí cho hù hợp chẳng hạn sau các bài 5, 10, 15.

<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:item==5'>
<div class='post'>

</div>
</b:if>
<b:if cond='data:item==10'>
<div class='post'>

</div>
</b:if>
<b:if cond='data:item==15'>
<div class='post'>

</div>
</b:if>
</b:if>{codeBox}

Hướng dẫn chèn mã quảng cáo vào bài viết

Các bạn có thể chèn mã quảng cáo dưới tiêu đề (không khuyến khích), dưới dấu ngắt nháy, vào một vị trí bất kỳ có thể canh giữa bài, dưới chân bài viết.

Chèn dưới tiêu đề

Cái này đơn giản các bạn chỉ cần tìm thẻ tiêu đề ~~<h1>~~ nó thường nằm trong cặp thẻ ~~<b:includable id='post' var='post'>~~ chèn mã quảng cáo ngay dưới nó.

Chèn dưới dấu ngắt trang (ngắt nhảy)

Phần này ít bạn để ý chèn dấu ngắt nháy hoặc có bài chèn có bài quên không chèn nhưng không sao bạn vẫn có thể chèn mã quảng cáo bên dưới nếu bài mà bạn thêm dấu ngắt thì quảng cáo hiển thị ngay dưới còn bài không chèn thì không hiển thị quảng cáo. các bạn chèn đoạn mã sau ngay dưới thẻ ~~<data:post.body/>~~

<div class='adsense1'>
<div id='ads_Code'>

</div>
</div>{codeBox}

Tiếp tục chèn đoạn script sau trước ~~</body>~~

<script>//<![CDATA[
$(function() {
var more = $('a[name="more"]')
if (more) {
$('#ads_Code').appendTo(more)
} else {
$('.adsense1').empty()
}
})
//]]></script>{codeBox}

Chèn dưới chân bài viết

Cũng đơn giản các bạn chỉ cần chèn mã quảng cáo ngay trước ~~<div class='post-footer'></div>~~ hoặc ngay dưới thẻ ~~<data:post.body/>~~ đều như nhau vì thẻ này luôn nằm trên post-footer.

Chèn vào một vị trí bất kỳ

Cách này các bạn chèn id vào vị trí muốn hiển thị quảng cáo có thể giữa bài như sau:

Chèn đoạn code sau ngay dưới thẻ ~~<data:post.body/>~~

<div class='adsense2'>
<div id='ads_Body'>

</div>
</div>{codeBox}

Tiếp tục chèn đoạn script sau trước ~~</body>~~

<script>//<![CDATA[
$(function() {
var ads = document.getElementById('AdSense')
if (ads) {
$('#ads_Body').appendTo(ads)
} else {
$('.adsense2').empty()
}
})
//]]></script>{codeBox}

Khi viết bài mới hoặc sửa lại bài cũ các bạn cần thêm đoạn code ~~<div id="AdSense"></div>~~ vào vị trí muốn hiển thị bên khung soạn thảo HTML của bài viết.

Yêu cầu trong mẫu cần có thư viện JQuery cái này đa số Blog đều có các bạn kiểm tra nếu không thấy thì chèn trước ~~</head>~~

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>{codeBox}

Ngoài ra các bạn cũng nên sử dụng điều kiện cho mobile như sau:

Điều kiện chỉ tải mã trên mobile (?m=1)

<b:if cond='data:blog.isMobileRequest'>

</b:if>{codeBox}

Điều kiện không tải trên mobile (?m=1)

<b:if cond='!data:blog.isMobileRequest'>

</b:if>{codeBox}

-> Bạn cũng có thể tham khảo Tổng hợp các thẻ điều kiện Blogspot mới nhất để có thể tối ưu hiển thị mã quảng cáo một cách tốt nhất.