Blogger Notification Bar! | | .::APAJR::. ~ Today's Technology

Looks like the new year is near! Out of the premium sets of design resources in our repository, we often share one of them as a freebie when the occasion is precious. There are many creative premium widgets, tools and plugins that we managed to develop this month for our regular clients and out of these I will be sharing just two such resources as a new year gift. They are: (1) Blogger Notification bar widget that you can see live on our blog at the top and (2) a Blogger Template entitled "Rajeev" which is far better than any of the templates we designed so far and makes us really jealous when we compare it to our current design of APAJR blog itself!

Copyright

Bloggers and developers are hereby advised not to sell or redistribute the widget codes. You are also instructed not to remove MBT's watermark from the notification bar. Removing the watermark will break the entire code, leaving all your efforts in vain.

Premium version includes no watermarks. If you wish to buy the widget for Wordpress, Joomla or even Blogger Blogs, then you may kindly contact us via our services page.

What's New in it?

This notification bar works best by grabbing readers attention and helps you to focus readers towards important deals, announcements or any story. It functions on pure JQuery light-weight functions and is compatible with all major browsers including IE9.

Custom, unique and non-commercial plugins are always better then public designs. HelloBar is now too common and used everywhere and you may not like the limited design customizations offers provided by them along with their logo on the plugin. HelloBar also requests URL redirection and you need to register to use it. Scripts are stored at Hellobar server and the browser needs to send a request in order to display it on your blog or site. Really not appropriate if you don't like redirections and attribution links.

Blogger Notification bar requires no registration and provides far better design flexibility. The scripts are less than 6KB in size and fully hosted at your server. You can change its look and theme to any color that may blend your layouts. Every single element is well structured and can easily be configured. A perfect tool to play with.

I will be always available to provide any help required here on this page.

Installing Notification Bar on blogger

You may follow the easy steps mentioned below in order to add the widget to your blogger blogs. Same procedure will work for any other platform like Wordpress.

Go To Blogger > Template
Backup your template
Click Edit HTML
Search for <head>
Paste the following scripts just below it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script><!--Blogger Notification Bar by www.apajrlab.tk--><script language='JavaScript'>//<![CDATA[ var _0x519b=["\x6A\x51\x75\x65\x72\x79","\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x6E","\x74\x6F\x70","\x6C\x69\x6E\x65\x61\x72","\x65\x78\x74\x65\x6E\x64","\x65\x61\x73\x69\x6E\x67","\x73\x77\x69\x6E\x67","","\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74","\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x73\x68\x6F\x77\x41\x66\x74\x65\x72","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x2E\x6C\x69\x6E\x6B","\x23\x63\x6C\x6F\x73\x65\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x62\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70","\x74\x6F\x70\x5F\x66\x69\x78\x65\x64","\x62\x6F\x74\x74\x6F\x6D","\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x64\x65\x74\x61\x63\x68","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x62\x6F\x64\x79","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6C\x65\x6E\x67\x74\x68","\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73","\x69\x6E\x69\x74","\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73","\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E","\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65","\x63\x6C\x69\x63\x6B","\x70\x6F\x73\x74","\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65","\x61\x6A\x61\x78","\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70\x3A\x35\x70\x78\x3B\x20\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74\x3A\x37\x70\x78\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x36\x36\x36\x3B\x20\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x54\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x36\x44\x37\x6D\x2D\x69\x74\x57\x64\x6E\x6F\x2F\x55\x4E\x32\x77\x30\x54\x54\x33\x5A\x6C\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x49\x59\x63\x2F\x43\x4A\x78\x64\x73\x4C\x72\x57\x6B\x51\x67\x2F\x73\x34\x30\x30\x2F\x6D\x62\x74\x2E\x70\x6E\x67\x22\x2F\x3E\x3C\x2F\x61\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65","\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70","\x72\x65\x61\x64\x79"];;;(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>

6. Next search for ]]></b:skin>

7. Just above it paste the following styles:

/* ----Blogger Notification bar by www.apjrlab.tk----- */ #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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrgY3XZu3HQYrgn7jaMzUt_vPGeu0rb25btQZt1-VJCXW3womd3_-Zq1AtpuuhJseZ0tb1sFOnZcQW_yfDVAOl3ZSTCuU_CJ1NSqgc5FvK8Euq8aAU_Agx7we2GBfc3oZ1b7fl-K9EkKu/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXrgY3XZu3HQYrgn7jaMzUt_vPGeu0rb25btQZt1-VJCXW3womd3_-Zq1AtpuuhJseZ0tb1sFOnZcQW_yfDVAOl3ZSTCuU_CJ1NSqgc5FvK8Euq8aAU_Agx7we2GBfc3oZ1b7fl-K9EkKu/s400/light.png) no-repeat right 50%; }

Make these Design changes if you wish:

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! :)

8. Finally to make the bar appear just add the following code below <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/>

9. Save your template and you are all done!

Creating links

To create links inside the notification bar use the following code:

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

You must add the class='link' , which is required by the script.

Need help?

This plugin would work just fine if all the above steps are carefully followed. The steps are extremely easy to try. I just hope you find it worth using. If you ran into any technical problem just feel confident to leave your comments. I would love to help you out. Wishing you all the best of life buddies. Peace and blessings pals! :)

Today's Technology

Monday 30 December 2013