Wednesday, May 11, 2011

How to add floating share buttons to blogger

How to add floating share buttons to blogger

floating share buttons

1.  Log in to your blogger account and Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below one of below code.

<style>
#sharebar {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;right:0;}
#sharebar .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>
<div id="sharebar">


<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">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">
<script src="http://widgets.digg.com/buttons.js" type="text/javascript">
</script>
<a class="DiggThisButton DiggMedium" href=""></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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggertrix.com">Get widget</a></div>

</div>
</div>
</div>


4. Save HTML/Javascript. you are done.




Dont Miss Another Post Connect With Us

Get informed when we publish the new post.So, you have to subscribe below

3 comments:

  1. UnknownJuly 1, 2011 at 9:11 AM

    I added floating share buttons, and it works great. Is there a way to add a share-by-email button to it?

    ReplyDelete
  2. Tips Trik BloggingAugust 17, 2011 at 7:24 PM

    This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Youve got a design here thats not too flashy, but makes a statement as big as what you're saying. Great job, indeed.

    ReplyDelete
  3. pasinduDecember 22, 2011 at 5:44 PM

    nice & useful post.thnx for sharing bro.check this also it will be useful.

    how to add any share button you want to this widget

    http://www.tech-cave.com/2011/12/add-any-share-botton-to-floating-share.html

    ReplyDelete