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–>
#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;}
<div id=’pageshare’ title=”Get this from”>
<div class=’sbutton’ id=’fb’>
<a name=”fb_share” type=”box_count” href=””>Share</a><script src=”” type=”text/javascript”></script>
<div class=’sbutton’ id=’rt’>
<script src=”” type=’text/javascript’></script>
<div class=’sbutton’ id=’su’>
<script src=”″></script>
<div class=’sbutton’ id=’digg’>
<script src=’’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
<div class=’sbutton’ id=’gb’>
<a class=’google-buzz-button’ data-button-style=’normal-count’ href=’’ title=’post on google buzz’>
<script src=’’ type=’text/javascript’></script>
<div style=”clear: both;font-size: 9px;text-align:center;”><a href=””>Get this</a></div>
<!– floating page sharers End –>

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

Originally posted on May 21, 2011 @ 4:34 pm

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.