[How to] Add Floating Social Share Buttons To Blogger (great widgets) [Tutorial]

If you want to grow your web-blog or web-site then you definetly need so Social sharing buttons , so thats your visitors can share your content with their friends. So here i m sharing a very popular Floating Social sharing buttons for your web-blog or web-site. The tutorial for How to Add floating Social share Buttons to your Blogger goes Here :

Login to your Blogger Dash board.
Click On Design->Page Elements->Add A Gadget->HTML/Java Script.
(Get A backup First)
COpy the Given Widget Code there.

<!– floating Start step2problogging.blogspot.com–>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:none; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px -500px;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;}
<div id=’pageshare’ title=”Get this from step2problogging.blogspot.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 class=’sbutton’ id=’rt’>
<script src=”http://tweetmeme.com/i/scripts/button.js” type=’text/javascript’></script>
<div class=’sbutton’ id=’su’>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script>
<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 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>
<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 style=”clear: both;font-size: 9px;text-align:center;”><a href=”http://step2problogging.blogspot.com/2011/06/how-to-add-floating-social-share.html”>Get This</a></div>
<!– floating End –>

Move that gadget at the bottom,Save it.And enjoy.
Like it????? Share your Thanks….

About the Author

This article is written by: Abhi Balani – Finder of ProBlogging. Subscribe to Feeds or Like on Facebook.┬áContribute to this Web-blog , Write For Us
Abhi Balani Social Links Add on Facebook, Follow on Twitter, Add to your Circles in G+.

Abhishek Balani

A full stack developer, sometimes designer, passionate coder, tireless knowledge seeker, curious learner. I have a strong passion for new technologies, very autodidact and love to build new things from the ground up. Having 5+ years of dynamic experience accumulated from working in early stage startups to mid-sized organizations in Agile environment. Skilled in Python and related frameworks, React.js, Databases, Hadoop, Elastic Search and various AWS Services like Boto3, API Gateway, Lamda, EC2, EMR, CloudWatch.


  1. Hi Abhi.
    Thanks for this tutorial, it is awesome. My question is that, is there a way to move the buttons from the right side of the page to the left side, because currently it is blocking some text.

    Thank you.

  2. @ SuperGeek : Your wlcome.
    Try changing Code line 2 which is

    "#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:none; border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px -500px;z-index:10;}"

    Change float:none with float:left or right.

    and padding -500 to 0.
    i hope this will sort your prolem.

Comments are closed.