How to Add a Professional Announcement Bar at the Top of Your Site with Plain HTML


Today I’ll show you one of the things I think a website must have: an announcement bar. What for? To let your users know recent changes, recent news or basically any text you want them to be the first thing they will see. An example of what the announcement bar will look like can be seen here:

Difficulty level: Easy

1. Open the index HTML file or the header file, if any.

2. Right after the </head> tag, copy paste the following code and change “{YOUR ANNOUNCEMENT” to the desired message to be displayed:

<div style="background-color: #FFFDDE; height:30px; border:thin solid #EDDD00">
        <li style='padding-top:5px;text-align:center;font-family:Verdana'>I M P O R T A N T: {YOUR ANNOUNCEMENT}</li> 

3. Save and Upload.

Right now, if you go to your website, you are supposed to see the bar at the top. If for any reason you don’t, please let me know and I’ll be more than glad to assist you. This can be modified to grab the announcement from a DB (how I use it). Any question, feel free to comment below.

Best Regards,


Owner of

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under ClipBucket | RSS 2.0

Author Spotlight

Richi González

I started programming when I was 12. I'm a Developer and have been working with the Clip-Bucket script since it came out. I'm the Liaison between Arvixe and Clip-Bucket, so anything you need regarding Clip-Bucket or any particular computer-related subject you need, let me know so I can assist you.

Leave a Reply

Your email address will not be published. Required fields are marked *