Blogger: Ad Sense Inside Posts

Automatically Place Ad Sense in Posts
A great many websites insert advertisements within content. The methods vary from innocuous to downright obnoxious. Sometimes people just do not know when enough is enough, keywords with hover ads are the worst. However, developers place ads this way because it's the most effective way to draw attention and generate revenue.

Blogger provides an easy method to insert ads above or below posts automatically. Advertisements in the sidebars is also easily done. The three most popular ad units with advertisers are the Leaderboard (728x90px), Medium Rectangle (300x250px) and Wide Skyscraper (160x600px). These units tend to get the best ads. However, each presents design problems with bloggers default setup.

Best Ads Present Problems

Websites tend to work best when there is an established sense of flow. Advertisements which significantly interrupt that flow reduce visitor interest. Bloggers built in option to place ads above and below really only work well with short, wide ads that break up text minimally. A Medium Rectangle or Wide Skyscraper leaves lots of empty space and make pages difficult to read. Our goal must be to place ads in logical places so they act much as an interesting and relevant image.

A Solution

It is a simple task to place any narrow ad at the top of a post, then have text elegantly flow around. Start by logging into your Ad Sense account. If you haven't created an Ad Unit already, set one up now. Next open up your blog Design->Edit HTML view and check Expand Widget Templates. Hit Ctrl+F and search for <data:post.body/>. Now, just before paste this html:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='item-ad' style='float: left;margin-right: 5px;'>
      Advertisement
   </div>
</b:if>

This places a box, floated to the left for your ad. Now, return to ad sense and copy the ad code you'd like to use. Replace the word Advertisement with your ad code. Finally, the ad code contains these two bits <!-- and //-->. Replace those respectively with &lt!;-- and //--&gt;. Your code should resemble this example:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='item-ad' style='float: left;margin-right: 5px;'>
      <script type='text/javascript'>&lt;!--
          google_ad_client = &quot;ca-pub-999999999999999999&quot;;
          google_ad_host = &quot;pub-9999999999999999999&quot;;
          /* Item Ad - JSBlogStop */
         google_ad_slot = &quot;9999999999&quot;;
         google_ad_width = 300;
         google_ad_height = 250;
         //--&gt;
     </script>
     <script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
     </script>
   </div>
</b:if>

Results

Save your template and if you've done things correctly whenever you visit an individual post page your ad should display floated and appear much as this post does as of this posting.. Almost any appropriate sized ad may be used and the best choice depends upon the blog design you have. I suggest something modest compared to the post size if possible.

Conclusion

I presented just one option for inserting advertisements automatically into blog posts. It is best suited to sites using jump breaks within posts on the main page, since no ads from this code will appear there. You may however adjust the code further to fit your blogs setup such as floating the div to the right, altering the div margins or removing the <b:if> tag so ads appear on the main page. Try out the tweak, then adjust things to your liking. I'm frequently available to help and best reached through the comments or @JSBlogStop on Twitter if you have problems.

Support JSBlogStop:

Donate with Dwolla