How to Put a Floating Ad Bar Strip on Your WordPress Site


Have you ever seen sites that have some type of ad running across the very top of their pages? And have you ever noticed that with many of them, even when you scroll down the page, those ad strips manage to stay right there at the top of the page?

Here’s a screen shot of Darren Rowse’s extemely popular Problogger.net site with such a “floating” ad. (And you know if Darren is using it, he’s tested its effectiveness.)

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more

How to Make Your Own Floating Ad Strip

I went looking for a plugin that would do this for me, but I couldn’t find one suitable. All the ones that I found were either broken, or they had other issues (such as putting links into you site).

But not to worry, making your own is not so tough. It only takes three steps.

 

Step 1 – Put Your Info in Your Header File

In your header.php file (Appearance > Editor > Header – header.php), put whatever text or images you’d like to show up in your ad strip directly AFTER the following snippet of code:

</head>

You will need to put your info in a “div” so that you can style it in your CSS file. For example, I set up a link to go to an offer on my site in the following way. (You could put whatever you like here, even a image.)

 

<div id="top-strip">

<a href="http://www.mywebsite.com/my-ad/">Check Out My Offer</a>

</div>

 

Here’s what that code looks like in my actual file:


(Make sure you save the changes.)

 

Step 2 – Style Your Ad Strip

Next we’re going to style the ad strip. If you don’t style it, it won’t “float” when the user scrolls down the page, and it will just appear as a link on the far left side of your page like the following ….

Go into your stylesheet and place the following styles at the bottom of the page. You can play with these to get your bar looking the way you like. (Appearance > Editor > Stylesheet – style.css)

#top-strip {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin-bottom:15px;
  background-color: #FFFF99;
  color: #FFFF66;
  border-bottom: solid #000000;
  padding: 5px 0 5px 0;
  text-align: center;
  font-size: 12px;
  font-family: Verdana, Arial, Tahoma;
  font-weight: bold;
}

 

(Make sure you save the changes.)

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

 

Step 3 – Remove the Admin Bar

Finally, the last step is to remove the top Admin bar that shows up for logged in users. If you don’t remove this, then it will cover your ad strip if a user is logged into your site.

 

Remove the bar for everyone:

If you would like to simply remove the Admin bar for everyone, including the Administrator, then you can pop the following line of code into your functions file. (Appearance > Editor > Theme Functions – functions.php)

add_filter( ‘show_admin_bar’, ‘__return_false’ );

 

Remove the bar for only certain users:

If you would like to keep the admin bar active for certain users (such as for yourself – the administrator), then you can get a plugin that will allow you to do that.

There are a number of plugins that will allow you to do this. The WP Custom Admin Bar is one I found that does the trick nicely.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

 

The Result

And here’s the result. You get a new Ad Strip Bar at the top of your page that will always stay at the top.

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

 

Photo: Outdoor advertising construction from BigStock

 

 

Comments (10)

  1. Thanks for the tutorial.

    What you’re describing is best for those who don’t require features like the Hello Bar has (which is what Darren Rowse and others are using) such as stats, etc.

  2. Hi.. I would like to ask, how to put the floating ads like in this blog(the red wordpress ads) that only float when readers scroll down the page. When scroll back to top, the floating ads remain under popular posts widget.

  3. Hello and thanks for this great feature. However on some of my themes the bar gets covered by the sites content when i scroll down. This is ok on twenty ten but on other themes not so good. Can you tell me how to fix this issue?

    • Vinny – You might ask the theme developer of the particular theme you’re working with. I guess there might be things particular to the theme that conflicting with it. Or you might ask a CSS expert – which is not me. :) (Sorry.)

  4. Hi Joseph and Vinny, first of alla thank you verry much for sharing this tip i found it werry usefull for my sites and i like the simplicity plus not needing a plugin. Second, i had the same problem as Vinny Pap but i simply solved it by adding z-index: 99999 !important; in the css code. Check below. If you use cache be sure to clean it up before loading you webbsite. Hope this helps you to Vinny.

    #top-strip {
    position:fixed;
    z-index: 99999 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin-bottom:15px;
    background-color: #FFFF99;
    color: #FFFF66;
    border-bottom: solid #000000;
    padding: 5px 0 5px 0;
    text-align: center;
    font-size: 12px;
    font-family: Verdana, Arial, Tahoma;
    font-weight: bold;
    }

    Also you can se a demo on my site free-spin.se where you can se the ad strip showing up infront of a flash header so this should work in most cases i think.

    Once again thanks for sharing=)

    /Ermin Rajic

Participate