5 Cool Sticky Notification bar for Blogger ~ Crawlist

Sticky Notification bar what appears on top is the best way to highlight popular posts, recommendation posts, affiliate deals and offers. These notification bar also increase pageviews and affiliate incomes. Here I presenting to you 5 cool and different style sticky notification bar which are designed to match your blogger blog background. These notification bars made with CSS, CSS3, Script, HTML and little piece of image. All designs are eye responsive, easy loading, light weight codes and have close button even responsive in width over all easy to configure. So let's choose a design copy the code and install it in your Blogger blog.

Matt style Notification bar for blogger

It use matt style off-white bar, ideal for light colored background

(part1)

<style>
#ks-bars {
height:45px;
width:100%;
position:fixed;
z-index:99999;
top: 0px;
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgildjoHBY7n4bRWJJiwPVJomn6BH32v94em2hQ6Lln8tmvFFub7Y7DNLW_8INxq1HXq8CCHnH1XbK2irdSvgmyASRAyklUJkSboLLo2lWH6TBRUc10kYQlrfUVj_WsQS2XQ04_LA_Ay9g/s1600/bokrom.png);
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
border-bottom:solid 2px #CCC;
-moz-box-shadow:5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-googms-box-shadow: 5px 5px 5px #333333;
box-shadow:3px 2px 4px #999;
}
#ks-linkz
{
color:#000;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#ks-linkz a
{
font:14px verdana;
color:#000;
text-decoration:none;
}
#ksclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#ksclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:#000;
border-radius:10px;
}
#kscallbar
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("ks-bars").style.visibility = "hidden";
}
</script>

(part2)

<div id='ks-bars'>
<div id="kscallbar">
<p id='ks-linkz'> Popular Topics:<a href='your link'> Blah Blah Blah ...</a> | <a href='your link'>Click here to get a discount!</a></p>
</div>
<div id="ksclose">
<a href="javascript:closesticky();" >X</a>
</div>
</div>

Paper style Notification bar for Blogger

It uses paper style bar ideal for any stranded template

(part1)

<style>
#ks-bars {
height:45px;
width:100%;
position:fixed;
z-index:99999;
top: 0px;
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpkppRr7IMfZWMGCuOv4M71z2lGq9Yc_pl3v15_47G7wuY3VEiVa-d0uV1tPJnduHSmF-zr7LX_m94XHsif62FBSo4VmjI5oR6IqdWUHxjkAfSOpph4ya0JUxxXpZRFcgroiOgxjIaDo4/s1600/paper.png);
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
border-bottom:solid 2px #CCC;
-moz-box-shadow:5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-googms-box-shadow: 5px 5px 5px #333333;
box-shadow:3px 2px 4px #999;
}
#ks-linkz
{
color:#000;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#ks-linkz a
{
font:14px verdana;
color:#000;
text-decoration:none;
}
#ksclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#ksclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:#000;
border-radius:10px;
}
#kscallbar
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("ks-bars").style.visibility = "hidden";
}
</script>

(part2)

<div id='ks-bars'>
<div id="kscallbar">
<p id='ks-linkz'> Popular Topics:<a href='your link'> Blah Blah Blah ...</a> | <a href='your link'>Click here to get a discount!</a></p>
</div>
<div id="ksclose">
<a href="javascript:closesticky();" >X</a>
</div>
</div>

Striped notification bar for Blogger

It offers off white striped, ideal for light colored background

(part1)

<style>
#ks-bars {
height:45px;
width:100%;
position:fixed;
z-index:99999;
top: 0px;
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1eN4Pqg_SQQEzfb43JgnlC15Z7E5_iSd_ksF0ifK_R7xPUvFaNWV0lkHgw-SMROor_ddarmZvwcqDpa_5JLgr_5gvDcIfsBySFr0Kszeb-iT0WQRleRVvjawPYiwpBz5WPacy8ENizNo/s1600/stripe.png);
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
border-bottom:solid 2px #CCC;
-moz-box-shadow:5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-googms-box-shadow: 5px 5px 5px #333333;
box-shadow:3px 2px 4px #999;
}
#ks-linkz
{
color:#000;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#ks-linkz a
{
font:14px verdana;
color:#000;
text-decoration:none;
}
#ksclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#ksclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:#000;
border-radius:10px;
}
#kscallbar
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("ks-bars").style.visibility = "hidden";
}
</script>

(part2)

<div id='ks-bars'>
<div id="kscallbar">
<p id='ks-linkz'> Popular Topics:<a href='your link'> Blah Blah Blah ...</a> | <a href='your link'>Click here to get a discount!</a></p>
</div>
<div id="ksclose">
<a href="javascript:closesticky();" >X</a>
</div>
</div>

Gray notification bar for blogger

It just use Gray pattern ideal for light colored background

(part1)

<style>
#ks-bars {
height:45px;
width:100%;
position:fixed;
z-index:99999;
top: 0px;
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwXn0wYc2Gn44AuS7BFQpV0raTRbCa_4Mpy28RFZl487RJX3U0_TnddqIyHZOXZoPs_AFxLYOxUaJ9_hHKLKH6awXuzO5flPB-avuNm5rM1BUrC2khCg_f1QOE_eVYcLGWo9Idtus_B1w/s1600/cloth.png);
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
border-bottom:solid 2px #CCC;
-moz-box-shadow:5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-googms-box-shadow: 5px 5px 5px #333333;
box-shadow:3px 2px 4px #999;
}
#ks-linkz
{
color:#000;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#ks-linkz a
{
font:14px verdana;
color:#000;
text-decoration:none;
}
#ksclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#ksclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:#000;
border-radius:10px;
}
#kscallbar
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("ks-bars").style.visibility = "hidden";
}
</script>

(part2)

<div id='ks-bars'>
<div id="kscallbar">
<p id='ks-linkz'> Popular Topics:<a href='your link'> Blah Blah Blah ...</a> | <a href='your link'>Click here to get a discount!</a></p>
</div>
<div id="ksclose">
<a href="javascript:closesticky();" >X</a>
</div>
</div>

Transparent notification bar for blogger

It just transparent ideal for multi/white colored background!

(part1)

<style>
#ks-bars {
height:45px;
width:100%;
position:fixed;
z-index:99999;
top: 0px;
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCgZL7Ke29DB4oTEhhTI0ieCQRKh4aevK7ZPfNd_v_NP50haIbAbcnJ8eecllPl9-Sc-t2J2tTsHPRZaOk3BdLJ2zZKj94oONgy059AiBuYgLowAzFQyfZOnj1x9lqxaJPUPstSuhD-U/s1600/Untitled+Project.png);
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
border-bottom:solid 2px #CCC;
-moz-box-shadow:5px 5px 5px #333333;
-webkit-box-shadow: 5px 5px 5px #333333;
-googms-box-shadow: 5px 5px 5px #333333;
box-shadow:3px 2px 4px #999;
}
#ks-linkz
{
color:#34495E;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#ks-linkz a
{
font:14px verdana;
color:#34495E;
text-decoration:none;
}
#ksclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#ksclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:#000;
border-radius:10px;
}
#kscallbar
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("ks-bars").style.visibility = "hidden";
}
</script>

(part2)

<div id='ks-bars'>
<div id="kscallbar">
<p id='ks-linkz'> Popular Topics:<a href='your link'> Blah Blah Blah ...</a> | <a href='your link'>Click here to get a discount!</a></p>
</div>
<div id="ksclose">
<a href="javascript:closesticky();" >X</a>
</div>
</div>

How to add these notification bar in Blogger

Step 1: Back up your template (Optional step)

Select 'Template' tab option, click 'backup/restore' from upper right corner.

Download full template and save it on your pc's Hard-drive

Step 2: Setting CSS (Mandatory step)

First go to 'Template' tab, then 'Edit Html'

And find (using Ctrl+F or Cmd+F) </head> tag.

Before </head> paste (part1) all code and save template,

Step 3: Setting HTML (Mandatory step)

Now go to 'Layout' tab select 'add a gadget'

And select 'Html/javascript' from pop up window.

And paste (part2) code in content box,

Save Template. and configure the links as you want.

Template Compatibility and Faq
This notification bar is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this. Supports all web browsers.

So don't forget to mention what your felling about this widget. Also any question or recommendation leave with comments. More notification bar will release soon stay subscribed plz...

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu