Floating Google +1, Facebook, Twitter Buttons For Blogger

Floating Google +1, Facebook, Twitter Buttons For Blogger

In this tutorial I am going to show you how to add the floating google +1 , facebook , twitter buttons in blogger blog. This is a container having 3 sharing buttons like facebook , google + , twitter. Its so much important for all the bloggers because whenever your reader reades the post and if your reader want to share your post and its easy for them to share your post in facebook , google + and twitter. 

DEMO
Just follow the simple steps to add the floating google +1 , facebook , twitter buttons. 

 

1. Login into your blogger blog 
2.And select Layout 
3.Now click on “add gadget” and select “HTML/Javascript” and paste the bellow code.

<style>
#pageshare {position:fixed; bottom:15%; left:105px; float:left; border: 1px solid white; border-radius:2px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px;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="Share This With Your Friends">
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<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='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://techlosoft.blogspot.in/" target="blank"><font color="silver">Widgets<font></font></font></a></div></div>

 4.Now just save the widget and you have done !