FlatPress Blog Engine Guide

FlatPress is an open source multi-lingual extensible blog engine that uses flat-files instead of a database. This blog contains instructions and tips on setting up a blog site using FlatPress. These post include how to instructions concerning installation, updating to newer releases, enabling features, adding new features, and much more.

Download this Cross-Cultural Communication Tool from Get International Clients

Monday, February 2, 2009

How to: Create Floating Advertisements

Merging advertisements with web content is often referred to as “floating ads”, “embedding ads”, and “blending in ads”. FlatPress makes it easy to embed images with content. To accomplish this with advertisements will take some HTML magic.

Wrapping web content around advertisements encourages visitors to read the advertisements. The more someone reads your ads, the more likely they will click on it. More clicks mean more revenue. The trick with adding advertisements is to not reduce the value of your web content. Floating ads offer a balance between web content and advertisement.

The sample code in this post was developed using “AdSense for Content” ad and link units. According to AdSense, the most successful ads are Large Rectangle (336×280), Medium Rectangle (300×250), and Wide Skyscraper (160×600). To view all types and sizes of AdSense advertisements visit this site.

The sample code below was used to create the floating shown above in this post. To use this code in your own post, replace the comment line in the middle with your AdSense code. The other comments lines are optional, they are included to help in switching the ad between the left and right sides of your post.

	
[html]
	
<!-- float:left; padding: 0px 8px 8px 0px; -->
<!-- float:right; padding: 0px 0px 8px 8px; -->
<div style="float:right; padding: 0px 0px 8px 8px;">   
<div style="width: 300px; height: 250px;">  
	
<!-- Replace this line with the AdSense advertisement code -->
	
 </div>  
</div> 
[/html]

This code floats the ad to the right side of the content. To move the ad to left side of the post, change the float setting to “float:left; padding: 0px 8px 8px 0px;“. The width and height settings reflect the size of the ad, which in this case is a medium rectangle 300×250 ad. To prevent your web content from overlaying the ad, modify the width and height settings to that of your AdSense ad.

The new AdSense “Link Units” ads can be used as a floating ad. AdSense limits these ads to a maximum of three per web page. When combined with the “Ad Units” ads, you can have up to 6 AdSense ads per web page. Try to control yourself, visitors prefer content over advertisements.

Conclusion

Floating ads are a great method of combining ads with web content. The code used came from the post Float Ad in your content. I added some HTML tags to get it to work on FlatPress. The blog has many other posts on advertisements and developing web sites.