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.
Gr8 Tip !!!
Will try soon !!
Thanks Arpit for your comments.
This is good way to get some money with Adsense and also you can add subscribe to blog on this section.
Nice tip to do it without using a plugin. Thanks for sharing.
@Nirmal
I am planning to use it for advertisements.
@Jawwad
You’re Welcome. Yeah, it’s very simple to implement yet effective.
hey very good trick. even me has plans to implement trick in adsense. Thnx for such a wonderful post
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.
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
@immy
yeah, I checked that in your blog, it’s a good way to earn money.
Thanks Rakshit.. I hope your website reaches millions of more visitors..
Regards,
Deep
Web1 Solutions
You’re welcome Deep.
These are real great words. I appreciate that.
Thanks to you as well.