Free Notification bar for all

I don’t know web designing too much but usually I waste my time to create some attractive WebPages. When I was new to this blog I wanted to add a notification bar at top of my blog but could not found any completely free. I liked hello bar but that was not free. Now I coded a simple bar that can stay at top of your website and you can show your important messages to your audience through it.

Bottom notification bar
I've created New notification bar with hide and show utility. I'll release it soon. For demo have a look at top of this blog.

How to get this in my website?

If you want to add this to your website then simply add this code before </head>

<style type="text/css">
    #tbm {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        padding: 10px;
        background: #333333;
        color: #cccccc;
        border: 0px;
        border-bottom: 2px solid #ffffff;
        box-shadow: 0px 1px 5px 2px #999999;
        -webkit-box-shadow: 0px 1px 5px 2px #999999;
        -moz-box-shadow: 0px 1px 5px 10px #999999;
        text-align: center;
        opacity: 0.3;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        font: normal medium arial;
    }
    #tbm:hover {
        opacity: 1;
    }
    #tbm a:link {
        color: #ffffff;
        text-decoration: none;
        transition: all 1s ease;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
    }
    #tbm a:hover {
        color: #ffff00;
        text-shadow: 0px 0px 3px #ffffff;
    }
    #tbm a:visited {
        color: #ffffff;
    }
</style>

And after it paste this code after <body> tag.

<div id="tbm">
    <a href="http://www.google.com">Link title</a>
</div><br/><br/>

What if you are using blogger?

In blogger go to blog's template editor and click on edit html.
Now find </b:skin> and paste below code before that.

#tbm {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 10px;
    background: #333333;
    color: #cccccc;
    border: 0px;
    border-bottom: 2px solid #ffffff;
    box-shadow: 0px 1px 5px 2px #999999;
    -webkit-box-shadow: 0px 1px 5px 2px #999999;
    -moz-box-shadow: 0px 1px 5px 10px #999999;
    text-align: center;
    opacity: 0.3;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    font: normal medium arial;
}
#tbm:hover {
    opacity: 1;
}
#tbm a:link {
    color: #ffffff;
    text-decoration: none;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
#tbm a:hover {
    color: #ffff00;
    text-shadow: 0px 0px 3px #ffffff;
}
#tbm a:visited {
    color: #ffffff;
}

After pasting above code add below code after <body> tag.

<div id="tbm">
    <a href="http://www.google.com">Link title</a>
</div><br/><br/>

Everything is done. Now just change http://www.google.com with your webpage address and Link title with text that you want to show for that link.
I hope this helped. Tell me if you find anything that is not working properly or if you know something that can make it better.

Pages - Menu