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:

   <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:
   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;”.

   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:

<div class=’post-header-line-1′/>

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.

Share and contribute or get technical support and help at My Digital Life Forums.

Related Articles

• Place AdSense Ad Unit In Various Positions Inside Within Blogger Post Contents
• Move Blogger Inline Ads Between Posts to Inside Within Post Position
• How to Display Elements (Ads) Only On (Or Only Not At) Individual Single Post Item View
• Add and Insert to Put Google AdSense Ads Units Between Blog Posts in Blogger.com
• Google AdSense Policy Update Disallows Image Besides Ads Blocks
• Trick to Add AdSense, AdBrite and Other JavaScript Ad Code Directly to Blogger HTML Template
• Change to ads about Feature in Google Adsense Ads
• google_ad_host Host ID in Google AdSense Ad Unit Code and Revenue Sharing
• AdSense Help Group for AdSense Publishers
• AdSense New Ads Style with Horizontal Image and Ad Links

This entry was posted on Saturday, September 22nd, 2007 at 12:03 am and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.