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, www.johnchow.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):
[Subscribe to my RSS to get the link to the full report with all the codes.]
Then put this in the
section, right after the reference to your linked CSS stylesheet:[Subscribe to my RSS to get the link to the full report with all the codes.]
That’s it! Enjoy your new stripe ad!
{ 5 trackbacks }
{ 9 comments }
nice to see a post on this blog again
Thanks for the nice tip, just one glitch I noticed though - the image seems to overlay on the stripe ad cutting it out.
I’ll try this soon
Hey! Thanks for the great tip.
Looking forward to implementing it. Thanks for the advice. You rock!
On Step 3, I hate the way IE6 and IE7 don’t match up. It looks like Microsoft always screws something up when they make changes.
stripes. good thing someone is looking into this.
Stop trying to beat me!
Blog Blog Cherry
Hey, I had created a platform for such stripe ads. It is called Precimark. But now I have suspended it temporarily as I was finding it difficult to get publishers for the platform.
I would be grateful if you could have a look at Precimark and suggest if something can be done of it.
Nice and simple tutorial thanks mate.
One thing your site goes more than 20 px to the left in mozilla. plz do check.
thanks a lot for this tip and guide..
im looking for this tip for a long time after look at johnchow stripe ad…
this will increase the CTR for our advertisers
Pretty cool, but is there a way to let it scroll along with the page?
Comments on this entry are closed.