Search This Blog

Dec 30, 2010

Adding Floating Share button in blogger

Social Media gives a big impact with regard of getting traffic to your site. Facebook, Twitter, Google buzz, Stumbleupon and so on. Most of the site I visited such as Mashable has a floating share buttons within their post. Aside from it is easy to see the share buttons; it also looks organized and neat.
Here are steps on how to add floating share button in your blogger templates.

1. Login to blogger account.

2. Go to design --> page Elements






3. Click Add A Gadget.

4. In Add A Gadget window, choose HTML/Javascript .
5. Copy the code below and paste it inside the content box.

<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">
<a href="http://mushutricks.blogspot.com/">Source</a>

<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>
</div>
</div>

6. Save the gadget.
7. Click Save button on upper right corner.

If you like this post. Share it. Enjoy!

6 comments:

Anonymous said...

Hi,
Thanks so much for the widget.
looks really awesome and simple to install.
is their a way to display floating share button in d post only not on homepage.
please help.
thanks.

Bad Pool Caller Blue Screen Error said...

I tried to increase the f-Share button on my post about 2 hours now. I tried all the html code that I found and somehow never work, because I wanted to. Up. Also, I could move on the left side to right side, one thing I could do to other codes.

Marina said...

Thank you so much for simplifying this, and for adding pictures. Very helpful for us newbies!

JanzellJurilla said...

Hi, you can do this by editing your template:

1. Login to your blog and go to Design menu
2. Click Edit HTML
3. Check "Expand Widget Templates" checkbox option.
4. Paste the code anywhere inside the body tag.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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">
<a href="http://mushutricks.blogspot.com/">Source</a>

<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>
</div>
</div>
</b:if>

JanzellJurilla said...

Thanks for your sweet words!

Ebuycenter02 said...

i'm trying to look it for my web site http://www.ebuybeauty.com/ for a long time. thanks you very much. you help me a lot