Add Floating Share Buttons To Your Blogger Sidebar

You must have seen in many wordpress blogs including Mashable that they use floating share buttons. Now it's time for Blogger to add a floating Share Buttons widget. In this tutorial How To Add Floating Social Share Buttons To Your Blogger Sidebar I will tell you the method that can be used to implement this widget to Blogger. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with some animation effects.

I have included Tweet, Stumbleupon, Google +1 (Plus one) and Facebook button in the bar. Each of them comes with a live counter and hover rollover effects.

Live Demo

Step 1. How To Add Floating Share Buttons To Blogger

1. Go to Blogger > Design > Page Element
2. Click Add a Gadget
3. Copy the Code and Paste it inside the content box.

<!-- floating share bar Start blogger4ever.com-->
<style type="text/css">
#pageshare {
float:left;
margin-left:-80px;
background: #fafafa;
position:fixed;
bottom:20%;
border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#pageshare:hover {
background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);}
#pageshare .sbutton {
float:left;clear:both;margin:5px 5px 0 5px;}</style>

<div id='pageshare' title="Get this Widget from Blogger4ever.com">
<div class='sbutton' id='tweet'>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="YOUR USERNAME">Tweet</a> </div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone> </div>
<div class='sbutton' id='fbshare'>
<div id="fb-root"></div>
<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>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="50" data-show-faces="false"></div></div>
<div style="clear: both;font-size: 10px;text-align:center;"><a href="http://www.blogger4ever.com/">Get Widget</a></div><!-- Do not remove this link --> </div>
<!-- floating share bar End -->

4. Save the Gadget.

Step 2. Drag The Widget/Gadget And Reposition It

1. Drag the Widget/Gadget and Reposition it under the Blog Post Widget/Gadget.

2. Click Save Button (Top right hand corner).

That's it, Enjoy!
You might also like: Add Social Share Count Buttons Below Post Title Blospot
Add Floating Facebook Likebox To Your Blogger Blogspot
Add Sliding Twitter Followers Box To Your Blogs