Blogger is really a good platform to blog and so many many famous bloggers are using blogspot as their blogging platform. When compared to wordpress blogger has less number of plugins. And also there is no option for installing plugins in blogspot. So each and every thing we do is add or edit the template using HTML and CSS. Adding share buttons are really easy in wordpress, they can be added by just adding the plugin Digg Digg which helps them to add share buttons under the posts or above the posts or even as floating. Adding share buttons in blogspot is not that much easy. We have to add codes to the template. It is easy for the users to add it. But its difficult for us developers to create it and this floating share buttons took me upto 1 hour to create it. I have created it for my own use but one of my friend Arun Sathiya (CEO @ webbuzz) asked me for the codes and so I decided to share it with you guys. So lets see on how to add it.1. Login to your blogger account.
2. Navigate to Design > Page elements and a HTML / Java Script. Add the following codes to it.
<!-- floating page sharers Start | Cyber Freaks-->
<style type="text/css">
#pageshare {position:fixed; bottom:20%%; margin-left:-220px; 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'>
<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 class="DiggThisButton DiggMedium"></a>
</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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://cyberfreax.blogspot.com/2011/08/blogger-is-really-good-platform-to-blog.html">Get widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating page sharers End -->
And save the HTML / Java Script widget and drag it and drop so that it is below the Blog Posts widget.
3. And now that you have added the share buttons to your blog which eventually float.
CUSTOMIZING FLOATING SHARE BUTTONS :
1. In some of your templates the share buttons may appear to the right most to in the center of the post. You can bring it to the correct position by changing the value of margin-left in line 3. The more you increase the value the more the share buttons will go to the left.
2. You can add more share buttons add the following code snippet
<div class='sbutton'> BUTTON CODE HERE </div>
Replace the Button Code Here with the code of your share button that you wanna make it appear. And add the above codes right after
codes.
And thats it. Hope these code snippets helped you guys. Enjoy having floating share buttons. Any queries post them as comments.
