Chèn quảng cáo vào vị trí mong muốn trong bài viết blogspot

Bài viết này mình viết dựa theo yêu cầu tại comment này

Chèn ADS vào vị trí thẻ ngắt dòng

Đoạn code bên dưới dùng để di chuyển nội dung của một thẻ <div> vào đúng vị trí thẻ ngắt dòng <!--more-->

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#qcinpost&#39;).html());
$(&#39;#qcinpost&#39;).html(&#39;&#39;);
});
</script> 

Sau đó tìm thẻ <data:post.body/> , thường là có 4 thẻ này các bạn dán đọa code bên dưới vào thẻ cuồi cùng trong template

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='qcinpost'>
        <!-- Qc nhỏ trong bài viết -->
        Nội dung đoạn CODE quảng cáo
    </div>
</b:if>

Khi ta chèn thẻ <div> vào blogspot tự sinh ra đoạn mã <a name='more'></a> và đoạn js trên giúp chọn tất cả các thẻ <a>có thuộc tính name="more" sau đó chèn toàn bộ nội dung trong thẻ <div> có ID được xác định là qcinpost vào trước mỗi phần tử <a> trước đó
Vậy, mở rộng ra theo yêu cầu của bạn ta có thể áp dụng cách sau

Chèn ADS vào 3 vị trí khác nhau trong bài viết

Sử dụng đoạn js bên dưới

$(document).ready(function(){
  var qcinpostContent = $('#qcinpost').html(); // Lấy nội dung của #qcinpost
  var qcinpostTopContent = $('#qcinpost-top').html(); // Lấy nội dung của #qcinpost-top
  var qcinpostBotContent = $('#qcinpost-bot').html(); // Lấy nội dung của #qcinpost-bot
  
  // Chèn nội dung của #qcinpost-top vào sau thẻ <a> có thuộc tính name="ads-top"
  $('a[name="ads-top"]').after(qcinpostTopContent);

  // Chèn nội dung của #qcinpost-bot vào sau thẻ <a> có thuộc tính name="ads-bot"
  $('a[name="ads-bot"]').after(qcinpostBotContent);

  // Chèn nội dung của #qcinpost vào sau thẻ <a> có thuộc tính name="more"
  $('a[name="more"]').after(qcinpostContent);

  // Xóa nội dung ban đầu của #qcinpost, #qcinpost-top, #qcinpost-bot
  $('#qcinpost').html('');
  $('#qcinpost-top').html('');
  $('#qcinpost-bot').html('');
});
  

Tương đương ta cũng sẽ phải sử dụng các đoạn mã sau để hiển thị quảng cáo

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='#qcinpost-top'>
        <!-- Qc ads-top -->
        Nội dung đoạn CODE quảng cáo bên trên
    </div>
    <div id='qcinpost-bot'>
        <!-- Qc ads-bot -->
        Nội dung đoạn CODE quảng cáo bên dưới
    </div>
    <div id='qcinpost'>
        <!-- Qc nhỏ trong bài viết -->
        Nội dung đoạn CODE quảng cáo tại thẻ more
    </div>
</b:if>

Vậy khi ta muốn chèn quảng cáo vào vị trí nào thì ta chỉ việc chèn vào bài viết các đoạn mã bên dưới vào nơi ta muốn hiển thị quảng cáo

<a name="ads-top"></a>
<!--more-->
<a name="ads-bottom"></a>

Phương án này tuy hơi thủ công chút nhưng có thể linh động đặt quảng cáo vào vị trí mà ta mong muốn trong bài viết hoặc

Chèn tự động các đoạn mã vào trước các thẻ h2 trong bài viết

<script>
  $(document).ready(function(){
  // Lấy nội dung của 3 phần tử quảng cáo và lưu trữ chúng trong biến tương ứng
  var adContent1 = $('#ad1').html();
  var adContent2 = $('#ad2').html();
  var adContent3 = $('#ad3').html();

  // Chèn nội dung của quảng cáo 1 vào trước thẻ h2 thứ 2
  $('#Blog1').find('h2:nth-of-type(2)').before(adContent1);

  // Chèn nội dung của quảng cáo 2 vào trước thẻ h2 thứ 3
  $('#Blog1').find('h2:nth-of-type(3)').before(adContent2);

  // Chèn nội dung của quảng cáo 3 vào trước thẻ h2 thứ 4
  $('#Blog1').find('h2:nth-of-type(4)').before(adContent3);
        
  $('#Blog1').find('#ad1, #ad2, #ad3').empty();

});
</script>

Tương tự để hiển thị nội dung quảng cáo bạn sử dụng theo mẫu sau

<div id="ad1">
  <!-- Quảng cáo 1 -->
  Nội dung Quảng cáo 1
</div>

<div id="ad2">
  <!-- Quảng cáo 2 -->
  Nội dung Quảng cáo 2
</div>

<div id="ad3">
  <!-- Quảng cáo 3 -->
  Nội dung Quảng cáo 3
</div>