How to Add Professional Notification Bar in Blogger Blog ?

Today we are releasing a new fancy style black notification bar for your blogger blog. This notification bar will show your desire post which you want to show up at the top of the blog. However most of bloggers display the hot deals or popular post with the help of this blogger notification. The most big advantage of having notification message at the top of the blog will exist remain even if we grab the mouse down or scrolling up and down. This top righted bar will interact with every page or post. So if you have not yet added a notification bar into blogger then we would recommended to add this simple black color notification bar in your blogger blog. Most of the time i have seen bundles of comments posted by newbies in blogging forum, how could we add a notification message alert bar in blogspot blog. So in today article we will show you, How to add a professional like notification bar in blogger blog. ?

Blogger Notification Bar

This is one of the finest notification bar for all blogspot blogs. By adding this bar into your template, it would bring beauty and will change the design of your blog. It will not compel your blog on loading time because it has been created in Css and Html. So you can feel free to add without any hesitation. To add this bar in your blogger blog please follow the below method.

How to Add This In Blogger Blog

This is a very simple and two steps process. You can easily add this bar in your blogger blog by follow the below given steps. Remember this notification bar is only for designing, if you want to add links, then you can add your desire links inside the html coding.

Step: 1

• Go to Blogger Dashboard:
• Go to Template >> Edit Html:
• Now find for ]]>

:

Past the below given code:

 /*-------------PBT Notification Bar ----------------*/

#bloggernotificationWrap {
    display: none;
    height: 41px;
    margin: -41px 0 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 999999;
}
#bloggernotification {
    background: none repeat scroll 0 0 #000000;
    border-bottom: 3px dotted #FFFFFF;
    border-radius: 10px 13px 7px 5px;
    color: #FFFFFF;
    font-family: arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 37px;
    margin: -30px 5px 5px -1200px;
    padding-top: 7px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
    width: 500%;
    z-index: 9998;
}
#bloggernotification a {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    color: #000000;
    font-family: Calibri,sans-serif;
    font-size: 13.5px;
    padding: 1px 7px;
    text-decoration: none;
}
#bloggernotification a:hover {
    text-decoration: underline;
}
#bloggernotification img {
    display: none;
}

Step 2: 

• Again go to Template: 
• Find for  tag:
• Now past the below code just after  tag:

Your Message here