Full Length Sticky Social Bar with Social sites and Directories buttons

Simplest way to get Sticky bar for blogger and other sites.





Step 1 - Go to Layout.

 Step 2 - Add an HTML / Javascript Gadget just below the Blog Post and add the following code -
<style>
#stickySideBar {
        background:#ffffff;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:65px;
        margin:0 0 0 5px;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
}
#stickyBar {
  position:fixed;
  margin-left:-120px;
  z-index:10;
  float:left;
  bottom:5%;
}
.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="stickyBar">
<div id="stickySideBar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
 <td style="padding:10px 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:10px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
   
<td style="padding:10px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>

    </tr>
<tr>
    <td style="padding:10px 0px 0px 0;">
<a data-pin-config="above" href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
    </td>
    </tr>


<tr>
    <td style="padding:10px 0px 0px 0;">
<su:badge layout="5"></su:badge>


<script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>


    </td>
    </tr>
<tr>
    <td style="padding:10px 0px 0px 0;">
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>
    </td>
    </tr>
    <tr>
    <td>
<p style=" line-height:10px; font-size:10px; font-weight:bold; text-align:center; font-color:blue"><a href="http://www.buggybread.com/2013/03/full-length-sticky-social-bar-with.html">Sticky Bar</a></p>
    </td>
    </tr>
    </table>
</div>
</div>

To change the background color so that it matches your site theme 

Just the change the following code  within #stickySideBar

 background:#6666ff;
( #6666ff for Blue , #ffffff for white , #666666 for grey )

 Get a complete list of colors.

To change the position of Sticky Bar

Change the following with #stickyBar

bottom:30%;
(30% for center left , 15 % for bottom left and 50 % for top left )

 To Change the width of the bar

 Change the following with #stickyBar

margin-left:-120px;
( increase the margin to make it wider )


Want a shorter bar for just facebook , google and twitter.

Here it is.

http://www.buggybread.com/2013/03/sticky-social-bar-for-blogger-facebook.html