How To Wrap Content Around Google Adsense Ads
I visit a lot of blogs each day and something that really bothers me is that most blogs that I visit, I itch a little knowing that these hard working authors could squeeze out a few more dollars each day if their Adsense ads were better placed on their blog. This article will show you how to include Google Adsense ads in your post and make them look nice. It’s a quick and easy post for me to publish … and I think it will return a lot for you. So… win/win for all! Enjoy!
Example #1:
The above image is an example of what I see on a lot of blogs. The Adsense code is placed on the post page, but its directly above the content. In all honesty, I think even my 9 year old kid could spot this out as being an advertisement. And lets face it… “People Hate Ads” … I don’t click on them, neither do you and the same goes for your readers if your ads are poorly positioned.
Example #2:
That looks much better! I have wrapped my post content around the Google Adsense ads. This can make a world of different in how well these ads perform for you on your blog. Here is how to do it.
Step One: Open and make a back up copy of your style.css file.
*This file is located in your /wp-content/themes/YOUR THEME/ folder.
Step Two: Download my Adsense Wrap and insert the code in your style.css file.
Step Three: Open and make a back up copy of your single.php file.
*This file is located in your /wp-content/themes/YOUR THEME/ folder.
Step Four: Go snag the 200×200 text only Adsense code. The 200×200 is a nice size to work with. It isn’t too large where it will piss your readers off and it fits very nicely when you have content wrap around it. You can also experiment using the 250×250. After you have the Google Adsense code, look for these two line of code in your single.php file :
<h2><a href =”<?php echo get_permalink()
and the <div class=”entry”>
… simply paste your Adsense code in between these two lines as shown in the next image below:
At this point in time, if you were to save your file, the Adsense code would look like Example #1.
Step Five: This is the final step to make Example #1 look like Example #2. Simply add this line of code above your Adsense code:
<div id=”adsense-wrap”>
… and then add this line of code at the very bottom of your Adsense code:
</div>
Here is a screen shot:
DONE!!!! Save your work and refresh you page. Your content should be wrapped very nicely around your Google Adsense Ad.
If you should have any questions, please feel free to leave me a comment below and I will provide assistance for you. This is pretty easy to do and the pay off is great! As always, I enjoy reading your comments and feedback! 
How To Wrap Text Around Images Using CSS In Your Blog Posts?
In this article I want to show you how you can manually insert an advertisement into your post without having the need to find, install and configure a WordPress plugin. Many bloggers many come to a time when they want to promote a product, business or service on their blog...Windows Vista or Bubble Wrap?
What is more important, Windows Vista or bubble wrap? According to my 9 year old son, bubble wrap is more important! Something about a child’s perspective on things that adults feel is important always cracks me up! Microsoft has a multi-billion dollar business and upon receiving a copy of their...How Much Money Is Google Adsense Making You?
I have quite a few sites online and most of them have Google Adsense ads along with a few other programs on the pages. I wanted to open up this post here and invite you to share your experiences with Google Adsense. How long have you been using Google...How To Increase Google AdSense CTR
I received an email from a reader who wanted my advise on increasing his Google AdSense CTR. Here is a copy of his email and below I will provide some tips based off that: Hi Garry, Since you are an expert with adsense (I consider you an expert anyway ....SEOAdMax – Free SEO AdSense WordPress Theme
Best Deals Online Special thanks to Mark Mason for pushing me to get this released. I am pleased to announce SEOAdMax Version 1.0. SEOAdMax is a free, premium grade and very search engine friendly WordPress theme built for all those crazy publishers out there who just absolutely can’t live without...
Great tutorial Gary. You always create great reads. Thanks.
Fred
27 Oct 07 at 8:00 am
This is a good tip Garry!
I simplified mine a bit. I used to just use a div (or span) to complete all of the above in one step:
adsensesqaure.php is the php file I use for my AdSense square. You could also just paste the code there inside the div (or span). Some people prefer everything in the stylesheet, but I have a few things I like to simplify whenever possible
Of course, you can now just use the Shylock AdSense plugin, which also allows you to not show the ads until a set amount of time has passed.
Kyle Eslick
27 Oct 07 at 11:29 am
Hmm, your code command didn’t work. Let me try this again
Kyle Eslick
27 Oct 07 at 11:30 am
Sorry for the spam. Looks like it won’t let me put the code in.
Kyle Eslick
27 Oct 07 at 11:31 am
Hey Kyle,
Thanks for sharing your tips. Drop the code into a .txt file and upload to your server and provide a hyperlink here to it, or just email the code to me and I’ll do the same for you. Also, do you have a write up on the code? If so, then I will edit my article and mention your post as well. Take care buddy.
Garry Conn
27 Oct 07 at 2:06 pm
Thanks for the tip and the approach. I am using Drupal and a plugin to inject the ads, so all I had to do was change the format of the ads from centred to float: left as you suggest, and the job was done in about two minutes including testing and fixing typos.
Now that the change has been made I’ll wait and see by how much it improves revenue.
Allergy Guy
27 Oct 07 at 5:06 pm
You can do the same thing much more simpler. All you need to do is to add the adsense code inside a div tag with style=”float:left”. Refresh the page and you can see adsense or any other ad wrapped with the text.
Nirmal
28 Oct 07 at 3:29 am
See… that is why everyone loves Nirmal… Nice work dude… very nice!
Talk about me making a mountain out of a mole hill again…
Hey man.. come on back and save the day anytime! Thanks for dropping by.
Garry Conn
28 Oct 07 at 3:53 am
For those wondering…
Nirmal is basically suggesting the same thing… but its much easier. Where with my tip, I suggested added the code to your external style sheet where he is saying its easier to add the internal style commands directly in the div tag…
It’s honestly a great tip and will save you a ton of time… I’ll provide a screen shot example… or Nirmal, if you happen to have a moment free before me… drop me a link in the comments with a screen shot and I’ll just use yours.
In the long run… its comments like the above that truly help people the most. Collaborating together to offer the best tips for the bloggers that need them. Thank you Kyle and Nirmal for your contributions here… this is good stuff and I appreciate it.
@ Allergy Guy: That is great to hear… be sure to keep me updated and let me know if it helps you improve a little bit with scoring extra clicks.
Garry Conn
28 Oct 07 at 3:58 am
Good stuff, Garry. I feel it’s worth mentioning to those of your readers who write sponsored posts that including ads in such posts aren’t permitted (or least I’ve been bitten a time or two). While your method will definitely work for people who don’t write paid-for posts, using what Nirmal suggested along with something like the Adsense Deluxe plugin will help people choose when to add ads to their posts.
Mark
28 Oct 07 at 11:39 am
These are the kind of handy hints and tips that I really like reading about in a post and also the discussion in the comments from other bloggers.
Kyle – I’ve not seen Shylock before, but that could be a pretty cool plugin to try out, it sounds like you’re rewarding regular readers that would read your new posts and not see the ads, with the ads only appearing on the older posts usually found by search engine traffic!
Zath
28 Oct 07 at 7:19 pm
thanks for the tips Garry. I usually use ready made wp theme for this purpose. Your tips will def. help me to improve it.
ressy
31 Oct 07 at 3:41 pm
Why download a plugin? That is absurd. Just wrap a div style around the ad code. If you use Adsense Manager, you can have it call whatever you want. I have mine called inline-200 that way if I want to change the ad in that slot, I just edit the code in Adsense manager instead of having to remember single.php, or even where it is located in the source.
Example (remove spaces):
Like mentioned above, this goes after the /h2 and before entry. Now say you are using adsense for that block, but you want to switch it to TTZ media. All you do is go to the Adsense Manager and edit the code for inline-200. Boom it is changed. No hunting, no remembering. It is fool proof.
Wade
30 Mar 08 at 5:12 pm
Very good article here; but I used a plugin instead.
I referred your post for my visitors as an alternative. You may check it out here:
http://mycoolonlinestores.com/blog/how-to-wrap-your-text-around-google-ads.html
Lanna
Exploring The Internet
12 Apr 08 at 5:06 pm
i tried putting in the simpler method and it dod work. did i do the thing right? i put the adsense code within div tag, just before the PostContent tag in my single.php
dimaks
17 Jun 08 at 12:00 pm
thanks for your explanation,..i have been looking around for this
Now I will try to my blogsome….
Anyway, could you hack blogsome code for dofollow?
Check out akuh’s last blog post..How Simple SWOT Analysis Tool Help Your Small Business
akuh
24 Jul 08 at 9:45 pm
I try use this method on my blogsome, but it is not effect to blogsome. I use 120×240 ans 200×200. Any suggestion for blogsome? Thanks
Sorry if it is repost,…any problem on my connection.
akuh
24 Jul 08 at 10:38 pm
Hi
Thanks for your post – spent ages looking around to get this working!
Still working on layout, but at least ads wrap around now – very new to this! ( http://www.willitchangeyou.com )
Taeran
26 Jul 08 at 9:21 am
I have been struggling with this issue for a while. I’m glad I found your blog. I implemented your directions and works like a charm. Thanks so much!
Carole
21 Jan 09 at 11:22 am
It almost worked…with one slight problem. See my page, what did I do wrong?
http://www.ebusinessmagazine.co.uk/index.php/2009/01/how-to-build-profitable-email-lists/
Adam
1 Feb 09 at 5:33 pm
You need to put the div adsense within the div entry tag. Right now you have it above the div entry.
Garry Conn
1 Feb 09 at 5:39 pm
http://bloggertinker.blogspot.com/2009/02/how-to-put-google-adsense-within-inline.html
Looks like its just the same with Blogger.hehe I may be outdated but this tutorial tells me that using Adsense into wordpress is already allowed… Thanks! ^_^
BloggerTinker
12 Feb 09 at 5:44 pm
Ohhhhh.. Thanx thanx. Nice Turtorial.. When i use the codes in my theme (inove 1.2.3) its not working finally I fixed it.. Ons more time thanx
Mifas
16 Feb 09 at 4:55 am
Hi, what I’d like is for a bit more text to sit on top of the adsense so that it’s like an embedded image. I used the following code but part of my text was covered by the adsense add.
{
float: left;
clear:left;
height:250px;
width:250px;
width:1px;
margin-top: 70px;
margin-right:5px;
padding: 3px;
}
I’d appreciate an explanation as to why some text is under the adsense block.
Judd
10 Apr 09 at 3:46 pm