Floating social share buttons widget

        Social bookmarking is great way to get more traffic.But how can you make your visitor Share your content with their social bookmarking
profiles like Digg, Stumbleupon, and Social Communities like Google +,
Facebook.That's the difficult part,most people feel lazy about sharing
them with their Social bookmarking profiles.



But don't worry about it now.This widget make it easy for you.This
floating widget helps you to get more attention from visitors...This
widget will increase traffic to your blog. That's why this widget is
effective and this is a very needed one for any web site.



In most sites i saw this widget on "Left" side. but i suggest "Right", because when the reader scrolling the page, mouse pointer is always in the "Right" side. So i think clicking Effectiveness

is high in "Right" side.     ok then let's see how to add it to your blog

1. Copy the code below


2. Page element --> Add a Gadget --> HTML/JavaScript   --> Paste the code and Save

<style>



#floatdiv {

  position:fixed;

bottom:2%;

margin-left:870px;

z-index:10;

float:left;

padding-bottom:2px;



}



#ETiOne-Sbar {

        background:#444;

        border-top:1px solid #ddd;

        border-left:1px solid #ddd;

        border-bottom:1px solid #ddd;

        border-radius:5px;

       -moz-border-radius:5px;

       -webkit-border-radius:5px;

        padding-left:5px;

        width:60px;

        margin:0 0 0 5px;

}



.fb_share_count_top {width:52px !important;}



.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}



.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px
!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="floatdiv">

<div id="ETiOne-Sbar">

    <table cellpadding="1px" cellspacing="0">



    <tr>

    <td style="padding:5px 0px 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="SnOW_BiRDx">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    </td>

    </tr>



    <tr>

    <td style="padding:5px 0 2px 0;">

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

    </td>

    </tr>





<tr>

<td style=" padding:5px 0px 2px 0px;">

<script type="text/javascript">

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

<a class="DiggThisButton DiggMedium"></a>

</td>

</tr>

    <tr>

    <td style=" padding:5px 0px 0px 0px;">



<g:plusone size="Tall" expr:href="data:post.url">

    </g:plusone></td>

    </tr>

<tr>

<td style=" padding:5px 0px 2px 0px;">

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

</td>

</tr>

<tr>

    <td>

<p style=" line-height:0px; font-size:10px; font-weight:bold;
text-align:center;"><a style="color:#D3D3D3;"
href="http://everythinginoneplaze.blogspot.com/2012/02/floating-social-share-buttons-widget.html">Get
Widget</a></p>

    </td>

    </tr>

    </table>

</div>

</div>

After Done with copying code let's see how to customize the widget

• bottom:2%;
  
  - Change position Top to bottom -
  
  
  
  
  
  


• margin-left:870px;
  
  - Change position left to right -
  
  
  
  
  
  


• background:#444;
  
  border-top:1px solid #ddd;
  
  
  
  border-left:1px solid #ddd;
  
  
  
  border-bottom:1px solid #ddd;
  
  - Change background and boader color -
   
  
  
  
  
  

• data-via="SnOW_BiRDx"
  
  - Change this to your Twitter username -

ok friends !..