A Notification bar is a great area that is placed mostly at the top of a website and generally or may be highlighted with a bright or attracting background so as to attract the visitors.
Notification bars usually contains some text and images or both or may contain links to other important web pages like discount and special offers, latest post, etc. to notify its visitors.
Benefits of adding a notification bar widget
As it always stays permanently at the top of your site, even if your visitors scroll your page, it will stay permanently at the top of your site and thus does not come in the way of your visitors.
Notification can reduce your high bounce rate by showing notification about your latest post.
Increase engagement for your site by displaying your important features your latest blog post, etc.
Your site visitors need not have to dismiss your notification bar to read your contents.
Your organic traffic will get boosted by Google and other search engines.
Increase lead generation by showing notification of your offers and discounts.
Increase social media interactions, if you add a link to your social media pages like Facebook, Twitter, etc.
So, here I have 9 best notification bars for your Blogger that you can embed right away with just 4 simple steps.
You just have to follow the steps and paste your selected notification bar style’s CSS code, HTML code and JQuery/JS in your template/theme and you will be done within no time. So,
You just have to follow the steps and paste your selected notification bar style’s CSS code, HTML code and JQuery/JS in your template/theme and you will be done within no time. So,
How to add a notification bar?
Step 1. Login to your Blogger and select Template/Theme and click on Edit HTML.
Step 2. Search ]]></b:skin> code and paste the CSS code just above the ]]></b:skin> code.
Step 3. Now, find the <body> tag and paste the HTML just below the <body> tag.
Step. 4. Add the JQuery/JS code just above the </body> tag.
Note: Replace all the text/URL (your link) with your own text or URL and click on Save in order to save your theme/template.
Notification bar style 1.
CSS Code
CSS Code
#BlogSupporter_NotificationBar_wrap {
margin:0;
padding:0;
position:relative;
width:100%;
z-index:9999999;
}
.BlogSupporter_NotificationBar {
color: #fff;
position: relative;
background: #595959; /*--Change Background Color Here--*/
width: 100%;
padding: 0;
text-align: center;
font-family: Arial Black, sans-serif;
text-shadow: 0px -1px 0px #000;
margin: 0px auto;
height: 40px;
box-shadow: 0px 1px 5px #616161;
}
.BlogSupporter_NotificationBar label:hover {
cursor: pointer;
}
.BlogSupporter_NotificationBar label {
text-align: center;
background: #FF5353; /*--Change Button Background Color Here--*/
color: #FFF;
border: 0;
font-family: fontawesome;
text-shadow: 0px -1px 0px #EC0000;
font-size: 26px;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
position: relative;
transition-delay: 0s;
margin-top: 0;
float: right;
height: 35px !important;
width: 30px;
overflow: hidden !important;
z-index: 9999;
padding-top: 5px;
}
input.BlogSupporter_ShowHideButtonBar:checked + label {
transform-origin: 12% 50% !important;
transform: translateY(0px) rotateX(190deg);
-webkit-transform: translateY(0px) rotateX(190deg);
-moz-transform: translateY(0px) rotateX(190deg);
-ms-transform: translateY(0px) rotateX(190deg);
-o-transform: translateY(0px) rotateX(190deg);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-top: 47px;
border: 0;
}
input.BlogSupporter_ShowHideButtonBar ~ .BlogSupporter_ContentArea {
position: relative;
overflow: hidden;
height: 40px;
-webkit-transition: 0.5s all ease-in-out;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
transition: 0.5s all ease-in-out;
}
input.BlogSupporter_ShowHideButtonBar:checked ~ .BlogSupporter_ContentArea {
margin-top: -50px;
}
input.BlogSupporter_ShowHideButtonBar {
display: none;
}
/*--Change FontAwesome Icons Style Here--*/
.BlogSupporter_ContentArea .fa {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
font-family: FontAwesome;
border-bottom: 1px solid #FFFFFF;
margin-right: 5px;
}
.BlogSupporter_ContentArea ul {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
}
.BlogSupporter_ContentArea ul > li {
list-style: none;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
padding-top: 10px;
margin-right: 10px;
display: inline-block;
}
.BlogSupporter_ContentArea ul > li > a {
color: #FFD946; /*--Change Links Color Here--*/
text-decoration: none;
font-family: cursive;
font-weight: normal;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.BlogSupporter_ContentArea ul > li > a:hover {
color: #EFCB41 !important; /*--Change Links Hover Color Here--*/
}
.bs_sticking {
position:fixed !important;
width: 100% !important;
}
@media only screen and (max-width:479px) {
#BlogSupporter_NotificationBar_wrap, .BlogSupporter_NotificationBar {
display: none !important;
}
}
HTML
<div id='BlogSupporter_NotificationBar_wrap'>
<div class='BlogSupporter_NotificationBar'>
<input class='BlogSupporter_ShowHideButtonBar' id='tbn' type='checkbox'/>
<label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
<div class='BlogSupporter_ContentArea'>
<ul>
<li>
<i class='fa fa-signal'/> Trending: <a href='#Your-Link1'>How to Create a Landing Page on Blogger</a>
</li>
<li>
<i class='fa fa-fire'/> Hot: <a href='#Your-Link2'>How to Maintain the Website SEO Ranking</a>
</li>
<li>
<i class='fa fa-rss'/> Rss: <a href='#Your-Link3'>Website SEO Audit Tips</a>
</li>
</ul>
</div>
</div>
</div>
JS
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> Notification bar style 2.
CSS Code
.TW_Notification_Wrap {
width: 100%;
min-height: 40px;
margin: 0px;
padding: 0px;
box-sizing: border-box;
position: fixed;
z-index: 999999;
top: 0px;
left: 0px;
}
.TW_Notifications_innerWrap {
overflow: hidden;
width: 100%;
height: 40px;
box-sizing: border-box;
text-align: center;
background: #F44A56;
position: relative;
box-shadow: 0px 2px 9px #000;
z-index: 999;
text-decoration: none;
color: #FFF056;
font-family: oswald, arial, sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 0px 0px 2px #FFF056;
border-bottom: 1px solid #C9C9CB;
margin: 0px;
box-sizing: border-box;
}
.TW_All_Notifications {
max-width: 997px;
margin: 0px auto;
padding-top: 12px;
box-sizing: border-box;
}
.TW_All_Notifications a {
text-decoration: none;
color: #fff!important;
text-shadow: 0px 0px 2px #242729!important;
font-size: 14px;
}
.TW_Notification_HeadLines {
margin-left: 10px;
}
.TW_Notification_HeadLines a:hover {
text-transform: uppercase;
border-bottom: 1px dotted #FFF056;
}
.TW_Close_Notifications_bar{
position: absolute;
font-size: 20px;
color: #fff;
box-sizing: border-box;
z-index: 999;
right: 15px;
bottom: 12px;
z-index: 7900;
font-weight: bold;
display:block;
}
.TW_Close_Notifications_bar:before{
content: "hide";
font-size: x-small;
position: relative;
top: 10px;
left: 22px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
}
.TW_Opened_Notifications_bar:before{
content: "show";
font-size: x-small;
position: absolute;
top: 30px;
left: 10px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
}
.TW_Opened_Notifications_bar .fa{
position: relative;
top: 5px;
}
.TW_Opened_Notifications_bar{
background: #F44A56!important;
box-shadow: 0px 2px 9px #000;
width: 50px;
height: 45px;
padding: 0px 15px;
box-sizing: border-box;
position: fixed;
z-index: 999999;
top: 0px;
right: 16px;
z-index: 7900;
color: #fff;
box-sizing: border-box;
font-size: 25px;
font-weight: bold;
display: none;
} <div class='TW_Notification_Wrap' id='TW_Notification_Wrap'>
<div class="TW_Notifications_innerWrap">
<div class="TW_All_Notifications">
<span class="TW_Notification_HeadLines"><i class="fa fa-line-chart" aria-hidden="true"></i> Trending Today: <a class="TW_Notification_text" href='#'>Best Mobiles</a> </span>
<span class="TW_Notification_HeadLines"><i class="fa fa-bullhorn" aria-hidden="true"></i> Announcement: <a class="TW_Notification_text" href='#'>Please Check Our New Page</a> </span>
</div>
<span class='TW_Close_Notifications_bar'><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</div>
</div>
<span class='TW_Opened_Notifications_bar'><i class="fa fa-arrow-down" aria-hidden="true"></i></span> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> Notification bar style 3.
CSS Code
#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 6.5px; background: #3e454c; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#close_knigulper_bar {display: inline-block; cursor: pointer; padding: 4px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 19px;}
#close_knigulper_bar:hover { background: #3e454c}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;} <div id='knigulper_bar'>
Want to get top insights about blogging, blogger widgts and much more? <a href='#Your-link-here' target='_blank'>Check This!</a>
<span data-target='#knigulper_bar' id='close_knigulper_bar'>×</span>
</div>
JS
Notification bar style 4.
CSS Code
<script type='text/javascript'>
//<![CDATA[
// Knigulper bar
var button=document.querySelector("#close_knigulper_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
//]]>
</script> Notification bar style 4.
CSS Code
#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 7.5px; background: none repeat scroll 0 0 #000000;
border-bottom: 3px dotted #FFFFFF; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#close_knigulper_bar {display: inline-block; cursor: pointer; padding: 4px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 19px;background:#FF0000; height:35px;border-bottom: 3px dotted #FFFFFF;border-left: 3px solid #FFFFFF;}
#close_knigulper_bar:hover { background: #3e454c;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 5px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}
HTML
<div id='knigulper_bar'>
Want to get top insights about blogging, blogger widgts and much more? <a href='#Your-link-here' target='_blank'>Check This!</a>
<span data-target='#knigulper_bar' id='close_knigulper_bar'>×</span>
</div> <script type='text/javascript'>
//<![CDATA[
// Knigulper bar
var button=document.querySelector("#close_knigulper_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
//]]>
</script>
Notification bar style 5.
CSS Code
Notification bar style 6.
CSS Code
#stickybar{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtgPUcFE03-hC6_n8qJ68b2UrgOSrZbJEM3jXQUCw1MkVWreG-mftzggYao_akmyIYmIF0ooF7sDFp571X4yZVtlC0iJ01T-FAXuoLdIHVwBjLkjm_BtUAgHUAxW1lrB-cchHn7hl7qSmR/s1600/headline-bg.png') repeat; color:#fff; margin:0 auto; border-top: 1px solid #000; height:30px; font-size:12px; position:fixed; bottom:0; z-index:1000; width:100%;border-top-left-radius:20px;border-top-right-radius:20px; display:block;}
#stickybar:hover{background:#333;}
#stickybar a{ font-weight:700; text-decoration:blink; color:#fe0; border-bottom:1px dashed; }
#stickybar p{line-height:30px; font-size:12px; text-align:center; width:95%; float:left;}
#stickybar p a{ text-decoration:blink; color:#ffcc00; border-bottom:1px dashed;}
#stickybar li.widget, #stickybar li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}
HTML
<div id='stickybar'>
<li class='widget'>
<p>Join us on: <a href='https://www.facebook.com/knigulper' target='_blank' style='margin-right: 20px;'>Twitter</a> <a href='https://www.facebook.com/knigulper' target='_blank' style='margin-right: 20px;'>Facebook</a> <a href='https://plus.google.com/u/0/b/107705481216986870331/+KnigulperGplus' target='_blank' style='margin-right: 20px;'>Google+</a></p>
</li>
</div> Notification bar style 6.
CSS Code
#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}
#bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#242729;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
#bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
#bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; 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/AVvXsEh68CK0BbfzC0eANC8cpVmsr3AX5c9A9V48JsFai2R-cZtPPZyU4f-P9uDKg7tT-3QAus7pETQLIOKxuFhhlreLhm3vjBQkyGUkBS06gNg99La-NbWHonM2jDfBCMjtd7p3AbHk7WX8tUAa/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;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;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 #90f128;padding:0 7px}
#bloggernotificationWrap #openbloggernotification span{display:block;width:21px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68CK0BbfzC0eANC8cpVmsr3AX5c9A9V48JsFai2R-cZtPPZyU4f-P9uDKg7tT-3QAus7pETQLIOKxuFhhlreLhm3vjBQkyGUkBS06gNg99La-NbWHonM2jDfBCMjtd7p3AbHk7WX8tUAa/s400/light.png) no-repeat right 50%}
#send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
#send:hover{background:#79a7f1}
#send a{color:#fff;text-shadow:1px 1px 2px #333}
#send a:hover{text-decoration:none}
HTML
<div id='KNIGULPER-REDIRECTION'>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
<div style='width: 997px;margin: 0px auto;'>
<strong>
<font color='yellow'>
<i class='fa fa-area-chart'></i>
Trending:
</font>
</strong>
<a href='http://www.knigulper.com/2017/06/onclick-popup-search-bar-for-blogspot.html'>Onclick Toggle Search Bar for BlogSpot</a>
<strong>
<font color='orange'>
<i class='fa fa-bullhorn' style='margin-left: 40px;'></i>
Latest:
</font>
</strong>
<a href='http://www.knigulper.com/2017/06/how-to-start-a-killer-blog.html'>How to Start a Killer Blog in 2017 </a>
     
</div>
<span id='closebloggernotification'></span>
</div>
<span id='openbloggernotification' style='top: -6px;'>
<span></span>
</span>
</div></div>
<br/>
<br/> <script type='text/javascript'>
//<![CDATA[
var _0x8a70=["\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\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x6B\x6E\x69\x67\x75\x6C\x70\x65\x72\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x37\x2F\x30\x36\x2F\x62\x65\x73\x74\x2D\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x2D\x62\x61\x72\x2D\x77\x69\x64\x67\x65\x74\x2D\x66\x6F\x72\x2D\x62\x6C\x6F\x67\x73\x70\x6F\x74\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","\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(_0xd2e8x1){_0xd2e8x1[_0x8a70[2]][_0x8a70[1]]= function(_0xd2e8x2){var _0xd2e8x3={duration:500,position:_0x8a70[3],closeable:true,showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x8a70[4]};var _0xd2e8x4=_0xd2e8x1[_0x8a70[5]]({},_0xd2e8x3,_0xd2e8x2);if(_0xd2e8x4[_0x8a70[6]]== _0x8a70[7]){_0xd2e8x4[_0x8a70[6]]= _0x8a70[8]};_0xd2e8x4[_0x8a70[9]]= parseInt(_0xd2e8x4[_0x8a70[10]],10)+ parseInt(_0xd2e8x4[_0x8a70[11]],10);_0xd2e8x4[_0x8a70[12]]= parseInt(_0xd2e8x4[_0x8a70[12]],10);_0xd2e8x4[_0x8a70[13]]= parseInt(_0xd2e8x4[_0x8a70[13]],10)* 1E3;var _0xd2e8x5=_0xd2e8x1(this);var _0xd2e8x6=_0xd2e8x5[_0x8a70[15]](_0x8a70[14]);var _0xd2e8x7=_0xd2e8x6[_0x8a70[15]](_0x8a70[16]);var _0xd2e8x8=_0xd2e8x6[_0x8a70[15]](_0x8a70[17]);var _0xd2e8x9=_0xd2e8x5[_0x8a70[15]](_0x8a70[18]);var _0xd2e8xa={};var _0xd2e8xb=_0x8a70[8];var _0xd2e8xc={};var _0xd2e8xd=_0x8a70[8];var _0xd2e8xe=function(){_0xd2e8xc[_0xd2e8xd]= _0xd2e8x4[_0x8a70[9]];_0xd2e8x9[_0x8a70[19]](_0xd2e8xc,_0xd2e8x4[_0x8a70[12]]/ 2,_0xd2e8x4[_0x8a70[6]]);_0xd2e8x5[_0x8a70[21]](_0x8a70[20])};var _0xd2e8xf=function(){_0xd2e8xc[_0xd2e8xd]= -Math[_0x8a70[22]](34- _0xd2e8x4[_0x8a70[10]]);_0xd2e8x9[_0x8a70[19]](_0xd2e8xc,_0xd2e8x4[_0x8a70[12]]/ 2,function(){_0xd2e8x10()})};var _0xd2e8x10=function(){_0xd2e8xa[_0xd2e8xb]= 0;_0xd2e8x5[_0x8a70[19]](_0xd2e8xa,_0xd2e8x4[_0x8a70[12]],_0xd2e8x4[_0x8a70[6]],function(){_0xd2e8x5[_0x8a70[23]](_0x8a70[20])})};var _0xd2e8x11=function(){_0xd2e8xa[_0xd2e8xb]= -_0xd2e8x4[_0x8a70[9]];_0xd2e8x5[_0x8a70[19]](_0xd2e8xa,_0xd2e8x4[_0x8a70[12]],function(){_0xd2e8xe()})};var _0xd2e8x12=false;switch(_0xd2e8x4[_0x8a70[28]]){case _0x8a70[3]:_0xd2e8xb= _0x8a70[24];_0xd2e8xd= _0x8a70[3];break;case _0x8a70[25]:_0xd2e8xb= _0x8a70[3];_0xd2e8xd= _0x8a70[3];break;case _0x8a70[27]:_0xd2e8xb= _0x8a70[26];_0xd2e8xd= _0x8a70[26];break};_0xd2e8x5[_0x8a70[29]]();_0xd2e8x5[_0x8a70[33]](_0x8a70[32])[_0x8a70[31]]({display:_0x8a70[30]});if(_0xd2e8x6[_0x8a70[15]](_0x8a70[35])[_0x8a70[34]]){bloggernotificationExtras[_0x8a70[37]][_0x8a70[36]]()};if(_0xd2e8x12&& (_0xd2e8x4[_0x8a70[38]]&& _0xd2e8x4[_0x8a70[39]])){setTimeout(function(){_0xd2e8xe()},_0xd2e8x4[_0x8a70[13]])}else {setTimeout(function(){_0xd2e8x10()},_0xd2e8x4[_0x8a70[13]])};_0xd2e8x8[_0x8a70[40]](function(){_0xd2e8x11();setCookie()});_0xd2e8x9[_0x8a70[40]](function(){_0xd2e8xf();setCookie()});_0xd2e8x7[_0x8a70[40]](function(){_0xd2e8x1[_0x8a70[43]]({type:_0x8a70[41],data:_0x8a70[42],success:function(_0xd2e8x13){}});return true})}})(window[_0x8a70[0]]);jQuery(document)[_0x8a70[49]](function(_0xd2e8x1){_0xd2e8x1(_0x8a70[14])[_0x8a70[45]](_0x8a70[44]);if(!_0xd2e8x1[_0x8a70[6]][_0x8a70[47]](_0x8a70[46])){_0xd2e8x1[_0x8a70[5]](_0xd2e8x1[_0x8a70[6]],{easeOutBounce:function(_0xd2e8x14,_0xd2e8x15,_0xd2e8x16,_0xd2e8x17,_0xd2e8x18){if((_0xd2e8x15/= _0xd2e8x18)< 1/ 2.75){return _0xd2e8x17* (7.5625* _0xd2e8x15* _0xd2e8x15)+ _0xd2e8x16}else {if(_0xd2e8x15< 2/ 2.75){return _0xd2e8x17* (7.5625* (_0xd2e8x15-= 1.5/ 2.75)* _0xd2e8x15+ 0.75)+ _0xd2e8x16}else {if(_0xd2e8x15< 2.5/ 2.75){return _0xd2e8x17* (7.5625* (_0xd2e8x15-= 2.25/ 2.75)* _0xd2e8x15+ 0.9375)+ _0xd2e8x16}else {return _0xd2e8x17* (7.5625* (_0xd2e8x15-= 2.625/ 2.75)* _0xd2e8x15+ 0.984375)+ _0xd2e8x16}}}}})};_0xd2e8x1(_0x8a70[48])[_0x8a70[1]]({position:_0x8a70[3],showAfter:0,keepHidden:true,duration:300,closeable:true,height:40,borderSize:1,easing:_0x8a70[7]})})
//]]>
</script>
Notification bar style 7.
CSS Code
.tybar{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
font-family: 'Ubuntu', sans-serif;
border-color: rgb(255, 255, 255);
background-color: #0e1032;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
text-align: center;}
.tybar span{font-size: 17px;
font-family: 'Cardo', serif;
font-weight: bold;
margin-left: 25px;
background: #fff;
padding: 5px;
color: #00BE98;
background-color: #ffffff;
border-color: #ffffff;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.tybar span a{color:#00BE98; text-decoration: none;}
.tybar i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#00BE98;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 26px!important;
padding-top: 10px;
padding-right: 0!important;
}
.tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
@media screen and (max-width:800px) {
.tybar{display:none;}
body {
margin-top: 0;
}
} <body class='index'>
<div class='tybar'>Write Your Notification Message Here<span><a href='#your-link-here'>Click Here</a></span><i class='fa fa-times'></i></div> <script>
//<![CDATA[
jQuery(document).ready(function(){
jQuery( '.tybar i' ).click(function() {
jQuery( '.tybar' ).toggleClass( 'toggleclose' );
jQuery( 'body' ).toggleClass( 'togglebody' );
jQuery( '.tybar i' ).toggleClass( 'fa-times' );
jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
});
});
//]]>
</script> Notification bar style 8.
CSS Code
#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}
#bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#242729;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
#bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
#bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; 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/AVvXsEh68CK0BbfzC0eANC8cpVmsr3AX5c9A9V48JsFai2R-cZtPPZyU4f-P9uDKg7tT-3QAus7pETQLIOKxuFhhlreLhm3vjBQkyGUkBS06gNg99La-NbWHonM2jDfBCMjtd7p3AbHk7WX8tUAa/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;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;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 #90f128;padding:0 7px}
#bloggernotificationWrap #openbloggernotification span{display:block;width:21px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68CK0BbfzC0eANC8cpVmsr3AX5c9A9V48JsFai2R-cZtPPZyU4f-P9uDKg7tT-3QAus7pETQLIOKxuFhhlreLhm3vjBQkyGUkBS06gNg99La-NbWHonM2jDfBCMjtd7p3AbHk7WX8tUAa/s400/light.png) no-repeat right 50%}
#send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
#send:hover{background:#79a7f1}
#send a{color:#fff;text-shadow:1px 1px 2px #333}
#send a:hover{text-decoration:none} <div id='KNIGULPER-REDIRECTION'>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
<div style='width: 997px;margin: 0px auto;'>
<div style='-moz-background-inline-policy: continuous; background: none repeat scroll right top;font-size:14px;font-weight: normal;font-family: 'Oswald', sans-serif;'>
<marquee behavior='alternate' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'><a href='#Your-link-here'><font color='yellow' size='3'>Trending:</font> Your bouncing text goes here</a>       <a href='#Your-link-here'><font color='yellow' size='3'>Latest:</font> Your bouncing text goes here</a></marquee>
</div>
     
</div>
<span id='closebloggernotification'/>
</div>
<span id='openbloggernotification' style='top: -6px;'>
<span/>
</span>
</div></div>
<br/>
<br/> <script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(8(12){12["80"]["35"]=8(66){9 64={14:96,39:"17",42:24,19:0,44:68,47:3,37:40,15:"72"};9 6=12["63"]({},64,66);16(6["15"]=="61"){6["15"]=""}6["41"]=36(6["37"],10)+36(6["47"],10);6["14"]=36(6["14"],10);6["19"]=36(6["19"],10)*74;9 13=12(78);9 30=13["22"]("#35");9 56=30["22"](".79");9 54=30["22"]("#73");9 32=13["22"]("#46");9 27={};9 18="";9 21={};9 20="";9 48=8(){21[20]=6["41"];32["33"](21,6["14"]/2,6["15"]);13["81"]("46")};9 52=8(){21[20]=-82["77"](34-6["37"]);32["33"](21,6["14"]/2,8(){49()})};9 49=8(){27[18]=0;13["33"](27,6["14"],6["15"],8(){13["93"]("46")})};9 53=8(){27[18]=-6["41"];13["33"](27,6["14"],8(){48()})};9 57=68;89(6["39"]){43"17":18="90";20="17";45;43"71":18="17";20="17";45;43"95":18="62";20="62";45}13["91"]();13["97"]("88")["87"]({85:"86"});16(30["22"](".94")["92"]){84["83"]["76"]()}16(57&&(6["44"]&&6["42"])){59(8(){48()},6["19"])}29{59(8(){49()},6["19"])}54["31"](8(){53();50()});32["31"](8(){52();50()});56["31"](8(){12["103"]({127:"125",122:"31=24",126:8(124){}});23 24})}})(119["58"]);58(120)["121"](8(12){12("#35")["98"](\'<69 129="55-17:128; 55-51:133; 135:#136; 137:51;" 134="131" 132="60://130.123.70/"><117 104="60://4.105.106.70/-118-102/99/100/101/107/108.114"/></69>\');16(!12["15"]["115"]("65")){12["63"](12["15"],{65:8(116,11,26,28,67){16((11/=67)<1/2.75){23 28*(7.38*11*11)+26}29{16(11<2/2.75){23 28*(7.38*(11-=1.5/2.75)*11+0.75)+26}29{16(11<2.5/2.75){23 28*(7.38*(11-=2.25/2.75)*11+0.113)+26}29{23 28*(7.38*(11-=2.112/2.75)*11+0.109)+26}}}}})}12("#110")["35"]({39:"17",19:0,44:24,14:111,42:24,37:40,47:1,15:"61"})});',10,138,'||||||_0xce58x3||function|var||_0xce58x14|_0xce58x0|_0xce58x4|duration|easing|if|top|_0xce58xa|showAfter|_0xce58xc|_0xce58xb|find|return|true||_0xce58x15|_0xce58x9|_0xce58x16|else|_0xce58x5|click|_0xce58x8|animate||bloggernotification|parseInt|height|5625|position||totalHeight|closeable|case|keepHidden|break|openbloggernotification|borderSize|_0xce58xd|_0xce58xf|setCookie|left|_0xce58xe|_0xce58x10|_0xce58x7|margin|_0xce58x6|_0xce58x11|jQuery|setTimeout|http|swing|bottom|extend|_0xce58x2|easeOutBounce|_0xce58x1|_0xce58x17|false|a|com|top_fixed|linear|closebloggernotification|1E3||init|abs|this|link|fn|removeClass|Math|multipleMessages|bloggernotificationExtras|display|block|css|body|switch|marginTop|detach|length|addClass|multiMessages|bottom_fixed|500|prependTo|prepend|UN2w0TT3ZlI|AAAAAAAAIYc|CJxdsLrWkQg|itWdno|ajax|src|bp|blogspot|s400|mbt|984375|bloggernotificationWrap|300|625|9375|png|hasOwnProperty|_0xce58x13|img|6D7m|window|document|ready|data|knigulper|_0xce58x12|post|success|type|5px|style|www|_blank|href|7px|target|color|666666|float'.split('|'),0,{}))
//]]>
</script> Notification bar style 9.
CSS Code
#welcome_bar {width: auto; height: auto; display: block; text-align: center; padding: 12px; color: #fff; position: relative; font-size: 18px; font-weight: 500;}
#close_welcome_bar {display: inline-block; cursor: pointer; padding: 12px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 18px;}
.addthis_sharing_toolbox {clear:initial!important;}
#close_welcome_bar:hover { background: #F04F3F}
#welcome_bar a{background: #fff; color: #f1ae28; padding: 8px 20px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#welcome_bar a:hover{background:#FC4F3F;color:#fff;}
.welcome-area {padding:20px;background: linear-gradient(270deg, #07d09c, #00aa7e, #c326fd, #ff08d5);
background-size: 800% 800%;
-webkit-animation: AnimationName 53s ease infinite;
-moz-animation: AnimationName 53s ease infinite;
-o-animation: AnimationName 53s ease infinite;
animation: AnimationName 53s ease infinite;}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
} <div class='welcome-area'>
<div id='welcome_bar'>
Need a Professional Magazine Blogger Template? <a href='URL Goes Here' target='_blank'>Check This</a>
<span data-target='#welcome_bar' id='close_welcome_bar'>×</span>
</div>
</div> // Welcome bar
var button=document.querySelector("#close_welcome_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
All of the above notification bars are great designs for creating and managing your Blogger blog and once you embed in your Blogger you can analyze how successful it is at increasing your traffic, engagement, conversations and lead generation.
So, Enjoy! Or if you have found any problem with installation, you may leave a comment below and I will be very happy to help you.
Post a Comment
Post a Comment