HOWTO ad an nice looking ad stripe to the top of your blog

From Zedomax Wiki

Jump to: navigation, search

Here's how to make that ad strip on top of your blog using simple HTML and CSS:

Copy the following code into the top of your <body> tag in your header file. 

<div id="adbar"><center><a href="http://sitehoppin.com/Special:Random">Still using Google to find new sites?  Try Web 2.5 SiteHoppin' that let's you find an interesting site with 1 click!</a></center></div>

Then open up style.css or the main css file you are using and add the following: 

#adbar {
        height: 20px;
        width: 100%;
        margin: 0 auto;
        background-color: #666666;
        color: #fff;
        font-family: Arial;
        font-size: 18px;
        border-bottom: solid #000;
}

#adbar a {
        text-decoration:none;
        color: #fff;
}
#adbar a:hover {
        text-decoration:none;
        color: #666666;
        background-color: #fff;
}

You can mess with the colors and width to customize it to your site. The whole process took me about 5 minutes to make. You can even make it rotate with a little bit of code but I won't get into that today since I have no need for it right now.

Here's an update if you want the bar to be fixed, meaning it will be there even when you scroll down.

Add this right after the first adbar div: 

<div id="adbar-spacer"></div>

Then add this to your css: 

#adbar-spacer {
        height:25px;
}

Also add this line: 

#adbar {
        position:fixed;
}
Retrieved from "http://zedomax.com/wiki/index.php/HOWTO_ad_an_nice_looking_ad_stripe_to_the_top_of_your_blog"
Personal tools