How to Add Blogger Notification Bar in Blogger

Blogger is the best platform for Blogging. Blogger is very easy to use, search engine friendly, and with much more features. Here, in blogger it’s easy to develop and design there blogs. And now, I’m going to show you How to Add Notification Tool bar in Blogger. This bar will help you to do announcements for your blog readers. And by the way, this Tool bar was created by Mohammad Mustafa Ahmadzai from My Blogger Tricks. After knowing it’s precious features, I thought to share this widget for my lovable readers. Bellow, I have added the simplest way to add Notification Tool bar in Blogger.

Before starting my tutorial, let me describe this tool bar. This tool bar have many features in it. This Notification Tool bar was created with JavaScript, CSS3 and HTML. This is an awesome tool for Bloggers. This help the bloggers to notifiy thier new announcements easy by using this bar. And, the readers will be attracted and they will surely change thier head to your Announcements. This notification bar is designed with dark color with stylish yellow link hover color. And at the end of this bar, you can see an arrow which let your readers to minimize the bar after reading it. They can click it, if they want to check it again. You can get it’s usefulness after installing it in your blog. SO you must try this.

Another thing, the developer has added the logo in the left side as credit. So, you don’t have any permission to remove that logo. If you want to do so, then you need to buy the premium version of it. Let’s see how to implement the notification tool bar in blogger.

How To Install Notification Bar in Blogger ?

Step 1: First Go To Blogger > Template > Backup Your Template

Step 2: Now, just Click Edit HTML and Search For <head> tags in your template.

Step 3: Then, Paste the following code given below just After/Below <head> tags.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’></script>
<!–Blogger Notification Bar –>
<script language=’JavaScript’>
//<![CDATA[
var _0x519b=[“x6Ax51x75x65x72x79″,”x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x66x6E”,”x74x6Fx70″,”x6Cx69x6Ex65x61x72″,”x65x78x74x65x6Ex64″,”x65x61x73x69x6Ex67″,”x73x77x69x6Ex67″,””,”x74x6Fx74x61x6Cx48x65x69x67x68x74″,”x68x65x69x67x68x74″,”x62x6Fx72x64x65x72x53x69x7Ax65″,”x64x75x72x61x74x69x6Fx6E”,”x73x68x6Fx77x41x66x74x65x72″,”x23x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x66x69x6Ex64″,”x2Ex6Cx69x6Ex6B”,”x23x63x6Cx6Fx73x65x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x23x6Fx70x65x6Ex62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x61x6Ex69x6Dx61x74x65″,”x6Fx70x65x6Ex62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6E”,”x72x65x6Dx6Fx76x65x43x6Cx61x73x73″,”x61x62x73″,”x61x64x64x43x6Cx61x73x73″,”x6Dx61x72x67x69x6Ex54x6Fx70″,”x74x6Fx70x5Fx66x69x78x65x64″,”x62x6Fx74x74x6Fx6D”,”x62x6Fx74x74x6Fx6Dx5Fx66x69x78x65x64″,”x70x6Fx73x69x74x69x6Fx6E”,”x64x65x74x61x63x68″,”x62x6Cx6Fx63x6B”,”x63x73x73″,”x62x6Fx64x79″,”x70x72x65x70x65x6Ex64x54x6F”,”x6Cx65x6Ex67x74x68″,”x2Ex6Dx75x6Cx74x69x4Dx65x73x73x61x67x65x73″,”x69x6Ex69x74″,”x6Dx75x6Cx74x69x70x6Cx65x4Dx65x73x73x61x67x65x73″,”x6Bx65x65x70x48x69x64x64x65x6E”,”x63x6Cx6Fx73x65x61x62x6Cx65″,”x63x6Cx69x63x6B”,”x70x6Fx73x74″,”x63x6Cx69x63x6Bx3Dx74x72x75x65″,”x61x6Ax61x78″,”x3Cx61x20x73x74x79x6Cx65x3Dx22x6Dx61x72x67x69x6Ex2Dx74x6Fx70x3Ax35x70x78x3Bx20x6Dx61x72x67x69x6Ex2Dx6Cx65x66x74x3Ax37x70x78x3Bx20x63x6Fx6Cx6Fx72x3Ax23x36x36x36x36x36x36x3Bx20x66x6Cx6Fx61x74x3Ax6Cx65x66x74x3Bx22x20x74x61x72x67x65x74x3Dx22x5Fx62x6Cx61x6Ex6Bx22x20x68x72x65x66x3Dx22x68x74x74x70x3Ax2Fx2Fx77x77x77x2Ex4Dx79x42x6Cx6Fx67x67x65x72x54x72x69x63x6Bx73x2Ex63x6Fx6Dx22x3Ex3Cx69x6Dx67x20x73x72x63x3Dx22x68x74x74x70x3Ax2Fx2Fx34x2Ex62x70x2Ex62x6Cx6Fx67x73x70x6Fx74x2Ex63x6Fx6Dx2Fx2Dx36x44x37x6Dx2Dx69x74x57x64x6Ex6Fx2Fx55x4Ex32x77x30x54x54x33x5Ax6Cx49x2Fx41x41x41x41x41x41x41x41x49x59x63x2Fx43x4Ax78x64x73x4Cx72x57x6Bx51x67x2Fx73x34x30x30x2Fx6Dx62x74x2Ex70x6Ex67x22x2Fx3Ex3Cx2Fx61x3E”,”x70x72x65x70x65x6Ex64″,”x65x61x73x65x4Fx75x74x42x6Fx75x6Ex63x65″,”x68x61x73x4Fx77x6Ex50x72x6Fx70x65x72x74x79″,”x23x62x6Cx6Fx67x67x65x72x6Ex6Fx74x69x66x69x63x61x74x69x6Fx6Ex57x72x61x70″,”x72x65x61x64x79″];;;(function (_0xd41ax1){_0xd41ax1[_0x519b[2]][_0x519b[1]]=function (_0xd41ax2){var _0xd41ax3={duration:500,position:_0x519b[3],closeable:true,showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x519b[4]},_0xd41ax4=_0xd41ax1[_0x519b[5]]({},_0xd41ax3,_0xd41ax2);if(_0xd41ax4[_0x519b[6]]==_0x519b[7]){_0xd41ax4[_0x519b[6]]=_0x519b[8];} ;_0xd41ax4[_0x519b[9]]=parseInt(_0xd41ax4[_0x519b[10]],10)+parseInt(_0xd41ax4[_0x519b[11]],10);_0xd41ax4[_0x519b[12]]=parseInt(_0xd41ax4[_0x519b[12]],10);_0xd41ax4[_0x519b[13]]=parseInt(_0xd41ax4[_0x519b[13]],10)*1000;var _0xd41ax5=_0xd41ax1(this),_0xd41ax6=_0xd41ax5[_0x519b[15]](_0x519b[14]),_0xd41ax7=_0xd41ax6[_0x519b[15]](_0x519b[16]),_0xd41ax8=_0xd41ax6[_0x519b[15]](_0x519b[17]),_0xd41ax9=_0xd41ax5[_0x519b[15]](_0x519b[18]),_0xd41axa={},_0xd41axb=_0x519b[8],_0xd41axc={},_0xd41axd=_0x519b[8],_0xd41axe=function (){_0xd41axc[_0xd41axd]=_0xd41ax4[_0x519b[9]];_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),_0xd41ax4[_0x519b[6]]);_0xd41ax5[_0x519b[21]](_0x519b[20]);} ,_0xd41axf=function (){_0xd41axc[_0xd41axd]=-Math[_0x519b[22]](34-_0xd41ax4[_0x519b[10]]);_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),function (){_0xd41ax10();} );} ,_0xd41ax10=function (){_0xd41axa[_0xd41axb]=0;_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],_0xd41ax4[_0x519b[6]],function (){_0xd41ax5[_0x519b[23]](_0x519b[20]);} );} ,_0xd41ax11=function (){_0xd41axa[_0xd41axb]=-_0xd41ax4[_0x519b[9]];_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],function (){_0xd41axe();} );} ,_0xd41ax12=false;switch(_0xd41ax4[_0x519b[28]]){case _0x519b[3]:_0xd41axb=_0x519b[24];_0xd41axd=_0x519b[3];break ;;case _0x519b[25]:_0xd41axb=_0x519b[3];_0xd41axd=_0x519b[3];break ;;case _0x519b[27]:_0xd41axb=_0x519b[26];_0xd41axd=_0x519b[26];break ;;} ;_0xd41ax5[_0x519b[29]]();_0xd41ax5[_0x519b[33]](_0x519b[32])[_0x519b[31]]({display:_0x519b[30]});if(_0xd41ax6[_0x519b[15]](_0x519b[35])[_0x519b[34]]){bloggernotificationExtras[_0x519b[37]][_0x519b[36]]();} ;if(_0xd41ax12&&_0xd41ax4[_0x519b[38]]&&_0xd41ax4[_0x519b[39]]){setTimeout(function (){_0xd41axe();} ,_0xd41ax4[_0x519b[13]]);} else {setTimeout(function (){_0xd41ax10();} ,_0xd41ax4[_0x519b[13]]);} ;_0xd41ax8[_0x519b[40]](function (){_0xd41ax11();setCookie();} );_0xd41ax9[_0x519b[40]](function (){_0xd41axf();setCookie();} );_0xd41ax7[_0x519b[40]](function (){_0xd41ax1[_0x519b[43]]({type:_0x519b[41],data:_0x519b[42],success:function (_0xd41ax13){} });return true;} );} ;} )(window[_0x519b[0]]);jQuery(document)[_0x519b[49]](function (_0xd41ax1){_0xd41ax1(_0x519b[14])[_0x519b[45]](_0x519b[44]);if(!_0xd41ax1[_0x519b[6]][_0x519b[47]](_0x519b[46])){_0xd41ax1[_0x519b[5]](_0xd41ax1[_0x519b[6]],{easeOutBounce:function (_0xd41ax14,_0xd41ax15,_0xd41ax16,_0xd41ax17,_0xd41ax18){if((_0xd41ax15/=_0xd41ax18)<(1/2.75)){return _0xd41ax17*(7.5625*_0xd41ax15*_0xd41ax15)+_0xd41ax16;} else {if(_0xd41ax15<(2/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(1.5/2.75))*_0xd41ax15+0.75)+_0xd41ax16;} else {if(_0xd41ax15<(2.5/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.25/2.75))*_0xd41ax15+0.9375)+_0xd41ax16;} else {return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.625/2.75))*_0xd41ax15+0.984375)+_0xd41ax16;} ;} ;} ;} });} ;_0xd41ax1(_0x519b[48])[_0x519b[1]]({position:_0x519b[3],showAfter:0,keepHidden:true,duration:300,closeable:true,height:40,borderSize:1,easing:_0x519b[7]});} );
//]]>
</script>

Step 4: Now it’s time add CSS scripts. For adding Style to your Bar search for ]]></b:skin> in your template.

Step 5: Abd just Above/ Before ]]></b:skin>, Paste the following Code given below.

/* —- 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(https://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(https://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat right 50%;
}

Now you have added the Notification Bar in your Blog. Now, you want to add your Announcements. For adding your announcements just follow my simple steps given bellow,

Step 6: For adding your Annuncements, Search For <body> in your Template.

Step 7: Then, Paste the following code just below/ after <body>

<div class=’openbloggernotification’ id=’bloggernotificationWrap’ style=’display: block; margin-top: 0px;’><div id=’bloggernotification’>
Add Your Notification Message Here
<span id=’closebloggernotification’/></div><span id=’openbloggernotification’ style=’top: -6px;’><span/></span></div>
<br/><br/>

Step 8: Now replace “Add Your Notification Message Here.” with your Message.

Step 9: If you like to add Links, then add the following code given below with your message.

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

Step 10: Now, replace the ADD-URL-HERE With Your Message Link.

Step 11: And, just replace the Link Text With yout Link text/ message and save your Template by hitting the Save Template Button.

Conclusion

Now, check your blog. Awesome ah..? I hope you’ve liked this tutorial and this tool Bar. Kindly share this tutorial with your friends and share your thoughts in comments below. If you’re facing any problem while adding this widget in your blog, then leave those problems in comments. I will try to solve those problems as soon as possible. Have some fun in Blogging 🙂