Floating social media sharing buttons for Blogger

Accordance with my promise to my readers, I am providing a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog (or a Word Press blog or just for any website). From now you will not have to go into your template HTML to install (or remove) them as I have made it, using widget. Only you have to drop the whole code into a HTML/JavaScript gadget.

I also have included Face book Share, Retweet, Stumble Upon, Digg and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Face book Share button and counter are rounded to blend with the rest of the buttons i.e. it will not work in Internet Explorer .Suppose later if you want to add more social bookmarking or sharing buttons, you can also do that.

<!-- floating page sharers Start www.blogtechworld.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from blogtechworld.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></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='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.blogtechworld.com/2011/10/floating-social-media-sharing-buttons.html">Add this</a></div>
<!-- floating page sharers End --></div>

Copy Give code and Don't Change it.

Layout>Add a Gadget>HTML/JavaScript (Copy given code below and Paste it)

Note :- If Your Social Media Shearing Button Not Showing on Proper Place
Search margin-left:-250px and Change Numeric Value to Move on Proper Place.

Save and Enjoy............

Related Posts:

Promote Your Blog

Add This