Scrolling Sticky Bar for Blogger

sticky header bar
In others word a On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the top something similar to the Facebook header bar. It contains social sharing options as well as links to Home Page of your blog. Also present are the Slide to Top and Email subscribe options. This can be easily customized to include options according to your needs. Lets get started and see how to add it in your blog !


Demo
You can see the live demo on this very page itself !

Before we get started

We will be using the Old Interface for this tutorial as the New Interface throws up unexpected errors when editing the template. In case you are one of the people who joined Blogger recently then there might be a chance that you have no access to the Old Interface. To overcome this problem , type the following URL into the address bar

blogger URL

Replace the highlighted number with your Blog's ID . To find the Blog ID , observe the Address Bar while surfing through the Stats , Layout , Template pages of your Blog . You will see a similar large number . That would be your Blog ID



Video Tutorial



Steps

1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Scrolling Sticky Bar. Now select the Edit HTML option

Blogger Dashboard Old



2. Now search for <body tag  ( See Video tutorial for more details ) and add the following code just below it



<div id='SYB-Bar-Container'>
<div id='SYB-Bar-Content'>
<ul id='SYB-Bar-Left'>
<li class='Home'> <a href='http://www.stylifyyourblog.com/'>Home</a> </li>
<li class='Share'> <div id='share-top'>
<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>
<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='SYB-Bar-Right'>
<li class='Subscribe'> <div class='SYB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=stylifyyourblog&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);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=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='stylifyyourblog'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://www.stylifyyourblog.com" title="Stylify Your Blog" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top &#8593;</a> </li>
</ul></div></div> 


Note: In Line 4 Replace the URL with your blog Address and In Line 15 and 16 replace instance of stylifyyourblog with your RSS Feed Name
3. Now search for </body> tag and add the following code just before it

<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>   
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> 


Note: In case you have already included the jQuery library in your blog then remove Line 1 . The same applies for Line 12 ,13 and 14 as well if you have included Facebook , Google+ and Twitter scripts respectively.

4. Lastly add the following CSS just before ]]></b:skin> tag

#SYB-Bar-Container {
background-color:#f6f6f6;
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));
}

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

 #SYB-Bar-Container{
margin: 0px 116px;
 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:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }

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

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

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

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

#SYB-Bar-Left{
float:left;
width:45%;
}

#SYB-Bar-Right{
float:right;
width55%;
}

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

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

#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-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;
}

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

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

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

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



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

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

.SYB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.SYB-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:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#SYB-Bar-Container{
display:none;
}
}



5. Hit the Save Template button and view your blog to see how the bar appears.


Thanks to Hacking University for creating this widget and also to Jafar Dhada insisting for creating a tutorial for this. In case you have any ideas for widgets or tutorials feel free to share them via comments
  • Slide to Top ↑


Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Unknown said...

Great work, Prayag!! This is one of the best sticky bar with social sharing for blogger. Thanks for this tutorial. And this scrolling stickybar is looking awesome.

Anonymous said...

I expect This Post ..

Lot Of Thanks

Sai Kumar said...

Hi bro, stickybar is looking awesome and this stickybar makes a blog look more beautiful.

Arbaz Khan said...

Hi Prayag,
Great stickybar bro :)
But there is one problem. Just see at my blog and see for it.
The bar is not coming perfectly, it is somewhat upside and not as in your blog. Please see to it and till me how can i bring it to the perfect position.

My Blog : http://www.techbreach.net/

There is a CSS conflict ,Add the following CSS to fix it

#SYB-Bar-Right , #SYB-Bar-Left {
margin-top: 10px !important;
}
#SYB-Bar-Container {
margin: 0px 178px !important;
}
#SYB-Bar-Content {
width: 984px !important;
}

Unknown said...

Got it bro :D
Thanks .......

Shifna said...

HI..

Thanks for the code and step by step instructions.

Aakash said...

This is great prayag! thanks for code

Rounaj said...

It is really a great tutorial.. But I have a complain .. It is nt looking as the original one (Hackinguniversity) ... I mean in the original it was full in width .. But it is nt.. One more thing that it's buttons are nt perfectly placed as the original .. Plz see this matter .. By the way it is really a cool post for all bloggers..

sunil said...

Wow Great Post Admin.Great Tutorial Through Pictures And Video.....Gud Job

Unknown said...

just getting some problems,,when I slide down,,it is coming below the titles of post and below widgets of sidebar,,does not look as good as on your blog

Hi Prayang ^_^ . Can you help me? I want change twitter/GPlus/FB Like with addthis button. I hope you can help me

Thanks Chiranjeev for the comment

Glad you liked it

Feel free to share suggestions for any tutorial that you might want

Thanks Sai Kumar

Did you try implementing it in your blog ?

Feel free to ask if you face any trouble

Thanks for appreciating Shifna

Thanks Aakash , after a very long time indeed

Always there to help out

Thanks Sunil for appreciating the effort , Glad you liked it

Hi Ranjit

Can you share the URL where you implemented it so that I can help you out with it. Couldn't find it on your blog

I suggest you stick to the default sharing widgets the only reason being that AddThis and its other counterparts like ShareThis include lots of other stylesheets and scripts ,which end up slowing the page a lot.

In case you still want , I can help out with it

Yes and in that time so much have changed great re-designing :)

Farhan said...

Great tutorial indeed!! Keep the good work up bro!!

I have two queries:
1. Home & Slide to Top buttons aren't aligned just as they are shown on your blog
2. I would also like to have View Random Post button as its present over here.

Your help will be highly appreciated :)

God bless you.

Unknown said...

my template has no < body word
it has < body >

and if i paste code below < body > it doesn't works my website is www.tricksaddiction.in

Unknown said...

my template has no < body word
it has < body >

and if i paste code below < body > it doesn't works my website is http://www.tricksaddiction.in

Reply
Add comment

Saurabh said...

Random Post button missing

Ya I totally agree with you. Thanks for comment back ^_^

Xya said...

hello sir, ye aapne kis tarah se sniff kiya?

Thanks for this wonderful widget, i was in search of it only
as Rishabh, owner of hackinguniversity is my bestest buddy, but still he was not telling anybody for this widget created by him,
Well now thanks to SYB for this :) :)

Unknown said...

hey tnx for this wonderful advice for changing the blog but mean while i changing my blog to be like this there occurs some problem con you please look at it and tell me what i have to edit to make it clear like it showing up on this blog.. thnx my blog @ http://psuofindia.blogspot.in/

Add all the code in your blog without the jQuery code , as it is already present in your blog

Hi Prayang ^_^
I just want to change the widget to full width like hackinguniversity.in
I hope you can tech me

Hi Danial
Can you share the URL where you have implemented it , so that I can tell you the necessary changes required to make it full width

Here Prayang :http://danial-ar.blogspot.com/
my blog still new

nvm Prayang my blog cannot use this widget.
Sorry for disturb you

Unknown said...

How to change the background bro, ? for http://geekspot.in

This is CSS to change (Line 1-5 of Step 4 in the above tutorial )

#SYB-Bar-Container {
background-color:#f6f6f6;
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));
}


This tool will help in changing the gradient values http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Also the background-color is for older browsers like IE8 which do not support gradients

Also there is some problem with the placement of the content , to fix it add the following CSS

#SYB-Bar-Content {
margin: 10px auto !important;
}

Hi Prayang I know how to make the widget full width just follow my easy step

First
find this code :

margin: 0px 116px;

and replace it with

margin:0px auto;

Second
find this code :
#SYB-Bar-Container{

and put this code below/after it

width:100%

and the widget full width

Thanks a lot Prayang :D
You're my best Blogger Teacher ^_^

Best4pic said...

thanks for sharing...
how can l ADD RANDOM POST post,,,

Thanks Prayag for this awesome tutotial but I have one problem. I would like to make that "Slide to Top" button of same size as of "Subscribe". Can you help me with same? Thanks

benteng said...

I do not understand
on my blog can not be installed

Unknown said...

Hello Prayag Verma........I hav installed in my blog,bt its nt d same view as in ur blog.pls can u help me!!!

I want this plugin for wordpress... can u give me that................ thanks

Emma said...

Its like addthis welcome bar, right ?
If this works on blogs, why addthis welcome don't show in my blogs ? :(
Great blog, with great posts!

abc said...

works fine...thanks ....

check it out on my blog

www.loadsofstuff4u.blogspot.in/

DownSpaces said...

Nice! Work great for my site here: http://www.downspaces.com/

very nice widget brother... Our team like it and we applied it our web blog at www.studentvoice.in.. is there any code to customize it ...

Awesome sticky bar :) thanks for sharing.

Regards
Rahul Kashyap
Blog: SDMMovies.com | Movies4u.US

Anonymous said...

works fine...thanks ....

check it out on my blog

http://www.fobbleup.blogspot.com/

Anonymous said...

hello verma bro in my blog www.fobbleup.blogspot.com

while going up by slide to top the bar repeates two time at top .. why ? and whats the solution.. i am waiting for u

Anonymous said...

It Didn't worked for me when I clicked on Save template It said :- Error parsing XML, line 1006, column 3: The element type "html" must be terminated by the matching end-tag "".

Anonymous said...

Well anywaу, becаuse it іѕ only usеԁ foг сοsmetic purpоsеs.
Also visit my website ; botox sydney

Anonymous said...

What's up, I read your blogs regularly. Your story-telling style is witty, keep up the good work!
Here is my webpage ... augenlasern

Unknown said...

thanks a lot...indeed i used it on my blog, but sum buttons like the facebook like, random post buttons were missing even after following your tutorial step by step. Still awesome widget.

Regards, Mohit, Blogger @ The Geek Solutions

Unknown said...

Wow.. It's really a good looking sticky bar for blogger. Thanks for share

rajesh said...

i have a issue..the widget is not displaying in single row..the links are displayed one below the other.. :( please help ...

Like this :

.Home
.tweet
.g+
.like
.subscribe
.slide to top

deepak said...

Thank you so much for this valuable information.