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
If you want to add this widget in your blog then you may follow easy step to add this widget in your blogger blog .
- Log in your account
- click on the template
- Back up your template
- click on the edit HTML
- Now Find ]]></b:skin>
- Copy the below code and past it above the ]]></b:skin>
/* —-Blogger Notification bar —– */
#bloggernotificationWrap{
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;
color:#FFFC00;
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>
<br/><br/>
- 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
This is awesome !! It really helped !! Thanks a ton!!