Add CSS Notification Bar in Blogger

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks

Hello Blogger I am back for you and for your blog.In my Previous Posts you add the amazing Facebook Like Boxes Articles and i am sure this widgets are perfectly working on your blogger blog This widget are in my blog available in 20 different themes and different colors. Those widget are very helpful and useful for increase your blog social traffic means get more like and More Fans from Facebook Through this Facebook Like box and you will get lot of likes and fans for your blog through this Widget.

Also Read:-Create Sitemap Page with Thumbnails in Blogger

But Today i am comes with Awesome Navigation bar for your blogger blog This widget are helps you in to see your specific posts on your blogger blog.
I using CSS (Cascading Style Sheet) to made this widget and this widget are 100% working on all blogs .This are customized by yourself means.You can add your popular posts or your favorite post in top of your blog using this widget.
This widget helps you in to attract more unique visitor to your blog from this Widget.In this widget you can customize it background , customize its Font and its fonts colors.You can write your Message for this blog where the top in your blogger blog.
Once you have seen this Notification Bar's Demo click the live demo link
Check Live Demo
How it Work?

This widget are fully CSS Optimized so this widget working on CSS Plugins and i can use this CSS Plugin to made this Notification Bar.This Widget are Look Beautiful and great with sticky UP and DOWN Buttons this is the best thing to make this widget more Beautiful and attractive.
This widget created by :-

Prajjwal Rajput so, All Credits goes to them.

This Notification bar are easy to install just you can add some html Codes in your blogger Template and then save your and then look at the top of your blog you can seen a black sticky navigation bar where your blog post displayed.To add this widget in your blog follow my simple instructions.

How To Add CSS Notification Bar in Blogger Blog:-

• Go TO Blogger Dashboard>>Template>>Edit HTML
• Find this code using (Ctrl+F)

]]></b:skin>

• Now Paste the following below code before this  ]]></b:skin>

/*  Notification bar by www.softwayrko.blogspot.com  */
#nbtbarWrap{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}
#nbtbar {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhshtHyLSdLLvJpTY5P3kzRgnosPJksej04hjBAm5E5-xwREW1lWVyCnbTDpmxz3F8ssK-jL-oHbH7xpCOJ4tQlaLMeZ8XjqI4k95w6MFPZOtl2LJeJm37BHLa0UhsuCz9y2pq6IGZlxz/s1600/nbtbarback.png);
position: relative;
box-shadow: 1px 2px 9px #666666;
z-index: 9998;
text-decoration: none;
color: #eeeeee;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 4px rgb(0, 0, 0);
border-bottom: 2px solid #cccccc;
}
#nbtbar a{
text-decoration: none;
color: #fff;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}
#nbtbar a:hover{
text-decoration: underline;
}
#nbtbarWrap #closenbtbar{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisi8FCz6S1sctd2qpyu5OYDOWlG-B0mx4naL-BoplqdWxL5dPLo0tLBJ-BAshkdis1zqqyITx6JJo97tZqJjtIkoHatwxgIu9CjRzCvIfH1HzTG0c2CR3qK_1sp_v7TQNmMKy7oWiQIElF/s1600/NBT-light.png) no-repeat 0 center;
cursor: pointer;
}
#nbtbarWrap #closenbtbar:hover{
background-position: -21px 50%;
}
#nbtbarWrap.bottomPosition #closenbtbar{
background-position: right 50%;
}
#nbtbarWrap.bottomPosition #closenbtbar:hover{
background-position: -42px 50%;
}
#nbtbarWrap #opennbtbar{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhshtHyLSdLLvJpTY5P3kzRgnosPJksej04hjBAm5E5-xwREW1lWVyCnbTDpmxz3F8ssK-jL-oHbH7xpCOJ4tQlaLMeZ8XjqI4k95w6MFPZOtl2LJeJm37BHLa0UhsuCz9y2pq6IGZlxz/s1600/nbtbarback.png);
border-left: 2px solid #dddddd;
border-right: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
cursor: pointer;
z-index: 1;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 1px 2px 9px #333333;
}
#nbtbarWrap #opennbtbar span{
display: block;
width: 21px;
height: 34px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisi8FCz6S1sctd2qpyu5OYDOWlG-B0mx4naL-BoplqdWxL5dPLo0tLBJ-BAshkdis1zqqyITx6JJo97tZqJjtIkoHatwxgIu9CjRzCvIfH1HzTG0c2CR3qK_1sp_v7TQNmMKy7oWiQIElF/s1600/NBT-light.png) no-repeat right 50%;
}

•  Now add this below code between the <body> and </body>

<div class='opennbtbar' id='nbtbarWrap' style='display: block; margin-top: 0px;'>
<div id='nbtbar'>
<strong><font color='#84DC04'>Trending: </font></strong><a href='http://softwayrko.blogspot.com/2014/06/15-styles-facebook-like-box-for-blogger.html'>15+ Styles Facebook Like Box for Blogger</a> |
    <strong><font color='#FFFF00'>Most Popular: </font></strong><a href='http://softwayrko.blogspot.com/2014/06/add-css-notification-bar-in-blogger.html'>Get This Bar for Blogger</a>
<span id='closenbtbar'/></div><span id='opennbtbar' style='top: -6px;'><span/></span></div> <br/> <br/>

Customization:-

• Replace Blue color code with your font color to appear in this widget's fonts 

(Tip:-Using our color codes Tool to choosing your favorite color click here)

• Replace Red Code with your blog posts URL
• Replace Orange Code with your Blog Post Name

Now this is the last and important steps:-

• Find this tag <head> using (Ctrl+F)
• Then Paste the Following Jquery code after/below <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript" src="http://yourjavascript.com/1153694480/softwayrko-blogspot-com-notification-bar.js"></script>

•  Click on Save Template
• Now go to your blog and check this widget on top of your blog
• Finish

Final Words

I hope you can add this amazing and awesome sticky Notification bar in your blog without any problem, if not? you're getting error during this process or you are face problem so, Comment or contact me to solve your Problem. And don't forget to like Our Facebook Page and share this post with your friends on Social Networking Sites.

Happy Blogging!