Now days concept scrolling bar or sticky bar has becomes very popular because of their attention grabbing capacity,they quickly catches any ones attention on them that's why I am also using a sticky bar(hellobar) on my blog.Today I am gonna to share a cool scrolling sticky bar which contains many subscription/sharing options such as twitter tweet button,google +1 button,facebook like button,email subscription form also it contains a random post button which will redirect you to another(any random) post.This sticky will sticks to upper part of page and only visible when scroll down.Now lets get started and see how to add this sticky bar to blogger blog.To add to sticky bar I will recommend you to use old blogger user interface because as per widget author it throws an unexpected error,you can switch back to old blogger interface by clicking on the Settings Wheel icon at top right of your new blogger dashboard.
 |
| Click On Image To Enlarge |
How To Add Scrolling Sticky Bar To Blogger?
Step 1 : Adding The HTML
- Go to Blogger Dashboard > Template
- Download a copy of your template
- Click on Edit HTML
- Hit Proceed
- Find for below code,
<body>
Note - If you are using default blogger templates then search for <body tag.Watch video below for exact information.
add below code just below of above code,
<div id='HB-Bar-Container'>
<div id='HB-Bar-Content'>
<ul id='HB-Bar-Left'>
<li class='Home'> <a href='http://www.helperblogger.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='HB-Bar-Right'>
<li class='Subscribe'> <div class='HB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', '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='HBlogger'/><input name='loc' type='hidden' value='en_US'/> <input class='HB-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://www.helperblogger.com/" title="Blogger Widgets" ><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>
- Line No. 4 : Replace http://www.helperblogger.com/ with your blog URL.
- Line No. 16,16 : Replace HBlogger with your feedburner username.
Step 2 : Adding The Scripts
Now find for below code,
</body>
add below code just before/above it,
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
var b = $("#HB-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>
Step 3 : Adding The Bar Styles
Now find for
]]></b:skin>
add below code just above it,
#HB-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));
}
#HB-Bar-Container , #HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit {
box-shadow: 0 5px 5px -5px #999;
-webkit-box-shadow: 0 5px 5px -5px #999;
-moz-box-shadow: 0 5px 5px -5px #999;
}
#HB-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;
}
#HB-Bar-Container *{
padding:0;
}
#HB-Bar-Container a {
text-decoration:none;
}
#HB-Bar-Content{
width:1024px;
margin:0 auto;
}
#HB-Bar-Content li{
list-style:none;
float:left;
}
#HB-Bar-Left{
float:left;
width:45%;
}
#HB-Bar-Right{
float:right;
width55%;
}
#HB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}
#HB-Bar-Right li{
margin-top:-7px;
}
#HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-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;
}
#HB-Bar-Left .Home a:active, #HB-Bar-Right .btt a:active,.HB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}
#HB-Bar-Left .Home a{
background:#143eb4;
}
#HB-Bar-Left .Home a:hover{
background:#1556fa;
}
#HB-Bar-Right .Subscribe{
margin-top:-14px;
}
#HB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}
#HB-Bar-Right .btt a:hover{
background:#06b421;
}
.HB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.HB-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){
#HB-Bar-Container{
display:none;
}
}
Finally save your template and visit your blog.
Video Tutorial
Credits
This widget is bloggerized by Prayag of Stylifyyourblog and I reshared on Helper Blogger.If you have any ideas or queries about this widget then feel free to share it with us. :)
Happy Blogging....
Nice Post Rahul bro :)
ReplyDeleteI have a question but not related to this post ( sorry for that :P )
Bro when i try to add google+ add to circle widget , its not visible , i used your tutorial and did all the steps correct but thats add to circls widget is not visible so i added a widget which provided by bloggers in widget section ,
but i want to add like yours , help me out my url http://nannu4u.blogspot.in/
waiting for your reply :)
I used your this tutorial but it didnt worked :/ http://rri7510.blogspot.in/2012/01/how-to-add-google-plus-page-badge-to.html
ReplyDeleteWhat is your Google + Page ID ? Please give it to me I will send you the code,
DeleteAlso my code is working see image below -
http://images.helperblogger.com/demo.png
Just one thing i would like to say that, you have given your feedburner username i.e. hblogger .........
ReplyDeleteim having problems with css, im trying to position it correctly
ReplyDeleteanyway you should fix this on next version, here the blog http://less4us.blogspot.com
Sorry bro. but is working fine in my demo blog.Can you add it to your again so that I can fix it quickly
DeleteThankssssssss
ReplyDeleteThank you :)
ReplyDeleteI added it into my blog but its coming in an horizontally nor its sticking ..what has gone wrong..?
ReplyDeletecan you give me the code where an element like side bar remains fixed after scrolling at certain distance it moves alongs with us and after reaching certain distance it stops following us ??
ReplyDeleteHi Rahul...Will you help me out..i have footer same like mentioned post but i want that it should not be sticky...i want that it should lye in bottom only...can you help me ??...http://www.yourknowledgeportal.com/
ReplyDeleteHumm , good!
ReplyDeleteThank you so much bro!
ReplyDeleteBloggerjin