When you look to the top left corner of this article, there is a Google AdSense ads unit block that has a style that is aligned inline beside and wrapped the article body (only on single post view). This format of layout is considered and proofed to be able to generate higher CTR (click through rate) for AdSense ads, directly increasing the revenue publisher earned. The new Blogger service with widget-based XML template allows authors at best to insert AdSense ad blocks in between blog posts by using AdSense or HTML/JavaScript page elements, but not inline within and wrap around blog post itself.

Here’s the trick and hack on how to put AdSense ads in within and beside of Blogger.com blog post body, and has the content wraps around the ads to make the ads look like part of the content. Coupled with using ad colors which blend the borderless ads to the blog overall color scheme, and choosing bigger ad format such as 336×280 large rectangle or 300×250 rectangle will definite optimize placement of AdSense ads, increase ads click thru rate and improve publishers income. Beside, the AdSense ads put in by this trick will also be shown and displayed in the blog main page, or when individual blog post content page is visited.

  1. Login to Blogger account.
  2. At Blogger Dashboard, click or tap on More Options down arrow, and then select Template in the menu for the blog that you want to enable to show AdSense ads wrapped around the article.
  3. Before starting to edit, it’s recommended to download a backup of template so that the existing template can be re-uploaded to Blogger server for recovery in the event of mistake or corruption. To do so, click or tap on Backup / Restore button, and then hit on Download Full Template button.

    Blogger Download Full Template

  4. Click or tap on Edit HTML button to open Blogger HTML code template editor to edit the contents of your template.

    Blogger Edit HTML

  5. Click or tap on Jump to widget drop down list, and select Blog1.
  6. Locate the following line, and click or tap on … or expand the arrow on the left to expand the code section.
    <b:includable id='post' var='post'>...</b:includable>

    Edit Post Template of Blogger

  7. Seach for the following line in the new Blogger template HTML code in the text box:
    <data:post.body/>

    or,

    <p><data:post.body/></p>
  8. Append the following lines of code into the template BEFORE the line of <data:post.body/> located above:
    <div style="float: left;">
Parsed Google AdSense Ad Code (guide to parse the HTML code of AdSense JavaScript with escape character)
</div>

    AdSense Ad Code in Blogger Template

    Note
    The above code will align AdSense ad block to the left. You can also make it make it float to the right, but change the “float: left;” to “float: right;”.
    Note
    Some user reported that you may need to use only single quote (‘) instead of double quote (“) for it to work, i.e. ‘float: left’ and not “float: left”.
    Note
    you can also make the ads appear only on single post view.
  9. Click on Save template button when done.
If your website is dynamic and fully responsive, there may be code specifically for mobile devices too. Look for the following line, and make the similar change to apply inline Google AdSense ads to mobile UI:

<b:includable id='mobile-post' var='post'>...</b:includable>
Note
If the alignment of your blog layout is not good, you can try to add the code above directly after the following line in the Blogger widget template:

<div class='post-header-line-1'/>

The following guide applies to Blogger of older user interface, and is left here for reference purpose.

  1. Login to Blogger account.
  2. At Blogger Dashboard, click on Settings link listed behind “Manage” for the blog that you want to enable to show AdSense ads between posts.
  3. Click on Template tab, and then click on Edit HTML sub-tab link to open Blogger HTML code template editor to edit the contents of your template.

    Blogger Edit HTML

  4. Backup a copy of your template by click on Download Full Template link, in case it’s is needed be uploaded to Blogger server to recover the template in the event of mistake or corruption.

    Download Full Template

  5. Click to tick the Expand Widget Templates checkbox.

    Blogger Expand Widget Templates

  6. Seach for the following line in the new Blogger template HTML code in the text box:

    <data:post.body/>

    or

    <p><data:post.body/></p>

  7. Append the following lines of code into the template BEFORE the line of <data:post.body/> located above:

    <div style="float: left;">
    Parsed Google AdSense Ad Code (guide to parse the HTML code of AdSense JavaScript with escape character)
    </div>

    Note the above code will align AdSense ad block to the left. You can also make it make it float to the right, but change the “float: left;” to “float: right;” (some user reported that you may need to use only single quote (‘) instead of double quote (“) for it to work, i.e. ‘float: left’ and not “float: left”).

    Note that you can also make the ads appear only on single post view.

  8. Click on SAVE TEMPLATE button when done.

The above trick may work to add ad code wrap beside the post content in Blogger from other advertising networks too, such as AdBrite, BlogAds, Chitika, Tribal Fusion, ValueClick, and etc, in case you can’t use AdSense for reason such as account banned. And there are more position inside posts to put AdSense.

Update: Blogger can also add AdSense ads inside post using Ads Between Posts trick.

You May Also Interested In: