Skillbar!! A Premium Blogger Notification Bar

Hey Visitor's !! There are lots of "Blogger Notification bar" available into blogosphere but they came with branding which has non-removable property.So, Today skillblogger is going to share a cool, stylish and premium widget without any branding and hidden credits. In these days it became trend to implement this type of Floating Notification in blogs,and the most important thing that it looks great also. These days many popular blogs are using this type of bars.it looks cool and stylish at the top of your blog. You can put notification about your latest or popular post, so that a visitor of your blog can easilly get in touch of that topic or article.The skill bar can easilly closed and opened by the buttons, which are in the right side of the bar. The widget works very smooth cause it is supported by jquery coding and styled by css.Customization of this widget is very easy, you can easily change the the background,border color and text color.Let's have a demo of the skill bar.

Live Demo

© Skillblogger™

Click to See

Features of the Skill Bar:-

• Looks very cool and stylish
• Works very smooth and clean
• Open and close button included 
• Easy to customize
• No Brandings at all - Important!!

How to install This widget:-These  steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.

• Go To Blogger.com >> Your Blog >> Template
• Now Backup your template.
• Then select Edit HTML >> Proceed
• Don’t forget to Click/Tick the Expand Template Widgets box.
• Search for ]]></b:skin> and just above it paste the following  CSS code.

/* Skillblogger Notification bar */#skillbarWrap{display: none;margin: 0;padding: 0;position: fixed;margin-top: -41px;z-index: 999999;width: 100%;height: 41px;}#skillbar {width: 100%;height: 28px;margin: 0px;padding-top: 7px;text-align: center;box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: url(http://emitez.com/wp-content/themes/BloggingCageTheme/images/nav.png);position: relative;box-shadow: 1px 2px 9px #666666;z-index: 9998;text-decoration: none;color: #eeeeee;font-family: arial,sans-serif;font-size: 13px;font-weight: bold;text-shadow: 1px 1px 4px rgb(0, 0, 0);border-bottom: 2px solid #cccccc;}#skillbar a{text-decoration: none;color: #fff;font-family: arial,sans-serif;font-size: 13px;font-weight: bold;text-shadow: 1px 1px 1px #000;outline: none;}#skillbar a:hover{text-decoration: underline;}#skillbarWrap #closeskillbar{display: block;position: absolute;top: 0;right: 23px;height: 40px;width: 21px;background: url(https://dl.dropboxusercontent.com/u/87055319/light.png) no-repeat 0 center;cursor: pointer;}#skillbarWrap #closeskillbar:hover{background-position: -21px 50%;}#skillbarWrap.bottomPosition #closeskillbar{background-position: right 50%;}#skillbarWrap.bottomPosition #closeskillbar:hover{background-position: -42px 50%;}#skillbarWrap #openskillbar{display: block;position: absolute;top: -6px;right: 15px;padding: 0 7px;box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: url(http://emitez.com/wp-content/themes/BloggingCageTheme/images/nav.png);border-left: 2px solid #dddddd;border-right: 2px solid #dddddd;border-bottom: 2px solid #dddddd;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: 1px 2px 9px #333333;}#skillbarWrap #openskillbar span{display: block;width: 21px;height: 34px;background: url(https://dl.dropboxusercontent.com/u/87055319/light.png) no-repeat right 50%;}

 Now We have to add the Jquery code in your template which will responsible for the function of the bar.

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/><script language='JavaScript'>//<![CDATA[var _0x519b = ["jQuery", "skillbar", "fn", "top", "linear", "extend", "easing", "swing", "", "totalHeight", "height", "borderSize", "duration", "showAfter", "#skillbar", "find", ".link", "#closeskillbar", "#openskillbar", "animate", "openskillbar", "removeClass", "abs", "addClass", "marginTop", "top_fixed", "bottom", "bottom_fixed", "position", "detach", "block", "css", "body", "prependTo", "length", ".multiMessages", "init", "multipleMessages", "keepHidden", "closeable", "click", "post", "click=true", "ajax", "<a style=\"margin-top:5px; margin-left:7px; color:#666666; float:left;\" target=\"_blank\" href=\"http://www.skillblogger.com\"><img src=\"http://www.skillblogger.com/favicon.ico\"/></a>", "prepend", "easeOutBounce", "hasOwnProperty", "#skillbarWrap", "ready"];;;(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>

Now let’s add the final and important part of the widget, Search for <body>  and just below/after it paste the following coding.

<div class='openskillbar' id='skillbarWrap' style='display: block; margin-top: 0px;'><div id='skillbar'> This Bar is Customized By Deep Sinha<span id='closeskillbar'/></div><span id='openskillbar' style='top: -6px;'><span/></span></div>  <br/>  <br/>

All Done : Now everything is completed just  Save your Template by pressing Save template button.