A blog about cutting edge technology at its maximum pace.

Ritesh Warke On Thursday, April 21, 2011
I. Adding the buttons
  1. Login to your Blogger account.
  2. Go to Design > Page Elements.
  3. Click Add A Gadget.
  4. In Add A Gadget window, select HTML/Javascript .
  5. Copy the code below.

<!-- floating page sharers Start riteshrockss.blogspot.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; 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;/*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 riteshrockss.blogspot.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' 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='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://riteshrockss.blogspot.com/2011/04/how-to-add-floating-sharing-buttons-to.html">Get this</a></div>
</div>
<!-- floating page sharers End -->


  1. Save the gadget.
  2. Drag the gadget and reposition it under Blog Posts gadget.
  3. Click Save button on upper right corner.


II. Customizing

  1. Vertical alignment 
    Change the value of bottom in code line 2. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
  2. Horizontal alignment 
    Change the value of margin-left in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. 
    To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) orright (as in right:10px;) respectively.
  3. Adding more buttons 
    You can add any social bookmarking or sharing button to the bar. Just put each button code inside a div, like this: 



<div class='sbutton'>
PUT BUTTON CODE HERE
</div>

  1. and insert it right after line 27.
Enjoy!

0 comments:

Post a Comment

New Users Register Here