Tự động cài đặt mã quảng cáo Adsense vào giữa bài viết blogspot/blogger có thể tùy chỉnh vị trí theo số lần xuống dòng <br/> hoặc <p>......</p> là vấn đề quan tâm của nhiều người.
Chèn sao cho tối ưu, phù hợp vị trí là điều nhiều người mong muốn. Việc chèn được nhiều quảng cáo vào trong bài viết ở các vị trí chỉ định trước là điều không hề đơn giản. Bài này hướng dẫn các bạn 4 cách chèn quảng cáo vào giữa bài viết.
+ Cách 1: Chèn 4 quảng cáo vào trong bài viết với 2 vị trí trên cùng sau tiêu đề và dưới cùng cuối bài viết, cộng thêm 2 vị trí ở giữa bài viết có thể tùy chỉnh vị trí theo số lần xuống dòng(p, br) của bài viết.
+ Cách 2: Tự động chèn quảng vào trong nội dung bài viết như cách 1 nhưng chỉnh vị trí theo phần trăm độ dài bài viết.
+ Cách 3: Tự động chèn nhiều quảng cáo Adsense vào giữa bài viết tùy chỉnh vị trí.
+ Cách 4: Tự động chèn duy nhất 1 vị trí quảng cáo ở giữa bài viết.
I- Chèn quảng cáo giữa bài viết tùy chỉnh vị trí theo thẻ p hoặc br
Bước 1 Thêm CSS.postAdin .widget,.postAdin .widget-content{margin:0 !important;padding 0}
.postAdin h2{display:none !important}
#coke-postad0 ins,#coke-postad1 ins,#coke-postad2 ins,#coke-postad3 ins{margin:20px 0}
.post-body #coke-postad0,.post-body #coke-postad1,.post-body #coke-postad2,.post-body #coke-postad3{text-align:center;display:block}
Bước 2 Thêm Tiện ích.Thêm vào ngay sau thẻ đóng </b:section> của phần main như hình
<b:section class='postAdin' id='PostAdin0' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML996' locked='true' title='Ads in post custom' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType in {"item"}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='coke-postad0'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='postAdin' id='PostAdin1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML997' locked='true' title='Ads in post custom-1' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType in {"item"}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='coke-postad1'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='postAdin' id='PostAdin2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML998' locked='true' title='Ads in post custom-2' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType in {"item"}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='coke-postad2'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='postAdin' id='PostAdin3' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML999' locked='true' title='Ads in post custom-3' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType in {"item"}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='coke-postad3'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
Lưu ý: Không được xóa tiêu đề tiện ích.
Code HTML trên là dùng cho template verson 1, hiện nay chủ yếu dùng verson 2 thì code này cần thay đổi một chút như dưới.
<b:section class='postAdin' id='PostAdin0' showaddelement='false'>
<b:widget cond='data:view.isPost' id='HTML996' locked='true' title='Ads in post custom' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<div class='widget-content'>
<div id='coke-postad0'>
<data:content/>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
Tại phần CSS cần đổi h2 thành h3, trong chỉnh sửa cần chính xác nếu không code không hoạt động.
Đây là ví dụ cho 1 section, các section khác cũng tương tự.
Bước 3 Thêm javascript vào trước thẻ đóng </body>
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/
function insertAfter(addition, konten) {
var parent = konten.parentNode;
if (parent.lastChild == konten) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition, konten.nextSibling);
}
}
function insertAbove(addition, konten) {
var parent = konten.parentNode;
parent.insertBefore(addition, konten);
}
function insertBellow(addition) {
var parent = konten;
parent.appendChild(addition);
}
var tdb0 = document.getElementById("coke-postad0");
var tdb1 = document.getElementById("coke-postad1");
var tdb2 = document.getElementById("coke-postad2");
var tdb3 = document.getElementById("coke-postad3");
var konten = document.getElementById("body-post-it");
var lokasi = konten.getElementsByTagName("br");
if (lokasi.length > 0) {
insertAbove(tdb0,konten);
insertBellow(tdb3);
}
if (lokasi.length > 3) {
insertAfter(tdb1,lokasi[3]);
}
else {
tdb1.innerHTML = "";
}
if (lokasi.length > 10) {
insertAfter(tdb2,lokasi[10]);
}
else {
tdb2.innerHTML = "";
}
/*]]>*/</script>
</b:if>
Ở đây mặc định atdbg0 và atdbg3 là một ở trên đầu và một ở cuối cùng bài biết, còn lại atdbg1 và atdbg2 là 2 cái nằm ở giữa bài viết có thể căn chỉnh theo lần xuống dòng <br/> của bài viết bằng cách căn các giá trị 3 và 10 theo ý thích. Nếu blog dùng thẻ <p> thì có thể thay br trong code thành p.Ví dụ 3 là quảng cáo sẽ xuất hiện tại vị trí xuống dòng lần thứ 3.
Bước 4
Để code hoạt động được bạn cần thay
<data:post.body/>Thành
<div id='body-post-it'> <data:post.body/> </div>Bước 5
Bạn chỉ việc vào bố cục tìm các tiện ích sau đó dán code quảng cáo vào rồi lưu lại.
Mặc định là có 4 tiện ích ở 4 vị trí nhưng dùng bao nhiêu cái ở vị trì nào thì bỏ code QC vào tiện ích đó còn không dùng cái nào thì tắt cái đó đi.
Lưu ý
Nếu bạn muốn có nhiều hơn 2 vị trí để tùy chỉnh thì bằng cách sửa lại chút javascript để 2 vị trí 0 và 3 không là đầu và cuối mà có thể tùy chỉnh như 1 và 2.
Có thể kết hợp bài này và bài Tại đây
Với việc gộp 2 đoạn javascript lại với nhau để có 2 in 1
II- Chèn quảng cáo giữa bài viết tùy chỉnh vị trí theo phần trăm độ dài bài viết
Code này blog dùng thẻ br hay p để xuống dòng đều dùng ngay được không cần sửa code.DEMO
Bước 1 Thêm CSS
#ad-ct1,#ad-ct2,.ads2{margin:10px auto;display:inline-block;width:100%;}
.ads1{float:left;margin-bottom:10px;width:100%}
Bước 2 Thêm javascript vào trước thẻ </body>
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/
function insertAfter(tbh,tgt) {
var prt = tgt.parentNode;
if (prt.lastChild == tgt) {prt.appendChild(tbh);}
else {prt.insertBefore(tbh,tgt.nextSibling);}}
var tgt = document.getElementById("konten");
var ad1 = document.getElementById("ad-ct1");
var ad2 = document.getElementById("ad-ct2");
var tg1 = tgt.getElementsByTagName("p");
var tg2 = tgt.getElementsByTagName("br");
var pt1 = tg1.length; var pt2 = tg2.length;
var ps1 = pt1*20/100; var ps2 = pt1*65/100;
var br1 = pt2*20/100; var br2 = pt2*65/100;
var bl1 = Math.round(ps1); var bl2 = Math.round(ps2);
var bk1 = Math.round(br1); var bk2 = Math.round(br2);
if (pt1 > 2) {
insertAfter(ad1,tg1[bl1-1]); insertAfter(ad2,tg1[bl2-1]);
} else if (br2 > 1) {
insertAfter(ad1,tg2[bk1-1]); insertAfter(ad2,tg2[bk2-1]);
} else {}
/*]]>*/</script>
</b:if>
Trong đó:
Trị số 20 tùy chỉnh cho ads thứ 2 trong 4 mã ads
Trị số 60 tùy chỉnh cho ads thứ 3 trong 4 mã ads
Ads thứ nhất và thứ 4 mặc định là ở đầu và cuối bài viết
Bước 3 Cài đặt phần HTML
Tìm thẻ <data:post.body/> sẽ có vài thẻ như vậy nên đành phải thử từng thẻ(Nhớ lưu mẫu trước đề phòng sai sót) và thay nó bằng đoạn HTML sau
<div class='ads1'> <!-- Mã QC dán ở đây(Ad top) --> </div> <div id='ad-ct1'> <!-- Mã QC dán ở đây(Tùy chỉnh) --> </div> <div id='konten'> <data:post.body/> </div> <div id='ad-ct2'> <div style='clear:both;'> <!-- Mã QC dán ở đây(Tùy chỉnh) --> </div> </div> <div class='ads2'> <!-- Mã QC dán ở đây(Ad bottom) --> </div>Lưu ý:
Với những mẫu blogspot chia sẻ ví dụ như mẫu Litepost họ đã tích hợp sẵn 2 vị trí top và bottom là 2 tiện ích thường ở ngay dưới bài đăng trên blog trong phần bố cục thì nên bỏ đi 2 khu vực là ads1 và ads2 chỉ giữ lại 2 cái có thể tùy chỉnh vị trí trong code HTML ở trên.
III- Chèn nhiều quảng cáo trong bài viết tùy chỉnh vị trí
Vào chỉnh sửa mẫu tìm tới thẻ đóng </b:section> của phần main nó như bên dưới(kết thúc phần main Blog1)</b:section>
</main>
Và thêm vào trước nó những widget để chứa quảng cáo.
<b:widget cond='data:view.isPost and !data:view.isPreview' id='HTML01' locked='true' title='Middle Post Ad 01' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<!--[ Middle article Ad ]-->
<data:content/>
<!--[ Script to move widget to the middle of article ]-->
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd01 = document.getElementById("HTML01"); var showAd01 = tgt.getElementsByTagName("br"); if (showAd01.length > 0) {insertAfter(midAd01,showAd01[1]);}; /*]]>*/</script>
</div>
</b:includable>
</b:widget>
<b:widget cond='data:view.isPost and !data:view.isPreview' id='HTML02' locked='true' title='Middle Post Ad 02' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<!--[ Middle article Ad ]-->
<data:content/>
<!--[ Script to move widget to the middle of article ]-->
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd02 = document.getElementById("HTML02"); var showAd02 = tgt.getElementsByTagName("br"); if (showAd02.length > 0) {insertAfter(midAd02,showAd02[9]);}; /*]]>*/</script>
</div>
</b:includable>
</b:widget>
<b:widget cond='data:view.isPost and !data:view.isPreview' id='HTML03' locked='true' title='Middle Post Ad 03' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<!--[ Middle article Ad ]-->
<data:content/>
<!--[ Script to move widget to the middle of article ]-->
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd03 = document.getElementById("HTML03"); var showAd03 = tgt.getElementsByTagName("br"); if (showAd03.length > 0) {insertAfter(midAd03,showAd03[29]);}; /*]]>*/</script>
</div>
</b:includable>
</b:widget>
<b:widget cond='data:view.isPost and !data:view.isPreview' id='HTML04' locked='true' title='Middle Post Ad 04' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<!--[ Middle article Ad ]-->
<data:content/>
<!--[ Script to move widget to the middle of article ]-->
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd04 = document.getElementById("HTML04"); var showAd04 = tgt.getElementsByTagName("br"); if (showAd04.length > 0) {insertAfter(midAd04,showAd04[49]);}; /*]]>*/</script>
</div>
</b:includable>
</b:widget>
Ở đây là 4 widget có thể thêm hoặc bớt tùy nhu cầu nếu thêm thì thì thêm 1 widget ngay sau HTML04 và sửa tất cả là 05. và lưu ý không để trùng lặp ID HTML. Nếu blog dùng thẻ p để xuống dòng thì đổi br trong js thành p. Sau đó vào bố cục để thêm code QC vào tiện ích vừa tạo và điều chỉnh vị trí QC bằng cách thay đổi trị số ví dụ ở code mẫu là 49.
{insertAfter(midAd04,showAd04[49]);}
Kiểm tra xem thẻ div bao thẻ <data:post.body/> đã có id='postBody' chưa nếu chưa có mà chỉ có class thì thêm id='postBody' vào.
Trường hợp có class và id nhưng id không phải là postBody thì nên sửa 'postBody' trong javascript của code giống với id trong thẻ div của mẫu và nhớ sửa tất cả các javascript trong các widget đã thêm vào.
IV- Chèn duy nhất 1 vị trí quảng cáo ở giữa bài viết
Bước 1: Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTMLTìm đến thẻ hiển thị nội dung bài viết <data:post.body/> và thay thẻ này bằng đoạn code sau
Lưu ý:Do thiết kế template có nhiều khác nhau nên thẻ trên có thể không nằm trong thẻ điều kiện nào nhưng cũng có thể nằm trong thẻ điều kiện do vậy chú ý thẻ nằm trong thẻ điều kiện chỉ xuất hiện ở trang bài viết(item)
<div expr:id='"zet1" + data:post.id'/>
<div class='googlezet'>
Chèn code quảng cáo của bạn ở đây
</div>
<div expr:id='"zet2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("zet1<data:post.id/>");var obj1=document.getElementById("zet2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
Bước 2: Thêm đoạn css này vào trước thẻ đóng ]]></b:skin>.googlezet{margin:15px auto;text-align:center}