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

Hello,

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: tecchmun2012.com.

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">
    </ul> 
        <li style='padding-top:5px;text-align:center;font-family:Verdana'>I M P O R T A N T: {YOUR ANNOUNCEMENT}</li> 
    </ul> 
</div>

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,

Richi

Owner of Juapo2Services.com

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

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

Author Spotlight

Richi González

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 became a Liaison between Arvixe and Clip-Bucket, so I am here to assist you with anything you need regarding Clip-Bucket or any particular computer-related subject you need. Best Regards, Richi

Leave a Reply

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


× 5 = 30

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>