Tuesday, February 8, 2011

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

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.

<!-- floating page sharers Start bloggersentral.com-->
<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>
<!-- floating page sharers End -->


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

1 comments:

Arkitek said...

sup bro!!! thanks so much for all yor help!!!

Post a Comment

 
© 2010 iClickMate
Bloggerized by Wayne Meyer, based on FUNK DESIGN design.