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
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
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('http://feedburner.google.com/fb/a/mailverify?uri=stylifyyourblog', '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=' 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 ↑</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
Find me on
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.
I expect This Post ..
Lot Of Thanks
Hi bro, stickybar is looking awesome and this stickybar makes a blog look more beautiful.
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;
}
Got it bro :D
Thanks .......
HI..
Thanks for the code and step by step instructions.
This is great prayag! thanks for code
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..
Wow Great Post Admin.Great Tutorial Through Pictures And Video.....Gud Job
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 :)
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.
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
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
Random Post button missing
Ya I totally agree with you. Thanks for comment back ^_^
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 :) :)
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
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 ^_^
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
I do not understand
on my blog can not be installed
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
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!
works fine...thanks ....
check it out on my blog
www.loadsofstuff4u.blogspot.in/
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
works fine...thanks ....
check it out on my blog
http://www.fobbleup.blogspot.com/
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
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 "".
Well anywaу, becаuse it іѕ only usеԁ foг сοsmetic purpоsеs.
Also visit my website ; botox sydney
What's up, I read your blogs regularly. Your story-telling style is witty, keep up the good work!
Here is my webpage ... augenlasern
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
Wow.. It's really a good looking sticky bar for blogger. Thanks for share
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
Thank you so much for this valuable information.