web analytics

How to add adsense ads in the middle of the content in blogger template?

by
Total Read 327

Middle of the Content is the best performing ad position for me so far among all the 5 Best Ad Positions I discussed earlier. This ad position is so effective as the reader sees the ad while reading your post and if you can blend the ad style with the style of the content then the reader will definitely click on it if the ad is relative to the content and valuable to the reader’s interest.

I am going to discuss two ways, both ways required you to setup a bit of jQuery code in your template initially. Where the ways differ is that in the second way, you have to EDIT HTML of your content (post or page).

Both of the ways, require jQuery, those one with good JS understanding can implement this without jQuery.

Method One: 

First of all, go to the Template menu and then go to Edit HTML to edit the HTML of your template.

This will bring up the code editor, then, find the <data:post.body/>

PLEASE NOTE: It can be that you have multiple <data:post.body/> in your template. If you do not know which one is the actual one working then please read the following post to find out or simply watch the following video tutorial first.

First of all, wrap the <data:post.body/> with a <div/> with class postBody as follows,

<div class="postBody">
 <data:post.body/>
</div>

Now we have to add a bit of Jquery code here. Copy & Paste the following code after the wrapper <div/> postBody

<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
 <script type='text/javascript'>
 //<![CDATA[
 var theInsideContentAd = '<!-- OCN Inside Content --><ins class="adsbygoogle"     style="display:block"     data-ad-client="ca-pub-XXXX"     data-ad-slot="XZXZZX"     data-ad-format="auto"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});'+'<'+'/script>';

 var contentMiddleAdRegex = new RegExp(/<h2>[rnt]*ContentMiddleAd[rnt]*</h2>/gi);
 
 var contentHtml = $('.postBody').html();

 $('.postBody').html(contentHtml.replace(contentMiddleAdRegex,'<div id="content_middle_ad">'+theInsideContentAd+'</div>'));
 //]]>
 </script>
</b:if>

Please note:

  1. Notice the value of the variable theInsideContentAd. This is the ad code that will be placed. You have to escape your ad code to become a JS string. You can use this tool Code to JS String, copy & paste your adsense ad code there and click on JS String, you will get the JS string of your ad code there. Use that JS string as the value of the InsideContentAd.

So from now on, whenever you are editing or writing a new post, write ContentMiddleAd at the place where you want to show the ad in the content and then do the following

  1. Select the text ContentMiddleAd
  2. First click on the Remove Formatting button of your editor. (see the following image) This will remove unnecessary tags or style attributes
  3. Then click on the Format dropdown and select Heading. This will wrap the text in <h2 />
That’s it, you are done. Try it. And let me know if there is any issue implementing. You can watch the following video on this tutorial

Thank you. Take a moment to share 🙏