Add Adsense In the Middle of Posts or Anywhere in Blogger Content

Ad placement and customization has been written and discussed much in the webosphere. In fact, a famous heat map detailing the ideal places for a higher click through rate (CTR) has been floating around for quite a few years now. Then, Google also has a dedicated help section outlining the best positions for ads on blogs, forums, and sites covering the news, classifieds and gaming.

For blogs, an ad unit somewhere in the middle of your post can potentially boost your CTR, especially if its a lengthy post with fewer images. Unfortunately, unlike WordPress which has a number of excellent plugins for injecting ads anywhere in your blog, blogger does not have this options.


But thanks to a simple JavaScript solution developed by adsinthemiddle, you can place your Adsense code within a post - anywhere.

Its worth noting that this method does not, by anyway violate the Adsense policies.

1. To Manually Display Ads In The Middle of Selective or Every Post:


Manually inserting Adsense ads in the middle of posts in blogger is pretty simple, here are two easy steps to do so:

  • Before proceeding, do backup your template as a precaution.

Step 1: On New Blogger (Post Designer Template):

Tick 'Expand Widget Templates' in Blogger console and find <data:post.body/>. Now, replace it with the following code:

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

    <!-- Your adsense code here -->

</div>

<div expr:id='"aim2" + data:post.id'>

    <data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>


Note: In the above code, replace <!-- Your adsense code here --> with your actual Adsense code.

On Old Blogger (Pre-Designer Template):

Find the tag <$BlogItemBody$> and replace it with a parsed copy of the following code:

<div id="prv<$BlogItemNumber$>"></div>

    <div style="clear:both;margin:10px 0">

        <!-- Your AdSense code -->

    </div>

    <div id="fst<$BlogItemNumber$>">

        <$BlogItemBody$>

    </div>

    <script type="text/javascript">
    var obj0=document.getElementById("prv<$BlogItemNumber$>");
    var obj1=document.getElementById("fst<$BlogItemNumber$>");
    var s=obj1.innerHTML;
    var r=s.search(/\x3C!-- adsense --\x3E/igm);
    if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
    </script>


Note: Replace <!-- Your adsense code --> with your actual Adsense code.


Step 2:

Now, where ever you wan't your ad unit to appear, put a special comment:

<!-- adsense -->

Done.

2. Adding Featured Posts in the Middle (or anywhere) on your post.


Similarly, using the above code we can add a featured post in the middle of our content.
Earlier, I shared a simple blogger related posts widget. Using the above JavaScript, lets see how we can add that related widget posts in the middle of an article.

The idea remains the same. Just for differentiating, replace the word 'adsense' with 'related' in both, the JavaScript and special comment. Then place the related post code as in the code below:

For instance:

On New Blogger (Post Designer Template):

Tick 'Expand Widget Templates in the Blogger console and find <data:post.body/>. Now, replace it with the following code:


<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
 <script type="text/javascript">
  relatedPostsWidget({
  'containerSelector':'div.post-body'
  ,'loadingText':'loading...'
 });</script>

</div>

<div expr:id='"aim2" + data:post.id'>

    <data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- related --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>


Step 2:

Now, wherever you want your related posts to appear, put a special comment:

<!-- related -->

Done!
Labels: ,
  1. Replies
    1. really nice info. i would like another link to valuable users put adsense ads inside posts

      Delete
  2. What happens if specification of is forgotten? will the post remain without adsense?

    Amfas Tech

    ReplyDelete
    Replies
    1. If you don't add the code in step 2, Adsense won't display on those posts.

      Delete
  3. http://2.bp.blogspot.com/-ojXx4wlhSIA/UrHJ3PJkGMI/AAAAAAAAQGs/CBnDXYZTT44/s1600/19.png

    hye do u know how to fix this problem?

    ReplyDelete
    Replies
    1. You can always post your template related problems in the blogger help forum here: http://productforums.google.com/forum/#!categories/blogger/something-is-broken

      Do leave your URL address there so that come one can look up the source code to identify the problem.

      Delete
  4. not working on articlesengineering.blogspot.com

    ReplyDelete
    Replies
    1. You are right Arbab. Just saw that this code no longer works for the new blogger. However if you need to show Adsense automatically in the middle of EVERY post, this trick still works. I have mentioned the developer's blog in the post above: http://adsinthemiddle.blogspot.com/ Just make sure you copy the one for every post code and replace it with the SECOND [ data:post.body/ ] CODE in your template.
      I'm looking for a fix for this one.

      Delete
  5. how to put adsense ads in the beside of the postslike you(medium triangle ads) and is that legal?if yes then plz reply me i posted image plz see that image i marked with orange color

    https://www.mediafire.com/?i5x323097w0ha35

    ReplyDelete
    Replies
    1. Just float a div like this.

      [div style='margin: 0px 0px 15px 10px; float:right']
      YOUR_ADSENSE_CODE
      [/div]

      And place it above the [data:post.body/] tag in you template. Be sure to replace [ ] with < >.

      Delete
    2. And Yes!, its totally legal.

      Delete
  6. not working bro plz resolve my problem

    ReplyDelete
    Replies
    1. Oh, I totally forgot to tell you that any code you enter within the post area should be parsed. Use this link to parse your Adsense code:
      http://techmarshal.blogspot.com/p/online-html-escape-tool-parser-encoder.html

      and here is a screen shot: http://i58.tinypic.com/2jb1kiv.png

      Again, its totally legal to parse the adsense code. Its even discussed on the Google Adsense forum.

      Hope its clear now. :)

      Delete
  7. I have blog with 1 month, can i use adsense

    ReplyDelete
    Replies
    1. You only have four posts on your blog. I would recommend that you add more stuff and remove the ads that you have before applying for Adsense. Else they will reject your application.

      Delete
  8. Works Great. Thanks for sharing..

    regards
    JelBee

    ReplyDelete