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 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 ]]> code and paste the CSS code just above the ]]> code.
Step 3. Now, find the tag and paste the HTML just below the tag.
Step. 4. Add the JQuery/JS code just above the 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
-
Trending: How to Create a Landing Page on Blogger
-
Hot: How to Maintain the Website SEO Ranking
-
Rss: Website SEO Audit Tips
JS
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;
}
Trending Today: Best Mobiles
Announcement: Please Check Our New Page
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;}
Want to get top insights about blogging, blogger widgts and much more? Check This!
×
JS
Notification bar style 4.
CSS Code
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
Want to get top insights about blogging, blogger widgts and much more? Check This!
×
Notification bar style 5.
CSS Code
Notification bar style 6.
CSS Code
#stickybar{background:url('http://1.bp.blogspot.com/-U6wtLcekRPo/TylFGejyYCI/AAAAAAAAADU/pRGXZ1M_rnE/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
Join us on: Twitter Facebook Google+
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(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/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(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/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
Trending:
Onclick Toggle Search Bar for BlogSpot
Latest:
How to Start a Killer Blog in 2017
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;
}
}
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(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/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(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/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}
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%}
}
