Add Scrolling Sticky/Notification Bar to Blogger.

12/24/2012 By Sandeep Rao

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('http://feedburner.google.com/fb/a/mailverify?uri=learnbytips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' 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 ↑</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.

Filed Under: Blogger Widgets

Share your views...

7 Respones to "Add Scrolling Sticky/Notification Bar to Blogger."

steven said...: Your explaining about website links are very good with the examples so that how we manage. Notification software

December 27, 2012 at 10:35 PM
Avinash S Ch said...: Thanks for the notification bar. It is working fine in browsers like chrome and safari, but it is not proper in internet explorer can you please provide me the solution.

URL:http://eSahaya.blogspot.com

note- It is not an advertising stunt, I'm facing a real problem

Thank you,
eSahaya

January 8, 2013 at 7:25 PM
Sandeep Rao said...: Hey Avinash...
I have examined your blog's source code and I found that you have placed it just after "body tag" due to which it is causing bar's CSS to make some in-compatibility problem in IE. You can try some correction as below-

As I can see, there is a div tag as "class=navbar section and id=navbar" in your blog near "opening body tag" in your blog.

You should place this "notification bar's code in between this div tag."

This will make the bar's CSS compatible for IE. I hope this will work for you.
I suggest you to compress your blog's images to speed up blog's loading.
Avinash S Ch said...: Sandeep, Thanks aLot for your kind Response

I modified the code exactly whatever you've mentioned in the comment. I've placed the code of notificatior bar in the navbar section, even then the problem pursues. I reverted back my code as it was. I couldn't find the compatability issue. can you help me out please.

I liked your post of image compression.

Thank you,
Avinash

January 9, 2013 at 7:07 PM
Sandeep Rao said...: I again cross checked your notification bar's CSS and found that you have altered the CSS. You have removed text-align:center propert from #avi-Bar-Container class. I think this property is causing your bar to shift from Center to Left in IE.

I recommend you to use the CSS as I have posted in this post. You can change the class names, but you "must keep the property values same" as these are published here.

If the problem persists further, then you can mail your template to "admin@PcTricksBlog.com" So that I can fix this issue.
Avinash S Ch said...: Sandeep, I appreciated for the quick response you give and I tried mailing you for the "admin@PcTricksBlog.com"

Message:
Delivery to the following recipient failed permanently:

admin@PcTricksBlog.com

Technical details of permanent failure:
Google tried to deliver your message, but it was rejected by the recipient domain. We recommend contacting the other email provider for further information about the cause of this error. The error that the other server returned was: 550 550 #5.1.0 Address rejected. (state 13).

Can you repost the email ID please.

Thanks alot for your concern.

January 9, 2013 at 10:09 PM
Sandeep Rao said...: You can mail me at alternate Email address as "pctricksblog@gmail.com"

Sorry for inconvenience.