Sunday, May 06, 2007
Erik - I know you're worlds away in Hawaii... but I can't thank you enough!
by Erik Vossman
If you’re like me and rather new to the html coding world you proabably are looking for a dumbed down way to do things. Well I have begun posting lots of tips on using wordpress and netfirms and decided that I need to post about coding in general as well. One of the most useful things I have learned how to do is wrap text around Google Adsense ads when they are embedded in text. If you are using wordpress and would like to find out how to wrap text just follow this link. If you are looking to just wrap text around ads using a normal html editor like notepad, Dreamweaver, or FrontPage then keep reading.
Also the great thing about this trick is that it works for Chitika ads as well. If you aren’t using Chitika ads you should, they are very similar to google adsense and another way to generate revenue for your site. They pay monthly once your account goes over $50.
The process described is a really easy 2 step process with one extra tag you need to add. This is the quickest and easiest way I found to wrap text around google adsense using the least amount of html coding. Much easier than inserting a table or anything like that.
How to wrap text around Google Adsense ads (also works for Chitika):
1. First off you need to get into your text editor you use for html coding. You can use the coding section of Dreamweaver or FrontPage, or use Notepad. Then you have to find where in your content you want the text to wrap around the ads. Anywhere will work for your first try, you can then copy and place the text where you please.
2. Once you found the spot you like you need to add the following div tag around your adsense or chitika code. Note: replace the "[" with "<" and the "]" with ">".
[div style=”display:block;float:right;margin: 5px 5px 5px 5px;”] all the google adsense code (or chitika)[/div]
Explanation of the div tag
The float:right attribute can be changed to float:left or float:center as well and it will position the ads in those positions while allowing the text to wrap around the ads that directly preceeds and follows it. I also add the margin code to add a margin of white space around the text wrap on the top, bottom, left, and right. You can add or remove space as you wish. The display:block element basically just describes whether you want to break the line where you are inserting the ad or let the browser find where to break the line and wrap the preceeding text. If you want the browser to do it just choose block:inline. I have better luck with block:float but it can sometimes make the text look choppy. Play around with these to see what you like.
There you have it, you can now insert this same coding with different add scripts all over your content and have the text wrap around the ads. Remember that this works with both Google Adsense and with Chitika based ads. Good Luck!
If you are using wordpress check here to get text to wrap around adsense inside posts. I also have a similar article about getting it to wrap around chitika ads which just requires a tweek.