Add Floating Share Bar in blogspot using jquery

In this tutorial i will show you how to add a floating share bar in your blogspot/blogger blog.Floating share buttons increases blog traffic.So lets do it.

STEP 1.  ADD HTML FIRST. 

1.Crate  a div  that holds all the share buttons

<div id='sharebar'></div>

3.Add share button codes under this div.if you dont know how to that.Read this article Add share buttons after your blog title in header area
4. Now login into your blogger.go to template edit html proceed.
5.Check  on Expand Widget Templates
6.Back up your template.
7..Find this code.

            <div class='post-header-line-1'/>
          </div>

8.you will find this code twice.

9.Replace that code with this one.As i said you will find that code twice.you have to add below code twice.and test which one works.then delete the rest

<div class='post-header-line-1'/>
          </div>

 <div id='sharebar'> 

YOUR SHARE BUTTON CODES GOES HERE 

</div>

STEP 2.Add jquery

 1.If you already have jquery in your blog.just skip this part.
2.if you dont have it.Find </head> in your template.and add below code before it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'/>

3.if you own a server u can upload jquery in that server if you want.

Step 3. Add jquery code

1.Find the </head> code again
2.add below code before that

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>
/****************************************

* Floating Navigation jQuery feature

****************************************/

$(function() {

// get initial top offset of navigation

var floating_navigation_offset_top = $('#sharebar').offset().top;

// define the floating navigation function

var floating_navigation = function(){

// current vertical position from the top

var scroll_top = $(window).scrollTop();

// if scrolled more than the navigation, change its

// position to fixed to float to top, otherwise change

// it back to relative

if (scroll_top > floating_navigation_offset_top) {

$('#sharebar').css({ 'position': 'fixed', 'top':0});

} else {

$('#sharebar').css({ 'position': 'relative' });

}

};

// run function on load

floating_navigation();

// run function every time you scroll

$(window).scroll(function() {
floating_navigation();
});
});</script></b:if>

3.This jQuery function  code not written by me.i took it from here.Thanks to him
4.This code will only load in post pages.not in index page.

Step 4.Add css

1.Go to Template>Customize >Advance>Add css

div#sharebar{
padding-bottom:5px;
padding-top:5px;
height:25px;
border-bottom:1px solid rgb(207, 211, 214);
width:100%;
z-index:99;
background-color:#F1F4F7;
}

2.You can change background color of the bar if you want just change the hex color code that in red.

Let me know if you face any problem add a comment.Share this tutorial.