Put AdSense Ads Inside Your Blogger Post

The aim of this tutorial is to place a div content inside another div content.

One interesting application for this tutorial is for Blogspot users who want to place their ads within their posts. Yup, you read it right, not just above nor below the content but within the article itself.



This feature is not supported by Blogspot as compared with other blogging platforms like WordPress. But thanks to scripts, you can simply re-design your layout to make those ads appear between your posts.

How does it work?

Things to consider first is to use <br /> after each paragraph. This is done by default if you use the HTML editor of Blogspot and setting auto line breaks on Enter in the options menu.

Now, what it does is simply look for the <br /> tag and place the AdSense content there.

How to Do it?

1. First we need to make sure that we have the JQuery set in our template. If not, you can simply place this inside your head tags.
   
   Note that you should only place one jquery.js file in your so make sure that it is not yet added on your template. To check you can simply view the source code (in Firefox and Chrome that is Ctrl+U).
   
   

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
   

   
   
2. After that, we need to edit our template. Open Template and click Edit HTML. Look for:
   
   
   WARNING: Make sure to back up first your template before proceeding.

   <data:post.body/>

   
   Replace it with:
   
   

   <div id="mainPostContent">
    <data:post.body/>
   </div>
   
   <div id="addThisCode">
    <!--PLACE ADSENSE CODE HERE-->
   </div>
   

   
   Make sure to replace the <!--PLACE ADSENSE CODE HERE--> with your actual Google AdSense Code. Most templates might have two < data:post.body /> in their codes, so make sure to replace both.
   
   If you have troubles finding the data:post.body using the new blogger editor, simply follow these steps:
   
   
   1. Click Jump to widget and choose Blog1.
      
      
      
      
   2. Open the Blog1 block and look for a block with an id of Post
      
      
      
      
   3. Open the Post block and press Ctrl+F and search for data:post.body
      
      
   
   
3. Now look for </body> and place this script.
   
   

   <script>
    $addThisCode = $("#addThisCode").html();
    $("#mainPostContent br:lt(1)").replaceWith("<br/>" + $addThisCode + "<br/>");
    $("#addThisCode").remove();
   </script>
   

   
   You can also place this code right after the code on step 2. The only reason we are placing it on the end is because this is the rule of thumb on placing scripts within a page.
   
   
4. Save and view your blog.

If you do everything correctly, you may see your AdSense being placed in between your posts.

I want a different place within my post! How should I do it?

Using the code above, it will basically move your adsense code right after the first paragraph. If you want another position, just replace the br:lt(1) part of the code on step 3 (see line 3) with br:eq(5). You can change the number inside eq() with your desired position.

The number inside the eq() represents the <br /> tag that we will be replacing. Remember also that we are using two <br /> tags after every paragraph. That means if we use 5, we will be moving the adsense code after the third paragraph.

Though, the problem with using big numbers in here is when you have short posts or articles with no paragraphs. This trick may not work and will place your adsense coed below your post.

Will I violate any AdSense Rules in here?

Well, I'm not exactly sure of it. I've checked the AdSense Program Policies set by Google and as far as I know, this trick is not violating any rules.

The section for Ad behavior states that ads should not be altered nor place in an iframe or pop-up dialog. Since we are not using iframe here and the code itself was not at any point been changed, then I guess we are safe here. What we are trying to do is to just re-position the code using jQuery.

I also checked the Ad placement part of the guidelines. Other sites have been using this technique already and the said position, within the posts, is already been in practice by most sites. So I guess we are still obeying the terms of this section.


Anyway, whether you want to do it or not, the choice is still in your hands. Should you have any queries or concerns, feel free to comment below so that we can look at your site. :)

UPDATE [06-04-2015]
Please note that this code would work best with Synchronous version of AdSense. Using on Asynchronous version may give you different results.