Stripe ads are a neat way to extend screen real estate to create additional advertising room. They are extremely popular with high traffic websites and are extremely visible to the website visitor since they are the first thing the visitor sees on the site.
A stripe ad is a strip of highlighted ad adspace right below the browser's navigation. Sites that have stripe ads include www.cellphonenews.com, and www.engadget.com.
As you can see, the reason they are so effective is because they are right at the top of the site, almost integrated with the browser's navigation. So, they are not (at least yet) subject to visitor blindness so often associated with banner ads at the top of websites.
To integrate a stripe ad for your website, you can get a branded plugin for your Wordpress theme from certain Wordpress plugin developers or you can roll your own! In this blog post, I show you how you can roll your own. [To get the link to the full report, you must subscribe to my RSS.]
Why do you want to roll your own? Because:
1. It is free!
2. You don't have to keep a visible link to the plugin developer's website (e.g. "Powered by XXXX") since that looks amateurish.
3. You get to understand how xhtml and php works so you can custom tailor your stripe ad to your website needs.
Getting Started
You should know a little bit of how to write html and CSS. If not, follow the steps below and just do a Google search for parts you don't understand.
Step 1 - Create a new "div"
Add the following div and message to each page you want the stripe ad to appear:
<div id="stripe-ad-top">[INSERT MESSAGE HERE]</div>
If you are using Wordpress or another blogging system, you can just add the div to the appropriate template file once and it will appear on all pages.
Step 2 - Modify your CSS file or style sheet
Modify your CSS or style sheet to add in the following styles:
[Subscribe to my RSS to get the link to the full report with all the codes.]
Step 3 - Modify your webpages for Internet Explorer
Because IE6 and below is not generally standards compliant with W3C guidelines, you have to enter the follow fix for IE:
Put this at the very top of each page (again, it is easier to just paste this into your templates):
