24 tháng 5, 2019

Chèn Adsense vào trong bài viết Blogger

Chèn Adsense vào trong bài

Chèn Adsense vào trong bài là một phần quan trọng khi Kiếm tiền online với Adsense. Sau bài viết này bạn sẽ làm chủ được các kỹ thuật chèn code của Google Adsense vào bất kì nơi đâu trong trang web của bạn.


Mục lục:
  1. Các vị trí chèn Adsense vào trong bài viết
  2. Chèn Adsense vào sau đoạn Paragraph thứ nhất (Xem Demo)
  3. Chèn Adsense vào Giữa bài hay Bất cứ đâu
  4. Chèn Adsense vào Giữa thân bài tự động co giãn

1. Các vị trí chèn Adsense vào trong bài viết


Phần này chúng ta sẽ nói về những nơi thông dụng nhất trên trang blog của bạn để đặt adsense., cách triển khai cũng như đánh giá hiệu quả và chọn ra nơi thích hợp nhất. Chèn Adsense vào trong bài viết đòi hỏi bạn có kiến thức về tùy biến template dưới dạng mã code HTML


1. 1- Đặt ở side bar


dat adsense o ben sidebar

Đây là phần dễ thực hiện nhất. Chỉ cần đến mục chỉnh Layout, chọn thêm gadget, thêm HTML gadget rồi dán code Adsense vào là xong.

them adsense gadget vao layout

Thích hợp: 125x125, 120x600x 160x600, 300x600

1.2- Giữa các bài posts


dat adsense o duoi tieu de bai post

Đến mục Layout, chọn Edit dưới vùng Blog posts, check vào "Show ads between posts"

Thích hợp: 480x600, 300x250, 336x280


1.3- Dưới Tiêu Đề (Header)


dat adsense o duoi tieu de trang web

Đầu tiên bạn cần chuyển đổi code Adsense Google cung cấp (thành dạng plain text) bằng công cụ  HTML to XML converter (trang này có nhiều code convertor các kiểu)

Kế đến, vào Edit template. Tìm đến (Ctrl _ F) đoạn sau:

<div id='header-wrapper'>

Chèn đoạn code Adsense đã được convert vào ngay sau đoạn trên.

Thích hợp: 728x90, 728x15



1.4- Phía trên các bài post



Chuyển code Adsense do Google cung cấp (thành dạng plain text như hướng dẫn trên) rồi dán vào ngay sau đoạn này trong vùng soạn thảo Edit HTML.

<div id='main-wrapper'>

Thích hợp: 460x68, 468x15, 336x280


1.5- Dưới Tiêu Đề bài viết


dat adsense o duoi tieu de bai viet

Ads ở vị trí này sẽ được nhìn thấy khắp các trang blog. Đổi code Adsense rồi dán vào ngay sau đoạn này trong vùng soạn thảo Edit HTML.

<div class='post-header-line-1'/>

Nếu không tìm thấy, hãy bỏ đoạn dấu trừ phía sau đi.

Thích hợp: 468x68, 468x15



1.6- Dưới Tiêu Đề Bài Viết (chỉ thấy trong bài post)



Ads ở vị trí này sẽ được nhìn thấy trong trong post, tức bài viết chính chứ không ở Home hoặc landing page.

Vẫn như trên, đầu tiên ta đổi code Adsense rồi dán vào ngay sau đoạn này trong vùng soạn thảo Edit HTML.

<div class='post-header-line-1'/>
Note: Nếu không tìm thấy, hãy bỏ đoạn dấu trừ phía sau đi.

Dán đoạn code được convert như sau
<b:if cond='data:blog.pageType == "item"'>
<!-- Add here the code of your ad -->
</b:if>

Thích hợp: 468x68, 468x15


1.7- Dưới chân bài (trang home)


Ads ở vị trí này sẽ được nhìn thấy khắp các trang blog, nó cũng gần giống Ads chèn dưới header, chỉ có điều cái này nó sẽ nằm ngược từ dưới lên. Dán code Adsense vào sau đoạn này:

<div class='post-header-line-1'/>

Nếu không tìm thấy, hãy bỏ đoạn dấu trừ phía sau đi. Dán đoạn code được convert ngay sau nó.

Thích hợp: 468x68 và 468x15






2. Chèn Adsense vào sau đoạn Paragraph thứ nhất


Có bao giờ bạn tự hỏi, đặt biển quảng cáo Google Adsense ở đâu sẽ đem lại nhiều lợi nhuận nhất? Theo các nghiên cứu gần đây chủ đề Google Adsense Heat, phần bài post, trực quan với tầm mắt người đọc, là vùng nóng nhất, trong đó vùng ngay sau đoạn văn thứ nhất và phần trước đoạn văn cuối cùng là nóng hơn. vosau sẽ lần lượt đi qua các vùng nóng trong bài.

Do quy định của Blogger nên bạn không thể đặt banner trong bài post mà chỉ có thể đặt ở đầu và cuối bài. Các blogger master không chịu bó gối chịu trận, và trong tay họ thì có món JavaScript quá lợi hại. Vậy nên họ đã Sáng tạo một cách rất độc đáo như sau:


1. Đăng nhập vào blog, chọn Template rồi chọn Edit HTML
2. Tìm đến đoạn code sau:

<data:post.body/>

Chú ý:

  • Thường bạn sẽ thấy có 2 đoạn code trên (cho các template dạng Responsive. Thường đoạn đầu là cho điện thoại, đoạn sau là cho Desktop). Nếu thử với đoạn này không được thì thử tiếp với đoạn còn lại.
  • Cũng sẽ có trường hợp bạn thấy rất nhiều phần post.body này do template đã được customize nhiều phần. Hãy chọn đúng chỗ cho mình.
  • Để thử xem đúng chỗ không thì cách hay nhất là bạn chèn một cái ảnh nào đó vào sau từng đoạn, save template rồi xem thử một bài nào đó. Ví dụ chèn đoạn code image sau:

<img src='https://cheblog.page.link/logo'/>

  • Sau khi đã xác định đúng <data:post.body/>, xóa cái image để test đi rồi chèn thêm một tag div trước và sau <data:post.body/> để có:

<div id='adsense-target'><data:post.body/></div>




3. Ngay phía trên đoạn vừa chỉnh sửa, copy đoạn này và dán vào

<b:if cond='data:blog.pageType == "item"'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE CODE HERE</div></b:if>


Sau khi dán thì có dạng sau:

<b:if cond='data:blog.pageType == "item"'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE CODE HERE</div></b:if>
<div id='adsense-target'><data:post.body/></div>

Đổi code Adsense sang plan text rồi dán vào đoạn chữ xanh ADSENSE CODE HERE



4. Cuối cùng, ta chèn thêm đoạn code này vào để khai báo nơi chèn (mặc định nếu chỉ mới làm phần trên thì nó sẽ chèn khung adsense ở ngay đầu bài)

Ngay sau đoạn <div id='adsense-target'><data:post.body/></div> (bước 2) chèn vào đoạn Script sau:

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>

Chú ý:

- Để chuyển đoạn quảng cáo xuống sau paragraph thứ 2, thay số 0 ở dòng adscont,linebreak[0] thành số 2
- Nếu bạn chuyển đoạn quảng cáo xuống sau heading H2 hoặc H3, thay chữ br trong đoạn &quot;br&quot; bằng chữ h2 hoặc h3


4.1 Canh lề trái phải cho ô Adsense


Mặc định thì ô quảng cáo sẽ xuất hiện chính giữa ngay sau đoạn paragraph thứ nhất nếu bạn thực hiện đúng theo bài viết này. Nhưng nếu ô quảng cáo là dạng ô vuông nhỏ, kích thước chỉ bằng một phần bề rộng của bài post, có thể bạn sẽ muốn canh sang lề phải hoặc trái, hoặc thậm chí chèn vào trong bài viết (inline - bao quanh bởi text). Để làm được vậy thì bạn làm như sau:

Thay dòng

<div id='adsense-content' style="display:block;text-align: center">

bằng đoạn sau

<div id='adsense-content' style="display: inline-block;float: left;margin:15px 15px 15px 0px">

Kết quả:



4.2 Canh lề Phải cho ô quảng cáo


Thay dòng

<div id='adsense-content' style="display:block;text-align: center">

bằng đoạn sau

<div id='adsense-content' style="display:inline-block;float:right;margin:15px 0px 15px 15px">


5. Lưu lại template và kiểm tra kết quả.

Với mẹo này, bạn có thể tùy biến khả năng hiển thị của Adsense tương đối lớn rồi đó. Giờ việc của bạn là chọn khung quảng cáo nào cho phù hợp.



3. Chèn Adsense vào Giữa bài hay Bất cứ đâu


Phần đầu bài này tôi có đề cập tới 7 vị trí có thể đặt Adsense cho blog. Tuy nhiên, đó là những nơi đã được định sẵn và cố định, không phải là các mặt hàng đắc địa. Đối với khung soạn thảo, thì vị trí quen thuộc là ở sau tiêu đề bài, đầu bài hay cuối bài.

Nhưng một ngày đẹp trời bạn muốn đặt quảng cáo Adsense ở ngay... giữa bài thì sao?

Chúng ta hoàn toàn có thể đặt script vào template để chỉ định ví trí cùng một đoạn tag để hiển thị khung hình. Và hơn nữa là, chúng ta có thể đặt bất cứ nơi đâu cũng được, giữa hai đoạn văn (paragraph) hoặc chính giữa bài. Việc đặt code Adsense vào giữa vài được phát triển bởi các blogger không chịu blog gối.

Luôn nhớ backup template của bạn trước mỗi lần vọc anh Google nhé!

Bước 1


Đầu tiên, phải thực hiện việc parse Adsense code (hay nói cách khác là chuyển về dạng plain text) bởi tool này rồi cất ở đâu đó để sau dùng đến.


Bước 2


Tìm đến đoạn sau trong ô soạn thảo HTML

<data:post.body/>

Thường thì bạn sẽ gặp nhiều đoạn như trên nhưng cứ chọn đoạn thứ 2 (vì đoạn đầu thường dành cho mobile và các đoạn sau là phần mở rộng). Nếu thử đoạn 2 không được thì thử với đoạn 3 nhé.

Chú ý là template VoSau có 4 đoạn <data:post.body/> và đoạn thứ 4 là đoạn bạn cần tìm.



Bước 3


Thay đoạn <data:post.body/> bởi đoạn code sau:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style="clear:both; margin:10px 0">
<!-- Add here the code of your ad -->
</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Bước 4


Thay đoạn <!-- Add here the code of your ad --> bởi đoạn Google Adsense đã được bạn convert html lúc trước. Lưu template lại.

Chú ý: để canh giữa cho khung Ads, thêm tag <center> trước và sau đoạn Adsense như sau:

<div style="clear:both; margin:10px 0">
<center>
<!-- Add here the code of your ad -->
</center>
</div>

Bước 5


Khi soạn thảo một bài mới, sử dụng đoạn HTML sau ở nơi nào bạn muốn đoạn Ads xuất hiện

<!-- adsense -->
Ví dụ:

<div>Đây là test demo của trang www.itbinhdan.com. Đây là test demo của trang www.itbinhdan.com. Đây là test demo của trang www.itbinhdan.com.
<!-- adsense -->
Đây là test demo của trang www.itbinhdan.com. Đây là test demo của trang www.itbinhdan.com. Đây là test demo của trang www.itbinhdan.com. </div>


4. Chèn Adsense vào Giữa thân bài tự động co giãn


Nếu làm thủ công thì bạn có thể chuyển sang chế độ soạn thảo HTML, rồi tạo thẻ div ở nơi nào muốn chèn Google Adsense và dán code đã được convert GOOGLE ADSENSE sang html là xong, cần gì rườm rà.

Phần này tôi sẽ hướng dẫn các bạn cách chèn quảng cáo Google Adsense vào chính giữa bài viết, một cách hoàn toàn tự động. Cơ chế để chèn Google Adsense vào bài có nhiều kiểu, đếm rồi chia đôi số ký tự hoặc chia đôi số dòng dựa vào tag br.


  1. Chèn Google Adsense vào giữa bài bằng cách chia đôi số ký tự (cách này có vẻ chuẩn hơn) - Cách này nêu ra chỉ để các bạn tham khảo kỹ thuật, vì nó đơn giản chỉ chia đôi số ký tự rồi chèn vào giữa, nên thường nó sẽ chèn Adsense vào giữa paragraph, blockquote, pre code,... rất xấu và phá nát cấu trúc bài post.
  2. Chèn Google Adsense vào giữa bài bằng cách chia đôi số đoạn paragraph (không chuẩn lắm, nhưng khá hay vì có thêm lựa chọn chèn chính xác sau bao nhiêu dòng tự động)
  3. Chèn Google Adsense vào giữa bài tự động chuẩn: đây là cách mà chebinhdan.com đang sử dụng. Cách này cũng dùng thuật toán chia đôi cấu trúc bài post như cách 1, nhưng thông minh hơn ở chỗ nó sẽ tự tính toán dòng paragraph để không chèn đại Adsense vào giữa Paragraph hoặc Blockquote, Precode của người ta.


Đầu tiên bạn vào chỉnh sửa HTML blogger template, sao lưu template trước khi thực hiện.

Tìm đến đoạn sau: <data:post.body/>

Thường thì đoạn <data:post.body/> thứ 2 sẽ là đoạn cần sửa (dành cho PC). Nhưng đối với một số template thì bạn cần đến đoạn <data:post.body/> thứ 4 nhé (đoạn cuối) vì các template mới dạng responsive, được lập trình cho 4 thiết bị khác nhau.

1/ Chèn Google Adsense vào giữa bài bằng cách chia đôi số ký tự


Thay cả đoạn vừa tìm thấy bằng đoạn code sau:

<div expr:id='"aim1" + data:post.id'/>
<div style='clear:both; margin:10px 0'>
<br />
<!-- GOOGLE ADSENSE CODE HERE -->
<br />
</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("");
if(r>0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1)}
</script>

Thay đoạn <!-- GOOGLE ADSENSE CODE HERE --> bằng đoạn code Google Adsense sau khi convert Google Adsense nhé.

Lưu template lại và... XONG! Thật gọn nhẹ và kết quả lại đẹp nữa chứ. (tôi có thêm dòng <br /> trước và sau code Google Adsense để giúp banner quảng cáo nằm cách biệt ra một chút, giúp bài viết đỡ rối, đẹp mắt hơn)



 2/ Chèn Google Adsense vào giữa bài bằng cách chia đôi số đoạn paragraph


Cũng như cách 1, bạn thay đoạn <data:post.body/> bằng code sau:

<div id="PostBody">
 <data:post.body/>
</div>
<div id="AdCode">
<div style='margin:5px 0;text-align:center;clear:both;'>
<br />
<!-- GOOGLE ADSENSE CODE HERE -->
<br />
</div>
</div>

Thay đoạn <!-- GOOGLE ADSENSE CODE HERE --> bằng đoạn code Google Adsense sau khi convert Google Adsense sang html.

Sau đó tìm đến tag </body> và dán đoạn sau ngay trên nó

<b:if cond='data:blog.pageType == "item"'>
<script>
 $AdCode = $("#AdCode").html();
 $("#PostBody br:lt(1)").replaceWith($AdCode);
 $("#AdCode").remove();
</script>
</b:if>

Đoạn code trên có thể hoạt động sai, tùy vào độ tùy biến của template, vì hàm br:lt(1) tính không chuẩn. Nếu thấy quảng cáo hiển thị thành 2 bản, một ngay đầu và một ở cuối bài post thì bạn có thể thay br:lt(1) bằng br:eq(n) với n là số xuống dòng. Bạn có thể sử dụng con số n=5,6,7... cho kết quả cũng khá đẹp mắt


3/ Chèn Google Adsense vào giữa bài tự động ĐẸP/CHUẨN


<div id="adsenseMiddleitbinhdan">
<data:post.body/>
</div>
<!-- Adsense giữa Posts adsenseMiddleitbinhdan -->
<b:if cond='data:blog.pageType == "item"'>
<style>
#addcodemiddle{display: none;}
</style>
<div id='addcodemiddle'><br />
<!-- Adsense code here -->
</div>
<script type='text/javascript'>
var str1=document.getElementById("adsenseMiddleitbinhdan").innerHTML;
var str2=str1.length;
var str3=str2/2;
var substr = str1.substring(str3, str2);
var n = substr.search("<br>");
if(n<0)
{
n = substr.indexOf('.');
if(n&lt;0)
{
n=0;
}
var firsthalf = str1.substring(0, str3+n+1);
var secondhalf = str1.substring(str3+n+1, str2);
}
else
{
var firsthalf = str1.substring(0, str3+n+4);
var secondhalf = str1.substring(str3+n+4, str2);
}
var addcode="<center>"+document.getElementById("addcodemiddle").innerHTML+"</center><br/>";
var newbody=firsthalf+addcode+secondhalf;
var strnew=document.getElementsByClassName("post-body entry-content");
strnew[0].innerHTML=newbody;
document.getElementById("addcodemiddle").innerHTML="";
</script>
</b:if>
<!-- Adsense giữa Posts adsenseMiddleitbinhdan -->

Thay dòng <!-- Adsense code here --> bằng code Adsense đã được chuyển về HTML. Lưu template lại là xong rồi đó.

Chúc các bạn thành công.


Mục lục:




Phụ lục 2: Demo chèn Adsense vào sau Paragraph thứ 1


Với một số template đã được tùy biến, nhất là những template bán trên thị trường, thì lập trình viên thường sẽ soạn sẵn ra một dòng để ta chỉ việc chuyển code Adsense từ HTML sang XML rồi dán vào ô đó mà thôi. Ví dụ như cái template của itbinhdan hiện nay là code của Arlina, có sẵn một khung để chèn Adsense vào:



Nếu dán code Adsense vào vùng đó (đã chuyển từ HTML sang XML) thì ta thấy banner quảng cáo hiện ở đầu bài, nhìn xấu và gây ức chế, vì ngay phần trên đã có 1 cái banner quảng cáo chính giăng ngang cả trang rồi:


Template này có sẵn 2 vùng để chèn code adsense vào, một cái ở đầu trang, một cái ở cuối trang. Cả 2 vị trí này khá tệ, nên tôi sẽ xóa bỏ và chỉ giữ lại phần <data:post.body> để có thể chèn adsense code sau paragraph thứ 1.



OK, giờ ta có thể dựng demo để hiểu rõ hơn cơ chế chèn Adsense sau đoạn paragraph thứ 1 của blogger là như thế nào.

Thay toàn bộ cái <data:post.body> bằng đoạn sau

<b:if cond='data:blog.pageType == "item"'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE CODE HERE</div></b:if>
<div id='adsense-target'><data:post.body/></div>

Dán tiếp đoạn code này ngay sau các dòng trên:

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>


Dán code ADSENSE vào chỗ ADSENSE CODE HERE ta có quảng cáo như sau:



Quảng cáo hiện cũng ổn đấy, nhưng nó lại nằm ngay dưới cái hình poster chính của bài (là hình mà template này sẽ dùng làm ảnh đại diện thu nhỏ cho cả bài ở trang đầu) nên không được tốt cho lắm. Lúc này ta sẽ cho cái Adsense dịch xuống một paragraph nữa, tức là xuống dưới đoạn thứ 2. Thay số 0 bằng số 2 ta có


OK, ngon lành rồi đó. Bạn có thể xem chi tiết demo ở trang này Mẹo làm Mộc: Mâm pha keo Cá Gỗ - Sạch, Gọn, Rẻ, Đẹp, Bền

Chúc các bạn thành công.

Related Posts