This tutorial will simply guide you "How to Add Scrolling Sticky Bar For Blogger Blog?". With the help of this cool sticky bar you can increase your twitter tweets, FB likes,Google +1, subscribers,you will get more visitors if you will get more shares, likes and tweets. Because it catches everyone's attention on them.
This widget contain many features like Home Button, Twitter Share Button, Facebook Like, Google +1, Subscription Box, Random Post and Go On Top Option.This sticky will sticks to upper part of blog page and only visible when scroll down.Now lets get started and see how to add this cool 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.
Note - If you want Beautiful Auto Scrolling Sticky Bar With Close Button then you may follow the below link:
Click Here --> How To Add Beautiful Auto Scrolling Sticky Bar With Close Button?
Demo Of Scrolling Sticky Bar For Blogger Blog
 |
| Click On Image For Large View |
How to Add Scrolling Sticky Bar For Blogger Blog
Step 1 : Adding The HTML
- Go to Blogger Dashboard > Design
- Backup Your Template Before Make Any Changes
- Click On Edit HTML
- Enter (Cntrl+F) 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='BD-Bar-Container'>
<div id='BD-Bar-Content'>
<ul id='BD-Bar-Left'>
<li class='Home'> <a href='http://www.blogsdaddy.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='BD-Bar-Right'>
<li class='Subscribe'> <div class='BD-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', '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='BlogsDaddy'/><input name='loc' type='hidden' value='en_US'/> <input class='BD-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://www.blogsdaddy.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>
- Replace http://www.blogsdaddy.com/ With Your Blog URL
- Replace BlogsDaddy 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>Step 3 : Adding The Bar Styles
<script>
//<![CDATA[
var b = $("#BD-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>
- Now Find Below Code
]]></b:skin>
- Add Below Code Just Above It
#BD-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));
}
#BD-Bar-Container , #BD-Bar-Left .Home a, #BD-Bar-Right .btt a,.BD-emailsubmit {
box-shadow: 0 5px 5px -5px #999;
-webkit-box-shadow: 0 5px 5px -5px #999;
-moz-box-shadow: 0 5px 5px -5px #999;
}
#BD-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;
}
#BD-Bar-Container *{
padding:0;
}
#BD-Bar-Container a {
text-decoration:none;
}
#BD-Bar-Content{
width:1024px;
margin:0 auto;
}
#BD-Bar-Content li{
list-style:none;
float:left;
}
#BD-Bar-Left{
float:left;
width:45%;
}
#BD-Bar-Right{
float:right;
width55%;
}
#BD-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}
#BD-Bar-Right li{
margin-top:-7px;
}
#BD-Bar-Left .Home a, #BD-Bar-Right .btt a,.BD-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;
}
#BD-Bar-Left .Home a:active, #BD-Bar-Right .btt a:active,.BD-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}
#BD-Bar-Left .Home a{
background:#143eb4;
}
#BD-Bar-Left .Home a:hover{
background:#1556fa;
}
#BD-Bar-Right .Subscribe{
margin-top:-14px;
}
#BD-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}
#BD-Bar-Right .btt a:hover{
background:#06b421;
}
.BD-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.BD-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){
#BD-Bar-Container{
display:none;
}
}
- Finally Save Your Template and Visit Your Blog
0 comments:
Post a Comment