How To Add Floating Sharing Buttons Below Post Titles

Now A Days sharing is becoming very popular every visitor who likes your post directly shares it with his friends. So In This Post we will give you floating sharing bar which will be sticky or fixed below the post titles.The Main Advantage Of This Widget Is That This Bar Will be continuously showing when users will be reading your post so whenever they like any content they can easily share it.

So Let's Start-   

1. As Usual Go To Blogger >>Template >>Edit HTML

2. Press Ctrl+f to find </head>

3. Above </head> Paste The Following Code-

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[$(function() {var $movesbuttons = $("#floating-social-buttons"),$window = $(window),offset = $movesbuttons.offset();$window.scroll(function() {if ($window.scrollTop() > offset.top) {$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});} else {$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});}});});//]]></script>

4. Now Before ]]></b:skin> Paste The Following CSS Code-

<!--Floating Sharing Button By ngtechzone-->
 #floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 18px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}
<!--Ends-->

5. Finally Below The Second  <div class='post-header'> ( Press Enter Two Times) Paste This Code-

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='floating-social-buttons'>
<ul class='floating-social-buttons'>
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>
<li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>
<li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>
</ul>
</div>
</div>
</b:if>

Now Finally Click Save And You Have Added This Widget In Your Blog.

As Said Above Share This Knowledge To Your Friends-