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 "Salahuddin Ayubi" 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 MBT 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.
You may also enjoy trying out some of our previous stickybars:
- Create a StickyBar and add it to Top
- Add a StickyBar at Bottom of your page
- How to Create a Stickybar with "Close Button"?
- JQuery Styickybar with slide panel
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.MyBloggerTricks.com-->
<script language='JavaScript'>
//<![CDATA[
;;(function(_0xce58x0){_0xce58x0["\x66\x6E"]["\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E"]=function(_0xce58x1){var _0xce58x2={duration:500,position:"\x74\x6F\x70",closeable:true,showAfter:0,keepHidden:false,borderSize:3,height:40,easing:"\x6C\x69\x6E\x65\x61\x72"},_0xce58x3=_0xce58x0["\x65\x78\x74\x65\x6E\x64"]({},_0xce58x2,_0xce58x1);if(_0xce58x3["\x65\x61\x73\x69\x6E\x67"]=="\x73\x77\x69\x6E\x67"){_0xce58x3["\x65\x61\x73\x69\x6E\x67"]=""};_0xce58x3["\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74"]=parseInt(_0xce58x3["\x68\x65\x69\x67\x68\x74"],10)+parseInt(_0xce58x3["\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65"],10);_0xce58x3["\x64\x75\x72\x61\x74\x69\x6F\x6E"]=parseInt(_0xce58x3["\x64\x75\x72\x61\x74\x69\x6F\x6E"],10);_0xce58x3["\x73\x68\x6F\x77\x41\x66\x74\x65\x72"]=parseInt(_0xce58x3["\x73\x68\x6F\x77\x41\x66\x74\x65\x72"],10)*1000;var _0xce58x4=_0xce58x0(this),_0xce58x5=_0xce58x4["\x66\x69\x6E\x64"]("\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E"),_0xce58x6=_0xce58x5["\x66\x69\x6E\x64"]("\x2E\x6C\x69\x6E\x6B"),_0xce58x7=_0xce58x5["\x66\x69\x6E\x64"]("\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"),_0xce58x8=_0xce58x4["\x66\x69\x6E\x64"]("\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E"),_0xce58x9={},_0xce58xa="",_0xce58xb={},_0xce58xc="",_0xce58xd=function(){_0xce58xb[_0xce58xc]=_0xce58x3["\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74"];_0xce58x8["\x61\x6E\x69\x6D\x61\x74\x65"](_0xce58xb,(_0xce58x3["\x64\x75\x72\x61\x74\x69\x6F\x6E"]/2),_0xce58x3["\x65\x61\x73\x69\x6E\x67"]);_0xce58x4["\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73"]("\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E");},_0xce58xe=function(){_0xce58xb[_0xce58xc]=-Math["\x61\x62\x73"](34-_0xce58x3["\x68\x65\x69\x67\x68\x74"]);_0xce58x8["\x61\x6E\x69\x6D\x61\x74\x65"](_0xce58xb,(_0xce58x3["\x64\x75\x72\x61\x74\x69\x6F\x6E"]/2),function(){_0xce58xf()});},_0xce58xf=function(){_0xce58x9[_0xce58xa]=0;_0xce58x4["\x61\x6E\x69\x6D\x61\x74\x65"](_0xce58x9,_0xce58x3["\x64\x75\x72\x61\x74\x69\x6F\x6E"],_0xce58x3["\x65\x61\x73\x69\x6E\x67"],function(){_0xce58x4["\x61\x64\x64\x43\x6C\x61\x73\x73"]("\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E")});},_0xce58x10=function(){_0xce58x9[_0xce58xa]=-_0xce58x3["\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74"];_0xce58x4["\x61\x6E\x69\x6D\x61\x74\x65"](_0xce58x9,_0xce58x3["\x64\x75\x72\x61\x74\x69\x6F\x6E"],function(){_0xce58xd()});},_0xce58x11=false;switch(_0xce58x3["\x70\x6F\x73\x69\x74\x69\x6F\x6E"]){case "\x74\x6F\x70":_0xce58xa="\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70";_0xce58xc="\x74\x6F\x70";break ;;case "\x74\x6F\x70\x5F\x66\x69\x78\x65\x64":_0xce58xa="\x74\x6F\x70";_0xce58xc="\x74\x6F\x70";break ;;case "\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64":_0xce58xa="\x62\x6F\x74\x74\x6F\x6D";_0xce58xc="\x62\x6F\x74\x74\x6F\x6D";break ;;};_0xce58x4["\x64\x65\x74\x61\x63\x68"]();_0xce58x4["\x70\x72\x65\x70\x65\x6E\x64\x54\x6F"]("\x62\x6F\x64\x79")["\x63\x73\x73"]({display:"\x62\x6C\x6F\x63\x6B"});if(_0xce58x5["\x66\x69\x6E\x64"]("\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73")["\x6C\x65\x6E\x67\x74\x68"]){bloggernotificationExtras["\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73"]["\x69\x6E\x69\x74"]()};if(_0xce58x11&&_0xce58x3["\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E"]&&_0xce58x3["\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65"]){setTimeout(function(){_0xce58xd()},_0xce58x3["\x73\x68\x6F\x77\x41\x66\x74\x65\x72"])}else {setTimeout(function(){_0xce58xf()},_0xce58x3["\x73\x68\x6F\x77\x41\x66\x74\x65\x72"])};_0xce58x7["\x63\x6C\x69\x63\x6B"](function(){_0xce58x10();setCookie();});_0xce58x8["\x63\x6C\x69\x63\x6B"](function(){_0xce58xe();setCookie();});_0xce58x6["\x63\x6C\x69\x63\x6B"](function(){_0xce58x0["\x61\x6A\x61\x78"]({type:"\x70\x6F\x73\x74",data:"\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65",success:function(_0xce58x12){}});return true;});}})(window["\x6A\x51\x75\x65\x72\x79"]);jQuery(document)["\x72\x65\x61\x64\x79"](function(_0xce58x0){_0xce58x0("\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E")["\x70\x72\x65\x70\x65\x6E\x64"]("\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\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x32\x2F\x31\x32\x2F\x72\x65\x6C\x65\x61\x73\x69\x6E\x67\x2D\x62\x6C\x6F\x67\x67\x65\x72\x2D\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x2D\x62\x61\x72\x2E\x68\x74\x6D\x6C\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");if(!_0xce58x0["\x65\x61\x73\x69\x6E\x67"]["\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79"]("\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65")){_0xce58x0["\x65\x78\x74\x65\x6E\x64"](_0xce58x0["\x65\x61\x73\x69\x6E\x67"],{easeOutBounce:function(_0xce58x13,_0xce58x14,_0xce58x15,_0xce58x16,_0xce58x17){if((_0xce58x14/=_0xce58x17)<(1/2.75)){return _0xce58x16*(7.5625*_0xce58x14*_0xce58x14)+_0xce58x15}else {if(_0xce58x14<(2/2.75)){return _0xce58x16*(7.5625*(_0xce58x14-=(1.5/2.75))*_0xce58x14+0.75)+_0xce58x15}else {if(_0xce58x14<(2.5/2.75)){return _0xce58x16*(7.5625*(_0xce58x14-=(2.25/2.75))*_0xce58x14+0.9375)+_0xce58x15}else {return _0xce58x16*(7.5625*(_0xce58x14-=(2.625/2.75))*_0xce58x14+0.984375)+_0xce58x15}}}}})};_0xce58x0("\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70")["\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E"]({position:"\x74\x6F\x70",showAfter:0,keepHidden:true,duration:300,closeable:true,height:40,borderSize:1,easing:"\x73\x77\x69\x6E\x67"});});
//]]>
</script>
6. Next search for ]]></b:skin>
7. Just above it paste the following styles:
/* ----Blogger Notification bar by www.MyBloggerTricks.com----- */
#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/AVvXsEjJKIEip3O_M81B6OkfzvgoScCN5wBp2cydQ1jUdUCbRKEr5_L1UnkzoTcJdNt02EtcGrpXQ5RwTdFo2B1OF3ku55TLe6v7wq1mmPR7qqqMSX4fi38dEnhx3ltUYDRHaIuaQ1Qr1MBx27LW/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/AVvXsEjJKIEip3O_M81B6OkfzvgoScCN5wBp2cydQ1jUdUCbRKEr5_L1UnkzoTcJdNt02EtcGrpXQ5RwTdFo2B1OF3ku55TLe6v7wq1mmPR7qqqMSX4fi38dEnhx3ltUYDRHaIuaQ1Qr1MBx27LW/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! :)
