Add Floating Social Sharing Buttons Below Blogger Post Titles

Well, social media buttons are most important widget for all bloggers to boost the traffics. and one of the best thing to get traffic from the social media is that you have to show options to your readers to share your story by adding this social media buttons widget to your blog. I have already published social sharing slide out box widget earlier, but today i gonna share another floating social sharing buttons which will be show up below all your blogger posts.

Floating Social Sharing Buttons for blogger

One of the best thing about this widget is that when anyone scroll down then social buttons widget will be change to sticky / floating fixed position and your readers will be able to see share button even they scroll down to the bottom and there is great chances of your readers share your blog posts on their social networking profile/wall. when your blog's reader will go back to the top then sharing buttons will be return to their initial position.

Also see : jQuery Pop-up Facebook Like box Widget Generator V1

So, if you would like to have this beautiful widget to your blog, then follow the simple steps given below.

How to Add Floating Social Sharing Buttons to blogger?

Go to blogger dashboard > Template > Edit HTML
Search for </head> tag using CTRL+F and paste below script above </head> tag in your blog's HTML

<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>

Now, search again for ]]></b:skin> and paste below CSS code just above it.

#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;
}

Now, search for the <div class='post-header'> 2 times and in the second one add the following 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>

Finally, save your template and see your blog's post page, there you should see a new horizintal social sharing widget installed. well, i highly recommended this widget as it could really help you to get more social traffic for your blog.

Add Comment

Quicker BD

How to Add Floating Social Sharing Buttons to blogger?