How to add floating sidebar social button widgets to blog,websites or wordpress?

Floating social button widgets to blog or website or wordpress is essential improve the quality of the blog,webpage and wordpress to appear as rich templates and to attract the visitor.Social buttons and these widgets helps to visitors to share the pages to their friends.

It also makes other visitor to enter into the new site specialy the new visitors and make to improve google site rankings.It is one of the SEO optimization tricks.

How  floating social button widget looks?

Here for my website i had removed the digg and stumble upon button in my website, but have provided those code also.

Step 1:

Login to bogger or blog .

Step 2:

Click layout and click add new widget.

Step 3:

Then select html/java script button and add to blog.

step 4:

Then copy the below code and paste it in that boxs.

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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;-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="Share This With Your Friends">

<div class="sbutton" id="gb">

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">

</script><fb:like font="" layout="box_count" show_faces="false"></fb:like></div>

<div class="sbutton" id="rt">

<a class="twitter-share-button" data-count="vertical" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">

</script>

</div>

<div class="sbutton" id="gplusone">

<script gapi_processed="true" src="https://apis.google.com/js/plusone.js" type="text/javascript">

</script><g:plusone size="tall">

</g:plusone>

</div>

<div class="sbutton" id="su">

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5">

</script><su:badge layout="5"></su:badge> <script type="text/javascript">   (function() {     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;     li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);   })(); </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><span class="db-wrapper db-clear db-medium"><span class="db-container db-submit"><span class="db-body db-medium"><span class="db-count"></span><span class="db-copy"></span><a class="db-anchor" href="http://www.blogger.com/blogger.g?blogID=3505824197937252492">digg</a></span></span></span></div>

<div class="sbutton" id="fb">

<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script>

</div>

<div style="clear: both; font-size: 9px; text-align: center;">

<a href="http://www.blog4al.com/2012/09/how-to-add-floating-sidebar-social_9.html/" target="blank"><span style="color: red;">Blogger Widgets

</span>

</a>

</div>

</div>

step 5:-

Replace above blog id with your blog id.

step 6:-

Then save the widget and reload the website or blog.

You will find a floating social sidebar buttons and you can share this.

Update:

This widget is now update floating social widget for blog