Sticky Social Bar for Blogger sites - Facebook , Google Plus , Twitter


Simplest way to get Sticky bars 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:#6666ff;
       -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:30%;
}
.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: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 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:5px 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>              <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center; font-color:blue"><a href="http://www.buggybread.com/2013/03/sticky-social-bar-for-blogger-facebook.html">Sticky Bar</a></p>
       </td>
    </tr>
</table>
</div>
</div>

 This will add the following sticky bar with position as center left.

To Change Facebook Share button to Facebook Like Button.
Change <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php"> in the above code
to
<a class="addthis_button_facebook_like" fb:like:layout="button_count">

 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 Full length Social bar with additional buttons for
  • Linked In
  • StumbleUpon
  • Reditt
  • Pin interest

 Check this at 

 http://www.buggybread.com/2013/03/full-length-sticky-social-bar-with.html