How to Wrap AdSense Ads Around and Inline Beside Blogger Post Content

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 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.

   

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.

   

5. Click to tick the Expand Widget Templates checkbox.

   

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

   or

   

7. Append the following lines of code into the template BEFORE the line of located above:
   Parsed Google AdSense Ad Code (guide to parse the HTML code of AdSense JavaScript with escape character)

   

   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.

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:

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.