This plugin will help you show a notification o your notification bar to your visitors to display a new offer, a feature article or just an HTML message. This Notify Bar Plugin For Blogger on Blogspot is really useful for all internet marketers.
Notification Bar Widget Features
-Message support HTML code, so you can input your custom form for this bar.
-100% Responsive, best for marketing on mobiles and tablets
-Custom main color, background image, open / close button.
-Modern Call to Action button that supports change color and also be disabled.
-Remember show / hide state to display right in next time visitor access your blog.
How to set your notification to your bar on blogspot for bloggers.
Copy this code:
<style type=”text/css”>
#blogger-item-widget-bundle-notify-bar-2539 {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
overflow: hidden;
}
#blogger-item-widget-bundle-notify-bar-2539 .inner-2539 {
background: /*bgc-s*/#eb593c/*bgc-e*/ /*bgi-s*/url(http://3.bp.blogspot.com/-aL53yRizFUw/UWp59ta5Z8I/AAAAAAAAEQ8/YkXeygaH2Fw/s1600/background.png) repeat-x center center;/*bgi-e*/
overflow: hidden;
border-bottom: 3px solid #FFF
}
#blogger-item-widget-bundle-notify-bar-2539 .shaddow-2539 {
height: 3px;
background: #111;
width: 100%;
filter: alpha(opacity=20);
opacity: 0.2;
border-bottom: 1px solid #222;
}
#blogger-item-widget-bundle-notify-bar-2539 .help-2539 {
float: left;
}
#blogger-item-widget-bundle-notify-bar-2539 .help-2539 a {
display: /*copy-s*/block;/*copy-e*/
color: #FFF;
line-height: 1em;
text-align: center;
filter: alpha(opacity=60);
opacity: 0.6;
font-size: 20px;
position: fixed;
top: 14px;
left: 13px;
text-shadow: 2px 2px 2px #000;
}
#blogger-item-widget-bundle-notify-bar-2539 .help-2539 a:hover {
filter: alpha(opacity=100);
opacity: 1;
}
#blogger-item-widget-bundle-notify-bar-2539 .main-2539 {
text-align: center;
max-width: 80%;
margin: auto;
padding: 11px 0 11px 0;
}
#blogger-item-widget-bundle-notify-bar-2539 .message {
font-size: 18px;
color: white;
text-shadow: 1px 1px 3px black;
display: inline-block;
*display: inline;
zoom: 1;
}
#blogger-item-widget-bundle-notify-bar-2539 a.action-2539 {
display: inline-block;
*display: inline;
zoom: 1;
font-size: 12px;
font-weight:bold;
color: #ffffff;
padding: 5px 20px;
margin: 0 0 0 20px;
background: -moz-linear-gradient(
top,
/*btn-c-1-s*/#79caf0/*btn-c-1-e*/ 0%,
/*btn-c-2-s*/#05a6db/*btn-c-2-e*/ 10%,
/*btn-c-3-s*/#028ecf/*btn-c-3-e*/);
background: -webkit-gradient(
linear, left top, left bottom,
from(/*btn-c-1-s*/#79caf0/*btn-c-1-e*/),
color-stop(0.10, /*btn-c-2-s*/#05a6db/*btn-c-2-e*/),
to(/*btn-c-3-s*/#028ecf/*btn-c-3-e*/));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #005070;
-moz-box-shadow:
1px 1px 2px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
1px 1px 2px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
1px 1px 2px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
1px 1px 0px rgba(255,255,255,0.3),
0px 0px 0px rgba(0,0,0,0.3);
}
#blogger-item-widget-bundle-notify-bar-2539 .close-2539 a {
display: block;
color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
font-size: 25px;
position: fixed;
top: 11px;
right: 20px;
text-shadow: 2px 2px 2px #FFF;
line-height:0;
cursor: pointer;
}
#blogger-item-widget-bundle-notify-bar-2539 .close-2539 a:hover {
filter: alpha(opacity=100);
opacity: 1;
}
#blogger-item-widget-bundle-notify-bar-2539 .open-2539 {
display: none;
}
#blogger-item-widget-bundle-notify-bar-2539 .open-2539 a {
background: /*bgc-s*/#eb593c/*bgc-e*/;
color: #FFF;
display: block;
position: fixed;
top: 0;
right: 13px;
padding: 3px 6px;
font-weight: bold;
text-transform: uppercase;
border: 3px solid #FFF;
border-top: none;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
font-size: 20px;
-moz-box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0px 0px 5px #999;
cursor: pointer;
}
#blogger-item-widget-bundle-notify-bar-2539 .open-2539 a:hover {
background:black;
}
</style>
<div id=”blogger-item-widget-bundle-notify-bar-2539-hook”></div><!–del this if insert inside Blog widget –>
<script type=”text/javascript”>
/*
Name: Hello Notify Bar for Blogger / Blogspot
Author: Tien Nguyen
Site: http://www.ayomidelalemi.com/
Version: 1.0
License GNU
*/
// Flag check jQuery
if (typeof(jquery_included) == ‘undefined’) {
var jquery_included = false;
}
/*USER SETTING*/
var Message_Text = ‘All you need to know about blogging..’;/*Message_Text*/
var Button_Text = ‘Check it out!!!‘;/*Button_Text*/
var Permalink = ‘https://www.ayomidelalemi.com/?m=1‘;/*Permalink*/
var Close_Text = ‘<i class=”fa fa-arrow-up”></i>’;/*Close_Text*/
var Open_Text = ‘<i class=”fa fa-arrow-down”></i>’;/*Open_Text*/
var Link_Target = ‘_blank’;/*Link_Target*/
_s7HhI = [‘; expires=’,’; path=/’,”=”,”;”,”=”,”=”,””,’undefined’,’undefined’,’script’,’src’,’http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’,’type’,’text/javascript’,’head’,’link[href*=”font-awesome.css”]’,’link’,’href’,’http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’,’rel’,’stylesheet’,’head’,’blogger-item-widget-bundle-notify-bar-2539′,’https://www.ayomidelalemi.com/2020/02/cool-notification-bar-widget-for.html’,’ <div id=”‘,'”> <div class=”inner-2539″> <div class=”help-2539″> <a href=”‘,'” target=”_blank” title=”Hello Notify Bar for Blogger Blogspot”><i class=”fa fa-info-circle”></i></a> </div> <div class=”main-2539″> <div class=”message”>’,'</div> ‘,'<a class=”action-2539″ href=”‘,'” target=”‘,'”>’,'</a>’,”,’ </div> <div class=”close-2539″> <a>’,'</a> </div> </div> <div class=”shaddow-2539″></div> <div class=”open-2539″> <a>’,'</a> </div> </div>’,’body’,’blogger_item_widget_bundle_notify_bar_2539′,”,’#’,’ .open-2539′,’display’,’none’,’#’,’ .inner-2539′,’display’,’block’,’#’,’ .shaddow-2539′,’display’,’block’,’#’,’ .inner-2539′,’height’,’html’,’#’,’ .inner-2539′,’display’,’none’,’#’,’ .shaddow-2539′,’display’,’none’,’#’,’ .open-2539′,’display’,’block’,’html’,’#’,’display’,’block’,’#’,’ .close-2539 a’,’click’,’#’,’ .inner-2539′,’#’,’ .shaddow-2539′,’#’,’ .open-2539′,’html’,’blogger_item_widget_bundle_notify_bar_2539′,’#’,’ .open-2539 a’,’click’,’#’,’ .open-2539′,’#’,’ .inner-2539′,’#’,’ .inner-2539′,’height’,’html’,’#’,’ .shaddow-2539′,’blogger_item_widget_bundle_notify_bar_2539′,”,’#’,’-hook’,’div.widget’,’display’,’none’,’#’,’-hook’,’div.widget’,’body’];function _fNxE(c_name,value,exdays){var _vRaJ=new Date();_vRaJ.setDate(_vRaJ.getDate()+exdays);var _vQqT=escape(value)+((exdays==null)?”:_s7HhI[0]+_vRaJ.toUTCString())+_s7HhI[1];document.cookie=c_name+_s7HhI[2]+_vQqT;}function _fZpH(c_name){var _vUcG,x,y,ARRcookies=document.cookie.split(_s7HhI[3]);for(_vUcG=0;_vUcG<ARRcookies.length;_vUcG++){x=ARRcookies[_vUcG].substr(0,ARRcookies[_vUcG].indexOf(_s7HhI[4]));y=ARRcookies[_vUcG].substr(ARRcookies[_vUcG].indexOf(_s7HhI[5])+1);x=x.replace(/^s+|s+$/g,_s7HhI[6]);if(x==c_name){return unescape(y);}}}if(typeof(blogger_item_widget_bundle_notify_bar_2539)==_s7HhI[7]){blogger_item_widget_bundle_notify_bar_2539=false;}if(!blogger_item_widget_bundle_notify_bar_2539){blogger_item_widget_bundle_notify_bar_2539=true;function _fOuA(){if(typeof(jQuery)==_s7HhI[8]){if(!jquery_included){jquery_included=true;var _vNqG=document.createElement(_s7HhI[9]);_vNqG.setAttribute(_s7HhI[10],_s7HhI[11]);_vNqG.setAttribute(_s7HhI[12],_s7HhI[13]);document.getElementsByTagName(_s7HhI[14])[0].appendChild(_vNqG);}setTimeout(function(){_fOuA();},50);} else{$(function(){if(!($(_s7HhI[15]).length)){_vNqG=document.createElement(_s7HhI[16]);_vNqG.setAttribute(_s7HhI[17],_s7HhI[18]);_vNqG.setAttribute(_s7HhI[19],_s7HhI[20]);document.getElementsByTagName(_s7HhI[21])[0].appendChild(_vNqG);}var _vUwK=_s7HhI[22];var _vJjX=_s7HhI[23];var _vZlH=_s7HhI[24]+_vUwK+_s7HhI[25]+_vJjX+_s7HhI[26]+Message_Text+_s7HhI[27]+((Button_Text)?(_s7HhI[28]+Permalink+_s7HhI[29]+Link_Target+_s7HhI[30]+Button_Text+_s7HhI[31]):(_s7HhI[32]))+_s7HhI[33]+Close_Text+_s7HhI[34]+Open_Text+_s7HhI[35];$(_s7HhI[36]).append(_vZlH);$(document).ready(function(){open_status=_fZpH(_s7HhI[37]);if(open_status==_s7HhI[38]||open_status==null){$(_s7HhI[39]+_vUwK+_s7HhI[40]).css(_s7HhI[41],_s7HhI[42]);$(_s7HhI[43]+_vUwK+_s7HhI[44]).css(_s7HhI[45],_s7HhI[46]);$(_s7HhI[47]+_vUwK+_s7HhI[48]).css(_s7HhI[49],_s7HhI[50]);var _vXfJ=$(_s7HhI[51]+_vUwK+_s7HhI[52]).css(_s7HhI[53]);$(_s7HhI[54]).animate({marginTop:_vXfJ},100);}else{$(_s7HhI[55]+_vUwK+_s7HhI[56]).css(_s7HhI[57],_s7HhI[58]);$(_s7HhI[59]+_vUwK+_s7HhI[60]).css(_s7HhI[61],_s7HhI[62]);$(_s7HhI[63]+_vUwK+_s7HhI[64]).css(_s7HhI[65],_s7HhI[66]);$(_s7HhI[67]).animate({marginTop:0},100);}$(_s7HhI[68]+_vUwK).css(_s7HhI[69],_s7HhI[70]);$(document).delegate(_s7HhI[71]+_vUwK+_s7HhI[72],_s7HhI[73],function(){$(_s7HhI[74]+_vUwK+_s7HhI[75]).slideUp(100);$(_s7HhI[76]+_vUwK+_s7HhI[77]).slideUp(100);$(_s7HhI[78]+_vUwK+_s7HhI[79]).slideDown(100);$(_s7HhI[80]).animate({marginTop:0},100);_fNxE(_s7HhI[81],1,365);});$(document).delegate(_s7HhI[82]+_vUwK+_s7HhI[83],_s7HhI[84],function(){$(_s7HhI[85]+_vUwK+_s7HhI[86]).slideUp(100);$(_s7HhI[87]+_vUwK+_s7HhI[88]).slideDown(100,function(){var _vXfJ=$(_s7HhI[89]+_vUwK+_s7HhI[90]).css(_s7HhI[91]);$(_s7HhI[92]).animate({marginTop:_vXfJ},100);});$(_s7HhI[93]+_vUwK+_s7HhI[94]).slideDown(100);_fNxE(_s7HhI[95],_s7HhI[96],365);});$(_s7HhI[97]+_vUwK+_s7HhI[98]).parents(_s7HhI[99]).css(_s7HhI[100],_s7HhI[101]);$(_s7HhI[102]+_vUwK+_s7HhI[103]).parents(_s7HhI[104]).appendTo(_s7HhI[105]);});});}}_fOuA();}
</script>
After copying the codes above, Login on blogger.com , go to layout on your control panel then add a Gadget.This will bring up a choose element page .
Locate the entry for ” HTML/JAVASCRIPT” and click on the Add to blog button.this will bring up a new page allowing you to add some HTML or JAVASCRIPT to your sidebar. You can input or type in whatever you want to give the block that will contain the widget and you can also call the tittle “notification”. Now paste the code above into the box labeled CONTENT. Click the save change button.
After saving it , your notification bar should look like this below.
Note: make sure you chage the highlighted blue part above (codes) to yours.
If your still finding it difficult, you can fill the contact form with your difficulties.
Cheers????
ayomidelalemi 
Admin