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! :)
Jquery is indeed the most compressed and efficient library of JavaScript introduced so far that has made a web developer's job more easy. Its built in functions of show(), hide(), AJAX() and my beloved scrollTop() are indeed the most used functions that gives a new life to user interface (UI). 
Unlike Facebook, 
Wordpress version 3.5 recently got released and just like always, many webmasters are striking their heads against the wall due to newly introduced database errors. Wordpress emphasize greatly to backup your database before making any change but most often we forget to backup and click the Upgrade button in hurry- what follows next is a horrible nightmare for those who are not well versed with MySQL 
Running an 
Well, this post is not an ordinary one that talks about "
These days when online earning through blogs and websites is turning into one of the most appealing businesses, there are unavoidable risks of getting your website been hacked. How about malicious content been injected on your website, forcing your readers to never come back to pay a visit? The thought is itself awful, isn’t it? A good news is, Google has lately announced that it has some solutions for those webmasters who are the victim of website hacking.
Blogging is becoming the most promising online business gradually, however, there are few who find themselves lucky enough to enjoy a good revenue been generated through it. There is no doubt that advertisements act as the soul of earning and we must thank Google for introducing its AdSense program. It has been lately seen that Google seems more interested in targeting the issues of its clients and in order to enhance the earnings of the publishers, it has recently introduced a new 
