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.
- Login to Blogger account.
- At Blogger Dashboard, click on Settings link listed behind “Manage” for the blog that you want to enable to show AdSense ads between posts.
- 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.
- 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.
- Click to tick the Expand Widget Templates checkbox.
- 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>
- 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;” (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.
- 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.
Related posts:
- Add and Insert to Put Google AdSense Ads Units Between Blog Posts in Blogger.com
- Trick to Add AdSense, AdBrite and Other JavaScript Ad Code Directly to Blogger HTML Template
- Workaround to Add Custom Channels into Blogger AdSense Page Element Widget
- google_ad_host Host ID in Google AdSense Ad Unit Code and Revenue Sharing
- Redirect Blogger RSS Feed to FeedBurner for Detailed Statistics and Monetize Ads
thanks
This is not work for my blogger. I have parsed but this error shows.
"Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag " Help me
Anybody? This still isn't working for me, and I've updated it to read like this:
<script type=‘text/javascript’>lt;!–
google_ad_client = ‘pub-8924600030879932’;
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = ‘300x250_as’;
google_ad_type = ‘text_image’;
google_ad_channel = ‘’;
google_color_border = ‘FFFFFF’;
google_color_bg = ‘FFFFFF’;
google_color_link = ‘0000FF’;
google_color_text = ‘000000’;
google_color_url = ‘008000’;
//–>
</script>
<script type=‘text/javascript’ src=&lsquo http://pagead2.googlesyndication.com/pagead/show_ads.js’>” rel=”nofollow”>;http://pagead2.googlesyndication.com/pagead/show_ads.js’>
</script>
I've used the double quotes and single quotes, so that isn't the problem. I'd appreciate any help I can get to accommplish getting the ad in my posts.
I tried to use this code, but received this error message when I tried to save the template:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "style".
This is what I typed in to the template:
<script type=“text/javascript”>lt:!–
google_ad_client = “pub-8924600030879932”;
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = “300x250_as”;
google_ad_type = “text_image”;
google_ad_channel = ““;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “0000FF”;
google_color_text = “000000”;
google_color_url = “008000”;
//–>
</script>
<script type=“text/javascript”
src=&ldquo http://pagead2.googlesyndication.com/pagead/show_ads.js”>” rel=”nofollow”>;http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
Can you tell me what I'm doing wrong? Thank you!
Thank you very much for sharing such a valuable information! It worked for me.
This really worked for me. Thanks a lot for helping me.
hi i find your code useful and i have use it in my blog but i have one problem, i find the distance between post title and content is so close. is there any way for me to add some space between them? thanks
Woooooow…. i had try more tips for showing ads after title post. but, never work. But , your tutorial is very good and absolutely its work now,…!!! thank you very much….
god Bless you !!!
[...] of click through rate (CTR). A lot of bloggers have put Google AdSense ad code inside the post or wrap the ad unit around blog post by editing template’s HTML to insert modified ad code manually. Some users may feel uneasy on [...]
It works. ty !
Hi I have successfully got the adsense unit appearing alongside my text using the float right but unfortunately the alignment is out. The adense unit appears 2-3 lines higher than the first line of text. How do I fix this please?
You are great guru. Can you help me how to add 'read more'… plz show me the path. Thanks a lot.
Thanks you so much very helpfull
but how if we use read more??
how to show ads
like this code,i want to show ads inline but im use read more
.fullpost{display:inline;}
<script type="text/javascript"><!–
google_ad_client =
but i got error
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "style".
Very helpful for WordPress users too. The 'float' command was exactly what I needed for my WP blog. Thx s'muches!
[...] are using Google Blogger, you’ll find How to Wrap Your Blogger Post Around Google Ads? and How to Wrap AdSense Ads Around and Inline Beside Blogger Post Content very [...]
Thank you
wow.. great info.. many tks.. ill try it
[...] by selecting the rectangular 336×280 “adsense for content“ ad from adsense, and placing it only once in “Blogger” using this guide, so that the ad blends in with the [...]
好 支持 写的不错
[...] How to Wrap AdSense Ads Around and Inline Beside Blogger Post Content [...]
Thanks dude..it work..
i followed each and every step but why is it that the adsense ad is not wrapped in the text. it's aligned on the left instead and above the post.
what i want is to have the text around the adsense ad
Please help..
thanks
Thanks for this article. I've being going nuts trying all sorts of things to get the text to wrap around my adverts, but it was this article that finally cracked it. It's so simple when you know how. THANKS!
@debashish
This will only work on blogger classic, looks to me like the error you mentioned is from trying to use this on Blogger with Templates (or blogger beta/new blogger)
Is there a way to get this to work on blogger beta
Hi i tried to add ads between post by editing the blogger posts but unsuccessful.Message was" Try to remove the errors from this page" while trying to save the changes.
Help please!!
this works for the beta blogger, but how about for the old blogger? will this work too? how?
After you use the parsed code above, when you view source HTML code, the adsense ad code is exactly the same as you see in AdSense account. So effectively there is no change at all.
Hello. Is it okay to use the codes above. Will it not violate the Adsense TOS? Please reply. Thanks.
editing the google adsense code violate google terms ??? isnt it ? is it safe to use the above method
[...] it won’t be shown on homepage, label or category pages, or archive pages. For example, while wrapping the AdSense ads manually beside the post content, you can make the ads displayed only when individual posts are viewed by adding above 2 lines to [...]
[...] is trick to add Google AdSense and other advertising network such as AdBrite ad unit right beside and inside [...]