Chèn quảng cáo giữa bài viết tùy chỉnh vị trí cho blogspot

Tự động chèn quảng cáo vào trong bài viết đối với blogspot 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 3 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 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
Chèn quảng cáo giữa bài viết tùy chỉnh vị trí cho blogspot
<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 {&quot;item&quot;}'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
  <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 {&quot;item&quot;}'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
  <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 {&quot;item&quot;}'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
  <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 {&quot;item&quot;}'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
  <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.
Bước 3 Thêm javascript vào trước thẻ đóng </body>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>
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(&quot;coke-postad0&quot;);
var tdb1 = document.getElementById(&quot;coke-postad1&quot;);
var tdb2 = document.getElementById(&quot;coke-postad2&quot;);
var tdb3 = document.getElementById(&quot;coke-postad3&quot;);
var konten = document.getElementById(&quot;body-post-it&quot;);
var lokasi = konten.getElementsByTagName(&quot;br&quot;);
if (lokasi.length &gt; 0) {
 insertAbove(tdb0,konten); 
 insertBellow(tdb3);
} 
if (lokasi.length &gt; 3) {
    insertAfter(tdb1,lokasi[3]);
} 
else {
 tdb1.innerHTML = &quot;&quot;;
}
if (lokasi.length &gt; 10) {
    insertAfter(tdb2,lokasi[10]);
} 
else {
 tdb2.innerHTML = &quot;&quot;;
}
</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.
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.
Lưu ý
Có thể kết hợp bài này và bài
Cài đặt bài viết liên quan trong bài viết tùy chỉnh vị trí cho blogspot
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


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>
     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(&quot;konten&quot;); 
       var ad1 = document.getElementById(&quot;ad-ct1&quot;);
       var ad2 = document.getElementById(&quot;ad-ct2&quot;);
       var tg1 = tgt.getElementsByTagName(&quot;p&quot;); 
       var tg2 = tgt.getElementsByTagName(&quot;br&quot;);   
       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 &gt; 2) {
           insertAfter(ad1,tg1[bl1-1]); insertAfter(ad2,tg1[bl2-1]);
       } else if (br2 &gt; 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 duy nhất 1 vị trí quảng cáo ở giữa bài viết


DEMO

Bước 1: Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Tì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='&quot;zet1&quot; + data:post.id'/>
<div class='googlezet'>
Chèn code quảng cáo của bạn ở đây
</div>
<div expr:id='&quot;zet2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;zet1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;zet2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;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}

Ads in post custom1