Hi friends today we are going to learn that how can we implement the Notification bar in blogger ,it is not by default  for blogger it is developed by some one, Blogger is always known the robust blogging platform because it is easy to use, search engine friendly, amazing features and easy to edit anything. If you search anything for blogger then you will easily find it because developers has created almost everything for blogger

Blogger Notification Bar 
This is the fancy and stylish notification bar which is created with JavaScript, CSS3 and HTML by which your visitors will be notified for news. Notification bar can help you in announcing anything on your blog and readers will be attracted on your announcement. You can place the news on that notification bar for informing your readers. This notification bar is having dark color with yellow links color. It has a arrow on right side; if you click on that then it will go up and another arrow will come down. It means if this is irritating your readers then they can show or hide this simply by clicking on the arrow.

How To Add This Notification Bar

If you want to add this widget in your blog then you may follow easy step to add this widget in your blogger blog .

  1. Log in your account
  2. click on the template 
  3. Back up your template 
  4. click on the edit HTML
  5. Now Find  ]]></b:skin>
  6. Copy the below code and past it above the ]]></b:skin>

/* —-Blogger Notification bar —– */
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;

#bloggernotification {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
background: none repeat scroll #2E2F2E;
position: relative;
box-shadow:0px 1px 3px #666;
z-index: 9998;
text-decoration: none;
color: #cccccc;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
border-bottom:2px solid #fff;

#bloggernotification a{
text-decoration: none;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;

#bloggernotification a:hover{
text-decoration: underline;

#bloggernotificationWrap #closebloggernotification{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat 0 center;
cursor: pointer;

#bloggernotificationWrap #closebloggernotification:hover{
background-position: -21px 50%;

#bloggernotificationWrap.bottomPosition #closebloggernotification{
background-position: right 50%;

#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{
background-position: -42px 50%;

#bloggernotificationWrap #openbloggernotification{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
background: #2E2F2E;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
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:0px 1px 3px #666;

#bloggernotificationWrap #openbloggernotification span{
display: block;
width: 21px;
height: 34px;
background: url(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat right 50%;

  • To change the background color of the bar simply edit #2E2F2E
  • To change text color edit #cccccc
  • To change hyperlink color edit #FFFC00
  • To change anything else, just post me your query in the comment form below! :)

7.Now Find the <body> and past the below code above the <body> 

<div class=’openbloggernotification’ id=’bloggernotificationWrap’ style=’display: block; margin-top: 0px;’><div id=’bloggernotification’>

Write Your Notification Message Here

<span id=’closebloggernotification’/></div><span id=’openbloggernotification’ style=’top: -6px;’><span/></span></div>


  • Now Change the Notification Massage Here Your Own Text 
  • To Add link in your notification bar add the below code behind the your Notification massage 

<a class=’link’ href=’ADD-URL-HERE’ target=’_blank’>Link Text</a>

  • Change the ADD URL with web page link
  • Change the  Link Text with your Link text
  • finally save the template