Wednesday, March 14, 2012

Add Floating Sharing buttons to sidebar

You have seen these sharing buttons on many popular blogs and its really looks cool. Here i have come with simple but cool sharing buttons widget for your blog. Its having three most popular sharing buttons for your blog. I think these three button (Twitter, Facebook and Google plus) are very common and important social media button. So I have designed for these three button. If you need any other sharing button, then share your view on comment.


Add Floating Social Media Widget to sidebar

  1. First go to blogger > Design > Page Element
  2. Add a Gadget below Post box
  3. paste the following code 
<style>
/*-------PBT Sharing Widget------------*/
#pbtfloat {
  position:fixed;
bottom:15%;
margin-left: -84px;
z-index:10;
float:left;
padding-bottom:2px;
}
#pbtsidebar {
        background:#fff;
        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="pbtfloat">
<div id="pbtsidebar">
    <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="probloggingtool">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 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> <a href="http://www.probloggingtools.com/2012/03/add-floating-sharing-buttons-to-sidebar.html" style="color:#000000; font-size:8px">Get This </a>
    </td>
    </tr>
        </table> </div> </div>
         4. Adjust the position of the widget, edit -84px; 
         5. Save the Gadget and see your blog again.
         6. You can use this in blogspot blog.

If you want to more sharing buttons in this widget, please do comment and i will try to add other social sharing widget in my next blog post.

Need Help ?

 If you are not done it properly or having any confusion, feel free to ask. I would feel good to help you.

    0 comments :

    confused??? Post a Comment

     

    Recent Posts

    About PBT

    We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...