Welcome to just another day at "AARAMBH"!!! Get Daily Updates right into your Inbox for Free.

How to put a Yellow Warning Bar at the top of your website

If you're new here, you may want to subscribe to my RSS feed or get daily updates via E-mail. Thanks for visiting!

If you are reading this article on my blog, you could clearly see a yellow bar at the top of your browser with a message “Welcome to just another day at Aarambh.”

With a little use of CSS, you can easily catch the attention of your readers. It’s really an effective way to inform your readers about important announcements and updates. Also, you can sell that space for advertisements. The CSS bar is very easy to implement. Let’s learn how to deploy it into your own blog or website.
Before doing anything just make sure that there is no margin on the BODY tag.

body {
margin: 0px;
padding: 0px;
}

Now we are going to create CSS code for the bar. Add the following CSS code to your Blog’s Stylesheet (most probably style.css file)

Code #1:

#warningbox a, #warningbox a:link, #warningbox a:visited, #warningbox a:active {

display: block;

color: #000;

width:100%;

background: #FFFFE1;

border-bottom: 1px outset;

text-decoration: none;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

Code #2:

#warningbox a:hover {

color: #FFF;

background: #3169B6;

}

Code #3:

#warningbox p{

margin:0px;

padding: 3px 10px 3px 10px;

font-size:11px;

}

Now when you are finish adding all the CSS codes, it’s time to actually use these CSS codes in our main program. We need the html code, this code will need to be at the top off your page right after the <body> tag.

<div id=warningbox><a href=’#'><p>This is an example of the warning box</p></a></div>

You can change the message enclosed within the <p> tag as per your requirements. Also, it is not annoying because it stays at the top of the browser and as soon as you scroll down it disappears.

Hope, you find it useful. If you encounter any problem do mention that in the comments section. I will try to resolve that to the best of my ability. Moreover, any feedback is whole heartedly appreciated.

I would like to thank DEEP for giving me an extra 1GB bandwidth as a Holi Gift when my site was down (B/W limit exceeded) few days back. I appreciate his and also my hosting Web1 hospitality. They really value their customers.

If you like this article and want to get daily updates, do subscribe to my RSS feed or get daily updates via E-mail.

11 Responses to “How to put a Yellow Warning Bar at the top of your website”

  1. ArpitNext says:

    Gr8 Tip !!!

    Will try soon !!

  2. Rakshit says:

    Thanks Arpit for your comments.
    :-)

  3. Nirmal says:

    This is good way to get some money with Adsense and also you can add subscribe to blog on this section.

  4. Nice tip to do it without using a plugin. Thanks for sharing.

  5. Rakshit says:

    @Nirmal
    I am planning to use it for advertisements.

    @Jawwad
    You’re Welcome. Yeah, it’s very simple to implement yet effective.
    ;-)

  6. hey very good trick. even me has plans to implement trick in adsense. Thnx for such a wonderful post

  7. Rakshit says:

    Welcome to Aarambh, Nicholas. This trick can be very useful if you use it properly. Adsense is a good option. Go ahead….

    Thanks for your comments.
    :-)

  8. immy00100 says:

    very good trick for advertisement same sort of script is on my blog but it only appears when website is opened in internet explorer and it says to install firefox and take visitor to google firefox page and i earn money ;)

  9. Rakshit says:

    @immy
    yeah, I checked that in your blog, it’s a good way to earn money.
    :-)

  10. Deep says:

    Thanks Rakshit.. I hope your website reaches millions of more visitors..

    Regards,
    Deep
    Web1 Solutions

  11. Rakshit says:

    You’re welcome Deep.

    These are real great words. I appreciate that.
    Thanks to you as well.
    :-D

Leave a Reply

CommentLuv badge