Facebook and twitter, digg share buttons: how to get a floating social share button ~ iClickMate

Optimizing your webpage for traffic is very important in many aspects, however making it easy for a reader to share your webpage with friends is most important, since the age of social networking came about the amount of traffic to websites rapidly increased, this shows webmasters the utility of these tools, so make use of them in many way. My blog tutorial will help you add a simple but effective share button that floats on the left of your screen like this one on my webpage.

step 1-go to blogger home/dashboard

step 2- click on design

step 3- on page elemets click "add gadget"

step 4- scroll down till you see java/HTML and click on that.

step 5- add this code to the content box.


<style>
#pageshare {position:fixed; bottom:15%;left:20px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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="Get this from BloggerSentral.com">
<div class='sbutton' id='fb'>
<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>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggersentral.com/2010/07/install-floating-social-media-buttons.html">Get this</a></div>
</div>


step 6- save and close then view your blog and your done. enjoy!!