Floating Social media buttons (Like tweet button, Facebook Share or like, Google Buzz, etc) are one of the most demanding widget for blog. After the implementation by Mashable it became in high demand.
In this topic i will talk about the Floating Social media buttons by adding some simple codes in your Blogger (Blogspot) template. But first of all I would thank to BloggerSentral for the code who have made it easier to install in the .xml file. BloggerSentral and BloggerMint are my favourite blog for Blogger (Service). Even I am not using Blogger platform for my blog but follow them personally.
By the way, let’s come to the point and install “Floating Social sharing media or sharing buttons”. Here is the code for the floating social media button.
Copy the code below:
<!-- floating page sharers Start bloggersentral.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;-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 BloggerSentral.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='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></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggersentral.com/2010/07/install-floating-social-media-buttons.html">Get this</a></div>
</div>
<!-- floating page sharers End -->
Just Click on “Add a Gadget†under Blogger>> Design Tab>> Page Elements and add as Html/JavaScript code.
If you wish to add the code to your template file (i.e. .xml) by editing html. Visit Here for the tutorials. But I would prefer to adding a Gadget instead of modifying template. But the choice is yours.
Alternatively, Add the codes betweento the style section in the header of blogger template in html edit mode and add the rest codes to just above the clossing body tag, which may be found almost at the end. This method will make your blog faster then previous method.
Further reading: Comparison chart between WordPress and Blogspot blog. Which is better?