5 Cool Sticky Notification bar for Blogger

Posted on July 14, 2014 by 
5 Cool Sticky Notification bar for Blogger
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
Matt style Notification bar for blogger


(part1)

<style>
#ks-bars {
  height:45px;
  width:100%;
 position:fixed;
z-index:99999;
  top: 0px;
left:0px;
 background:url(http://2.bp.blogspot.com/-ksVReGPgHug/U8JXt_Q4y6I/AAAAAAAAEeQ/DslNGpXa1Vo/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)

<!--crawlist.net notification starts-->
<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>
<!--crawlist.net notification ends-->

Paper style Notification bar for Blogger

It uses paper style bar ideal for any stranded template
Notification bar for Blogger


(part1)

<style>
#ks-bars {
  height:45px;
  width:100%;
 position:fixed;
z-index:99999;
  top: 0px;
left:0px;
 background:url(http://2.bp.blogspot.com/-C8BJupdefc0/U8JXxDzEyYI/AAAAAAAAEe4/8yFSBFNNMRY/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)

<!--crawlist.net notification starts-->
<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>
<!--crawlist.net notification ends-->

Striped notification bar for Blogger

It offers off white striped, ideal for light colored background
Notification bar for Blogger


(part1)

<style>
#ks-bars {
  height:45px;
  width:100%;
 position:fixed;
z-index:99999;
  top: 0px;
left:0px;
 background:url(http://3.bp.blogspot.com/-AUsWrcUU4_k/U8JXzor52ZI/AAAAAAAAEfQ/nlZSiWQ-0wE/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)

<!--crawlist.net notification starts-->
<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>
<!--crawlist.net notification ends-->

Gray notification bar for blogger

It just use Gray pattern ideal for light colored background
Notification bar for Blogger


(part1)

<style>
#ks-bars {
  height:45px;
  width:100%;
 position:fixed;
z-index:99999;
  top: 0px;
left:0px;
 background:url(http://1.bp.blogspot.com/-Pa09TTZTaTo/U8JXuUkiMfI/AAAAAAAAEeU/pERzn-rDr8w/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)

<!--crawlist.net notification starts-->
<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>
<!--crawlist.net notification ends-->

Transparent notification bar for blogger

It just transparent ideal for multi/white colored background!
Notification bar for Blogger

(part1)

<style>
#ks-bars {
  height:45px;
  width:100%;
 position:fixed;
z-index:99999;
  top: 0px;
left:0px;
 background:url(http://2.bp.blogspot.com/-Jxb3NQLlhv0/U8F26cB9vqI/AAAAAAAAEd8/UkyEHm6cmMM/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)

<!--crawlist.net notification starts-->
<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>
<!--crawlist.net notification ends-->

How to add these notification bar in Blogger

Step 1: Back up your template (Optional step)

  • Log in to your blogger, select your blog, 
  • 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...