Add Floating Facebook Like, Twitter , Google Plus Button Widget to Blogger [ Blogger Tutorials ]

Add Floating Fb GPlus Tweet Buttons to the Blogger

Social Networking plays major role in bringing traffic to our site,so we've to make our site in all way to share our articles/posts to the facebook,Twitter,Google Plus so as the friends of friends will see ,and then the traffic will flow in, who knows  if your post is something awesome it may goes viral.

I've already shared : Facebook Pop-up Like Widget for blogger

How to add  Social Sharing Widget to Blogger ?

You may've noted the social sharing widget - Facebook Share , Twitter Teet ,Google Plus +! at the left of this post,it will just scroll down in all the posts.

Just follow the simple steps.

1. Goto Blogger Design > Page Elements > Add Gadget > Select " HTML/JavaScript

2. Paste the below code in the Pop up Box ,

<style> 

/*-------SCB Floating Sharing Widget------------*/

#floatdiv { 

  position:fixed; 

bottom:15%; 

margin-left:-70px; 

z-index:10; 

float:left; 

padding-bottom:2px;

}

#scbsidebar { 

        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="floatdiv"> 

<div id="scbsidebar"> 

    <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="studentscrunch">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>  

    </table> 

</div> 

</div>

4. Save it .

5. Now You just bring "Social Sharing gadget" below " Post

Thats it ,Now Save ! and view your blog.

Hope you'll Like it,by the way dont forgot to share this..

If you need any helps,drop your comments below..

More Blogger Tricks , Blogger Tutorials , Premium Blogger Templates on related posts below