Add Scrolling Sticky/Notification Bar to Blogger.

One good thing that I noticed while scrolling on Facebook's pages is its header. Facebook's header bar remains on the Top of the page when we start scrolling to bottom and again merged into the page when we scroll the page to Top. For bloggers, Its very important to highlight some links, to show some notifications to the readers to get their attention. When bloggers need to announce some Offer, some Updation or some other such information, then these Always on Top header bars plays a great role.

Why to use a Sticky Notification Bar:

Every blog or website need to display some notifications or offers for its readers. And to make it most effective, this notification bar must be displayed on the page for the complete page view time. This can be achieved by using sticky bar on the top with floating or scrolling effect.

Get advanced Sticky bar with share buttons here.

 

Some of the benefits of using a sticky bar:

• Readers can easily get attention to the announcements.
• Its the best place to tell your readers about Offers and coupons.
• You can mention links to your important Articles of blog in the sticky bar.
• You can place Subscription links in sticky bar to make good readership.

Watch Demo on our every Page

How to add Sticky bar with Subscription links:

You need to follow some steps to Add a simple and cool sticky Bar to blogger. Make sure to take a backup of your template before making any changes.

• Go to Blogger Dashboard >> Template >> Edit Template.
• Search for </body> tag and place the following script code just above this tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'

type='text/javascript'></script> 
<script>
//<![CDATA[
var b = $("#SYB-Bar-Container");var c = b.css("top");$(window).scroll(function

(){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}

else{b.stop().animate({top: "-100px"}, 0)}});
//]]>
</script> 
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click 
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);

return false;});});});
</script> 

• Now you need to add the CSS for the sticky bar. Search for ]]></b:skin> and place the following CSS code just above this tag.

#PTB-Bar-Container {
background-color:#F0F0F0;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

 #PTB-Bar-Container , #PTB-Bar-Left .Home a, #PTB-Bar-Right .btt a,.PTB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

 #PTB-Bar-Container{
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding-left:4px;
padding-right:4px;
 height:31px;
  position:fixed;
  vertical-align: baseline;
  }

#PTB-Bar-Container *{
padding:0;
}

#PTB-Bar-Container a {
text-decoration:none;
}

#PTB-Bar-Content{
width:1024px;
margin:0 auto;
}

#PTB-Bar-Content li{
list-style:none;
float:left;
}

#PTB-Bar-Left{
float:left;
width:70%;
}

#PTB-Bar-Right{
float:right;
}

#PTB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#PTB-Bar-Right li{
margin-top:-7px;
}

#PTB-Bar-Left .Home a, #PTB-Bar-Right .btt a,.PTB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#PTB-Bar-Left .Home a:active, #PTB-Bar-Right .btt a:active,.PTB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#PTB-Bar-Left .top-links a{
font-size:11pt;
font-family:cambria;
color:#000;
}

#PTB-Bar-Left .top-links a:hover{
text-decoration:blink;
}

#PTB-Bar-Left .Home a{
background:#143eb4;
}

#PTB-Bar-Left .Home a:hover{
background:#1556fa;
}

#PTB-Bar-Right .Subscribe{
margin-top:-14px;
}

#PTB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#PTB-Bar-Right .btt a:hover{
background:#06b421;
}

.PTB-emailsubmit{
background:#ce1527;
cursor:pointer;
height:26px;
width:80px;
}
.PTB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:150px;
height:25px;
color:#000000;
}

• Now, You need to place the HTML code for the Sticky Bar. Search for the opening <body> tag and place the following HTMLcode after the <body> tag.

<div id='PTB-Bar-Container'>
<div id='PTB-Bar-Content'>
<ul id='PTB-Bar-Left'>
<li class='Home'> <a href='http://learnbytips.blogspot.com/'>Home</a> </li>
<li class='top-links'> <a href='http://learnbytips.blogspot.in/2012/05/download-all-micromax-mobiles-pc-suite.html'>*All Micromax Mob PC Suite</a> </li>
</ul>
<ul id='PTB-Bar-Right'>
<li class='Subscribe'> <div class='PTB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=learnbytips&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' placeholder=' Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='learnbytips'/><input name='loc' type='hidden' value='en_US'/> <input class='PTB-emailsubmit' type='submit' value='Subscribe'/> </form> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Top &#8593;</a> </li>
</ul></div></div>

• Now, just change the Text in Red with your own links.

That's all. I am always here to help you guys. Thanks a lot to StylifyYourBlog.