Adding Floating Social Sharing Buttons With Counters (Twitter, Facebook, Google Plus) on your Blog

Do you want to share your blog to three famous social networking site like Facebook, twitter and Google plus in easy way? We all know the social media is one of the excellent way to get more visitors and the more visitors to come on your blog  the more popularity you will  get. If your blog or site helpful or I should I say helps your visitor of course she/he will try to share your blog to her/his friends, family and others. The question is you have easy way to share your blog on social media? Have an easy way to share your blog to others you will get more visitors in a easy way too. Did you notice that on most of  the blogs are using Floating Social Buttons in left side or in right side of the page? So, here’s a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog. Here included Facebook Share, Twitter,  Google +1 buttons in the bar. Each of them comes with a live counters and real time.

Lets get started!

Steps of Adding Floating Social Sharing Buttons With Counters (Twitter, Facebook, Google Plus) on your Blog:

1. Go to blogger and log in to your blogger account

2. Pick up your blog that you want to adding Floating Social Sharing Buttons and click "more option icon"

3. Click "Layout"

4. Click "Add a Gadget" and the pop up window will open...

5. Find and click " HTML/JavaScript " or a "+" sign beside it

6. Then copy the code below and paste it inside the "content" box and just leave blank a "title" box

Code:

<style>

/*-------Floating Social Sharing Buttons With Counters Widget------------*/

#floatdiv {

position:fixed;

bottom:15%;

margin-left:-70px;

z-index:10;

float:left;

padding-bottom:2px;

}

#scbsidebar {

background:#701DFF;

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="YOURTWITTERUSERNAME">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: 'en-US'} </script>

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

</g:plusone></td>

</tr>

</table>

</div>

(change "YourTwitterUserName" from the code and you can change a "background color"(#701DFF) too if you want, go here for color codes.)

7. Then drag and drop  " HTML/JavaScript "below "Blog posts"

8. Click "save changes"

Enjoy sharing your blog to others :)
Just comment if you have problem.
God bless!