Ad Stripe Hybrid Code - Does Not Annoy Visitors

If you are new to blog-O-sphere, or a season veteran, chances are you have most likely seen the Blog Ad stripe at the top of a Wordpress website. The most popular Ad Stripe plugin I have seen was created by MaxBlogPress, which is the one John Chow uses on his blog. (in case you haven’t seen an ad stripe, just look at the top of my webpage and you will see it with a link to Howbits Forum).

Note: This Ad Stripe code works on other types of websites, even forums, not just Wordpress.

I recently decided to try out maxblog ad stripe plugin on my website, but I noticed some annoyances right from the beginning that would not make my visitors very happy. Some visitors, I hope, would not mind the ad stripe at the top, but others would be really annoyed if they closed it, and then every time they clicked on a new article or refreshed the page, the ad stripe would appear again, in a relentless cycle.

In my opinion, this would not do because an annoyed visitor will not return, so I wanted to give my visitors the ability to keep the ad stripe up if they wanted, but if they closed the Ad Stripe, it would be gone and not bother them anymore. So with a little tinkering, and a lot of reading, I created a hybrid ad stripe that stays closed permentely and works with Wp-supercache. I would like to make this into a plugin, but I do not know at this time, so if someone wants to make a plugin for this code, please go right ahead.

Note: This Ad Stripe will not work with visitors that have cookies acceptance turned off, or if javascript is not allowed to run. The Ad Stripe ad will continue to appear on the website after they close it.

Installation Instuctions - With Downloaded Files

1. Download the Ad Stripe files, extract the files, and upload all the files to the root directory of your website.

Download link to adstripe-files-images.zip - Includes my Ad Stripe Images

Download link to Adstripe-files.zip - Without my Ad Stripe Images

2. Insert this code anywhere before the </head> tag on your website. For wordpress users, goto the Design menu, then Theme editor, and click on the file header.php on the right hand side.

3. Edit the body tag of your website to match this code. In wordpress the body tag can be found at the end of the header.php file.

4. Insert your Ad stripe Code into your website. I prefer to place the code right after the <body> tag.

This is my Ad Stripe code, but I recommend changing it to match what you want the ad stripe to say, and a link if need be.

Ad stripe code including my images

<div id="message-1" class="msgbox"><div class="ad_text"><a href="http://www.awebsitelink.com" target="_blank"><img src="http://www.yourwebsite.com/forum.png">Insert your message here</a></div>

<span class="ad_close"><a href="#" class="close"
onclick="closeBox(’message-1′); return false;"
title="Close This">Close Bar<img src="http://www.yourwebsite.com/close.png" align="absmiddle" border="0"></a></span></div>

Ad stripe code without my images

<div id="message-1" class="msgbox"><div class="ad_text"><a href="http://www.awebsitelink.com" target="_blank">Insert your message here</a></div>

<span class="ad_close"><a href="#" class="close"
onclick="closeBox(’message-1′); return false;"
title="Close This">Close Bar [X]</a></span></div>

If you wish to change the color scheme, open up msgbox.css and you will be able to edit the Ad stripe stylesheet to any color you wish.

Thats all there is to the install of this Hybrid Ad Stripe. If you want to get more use out of your Adstripe then I would recommend reading on.

Advanced Usage

To make the Ad Stripe scroll down the page with an visitor, open up the msgbox.css file and change .msgbox from position: absolute to position: fixed . Now when a visitor scrolls down the page, the Ad stripe will follow along the top.

If you have a Wordpress Blog site, but you want to have different Ad Stripes or none at all on your articles then I recommend removing the above Ad Stripe code after the <body> tag in the header, and copying where you would like it to be.

For instance, if you want the Ad stripe to only appear on the front page, then paste the code anywhere in your Main Index Template File ( index.php).

If you want it to appear on all the articles listings, and not the front page, then Paste the code into your single.php file at the top.

If you want it to appear in only one article, then you should use your wordpress read more option, and then click the code / source button and paste the Ad Brite code right after the read more code.

You can also have the Ad Stripe code appear on a single page, just create / manage a page in wordpress and click code / source button and add the code at the top.

I currently have the Ad Stripe bar set to the default of 365 days before it appears again for returning visitors who closed the bar. You change this by editing the msgbox.js. Just change 365 to how many days you want it to be before the bar returns.

function closeBox(toClose) {
document.getElementById(toClose).style.display = "none";
setCookie(toClose, "closed", 365, ‘/’, ”, ” );
}

I want to give thanks to cssnewbie.com, for posting the Perma-closing Message Boxes article and Maxblogpress for their Ad stripe plugin. I was able to use the code from cssnewbie, with the concept from the Max Blog Ad Stripe, to creat a hybrid ad stripe that would stay closed when someone closed it.

If you need any help feel free to stop on by the Howbits Forum, and post a message.

One Trackback

By PlugIM.com on September 2, 2008 at 4:09 am

Ad Stripe Hybrid Code - Does Not Annoy Visitors…

Hybrid Ad Stripe code that works on all types of websites from blogs to forums. When a person clicks close on the ad bar, the bar doesn’t not reappear after a page refresh or by clicking on a link….