Floating Social Buttons

Social Media or Social Share button is play important role in blogger blog. Submitting your blog post in the social bookmarking sites will help to increase your blog traffic and the search engines can easily find you blog post with the help of social bookmarking websites. Social MediaSharing sidebar Buttons help to spread your blog post and more chance of visitors will come on your blog. Social Share Sidebar contains collection of popular social media sharing buttons which you can add to the sidebar of your blog. Social Media Buttons Facebook, Twitter, StumbleUpon, Digg, and Google Plus. This will increase sharing by 20-30% because of its unique and permanent position.

I strongly suggest every blogger must have a floating social media icons in the sidebar as the share options will be made visible across the blog posts We have included Face book like, Tweet, Stumble, Google Plus and Digg. Each of them comes with a live counter.

Adding the Social Share Button in Sidebar   

1. Go to Layout
2. Click on Add A Gadget
3. From the pop-up window, scroll down and select HTML/Javascript
4. Copy the below code and paste it inside the empty box.
5. Save the gadget

<!-- Sidebar share buttons Start techkgp.com--><style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color: #b2e0ff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !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='pageshare' title="Get this from techkgp.com"> 

<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div> 

<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='techkgp' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script> 

<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><div style="clear: both;font-size: 9px;text-align:center;"> 

<a href="http://simplesoftwares4u.blogspot.com/" target="blank"><font color="red">Get This<font></font></font></a></div><!-- Sidebar share buttons End --></div></div>

Customization 

1. Vertical alignment - Change the value in Blue to fix the Bottom distance even when window is resized.
2. Horizontal alignment - Change the value in Red of margin-left. . Increase or decrease the value based on your needs.
3. Twitter setting - Replace Techkgp with your Twitter username
4. Background Color - To Change the color of Background change the value of Color Code. You can use our Color Code Generators Tool for Color Code.
5. Replacing and removing buttons - You can replace the existing buttons with your own buttons . Each button is represented by this sample code: <div class='sbutton'> Button Code Here </div>

That’s all
Enjoy !