Tuesday, 26 July 2011

floating social media sharing buttons to Blogger

I have included Facebook Share, Retweet, Stumble,  Digg This and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Facebook Share button and counter are rounded to blend with the rest of the buttons (doesn’t work in Internet Explorer, of course). You can add more social bookmarking or sharing buttons later if you wish.
floating social bookmarking buttons

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 and paste it inside the content box. 
  1.  
    <!-- floating page sharers Start bloggersentral.com-->
    <style type="text/css">
    #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 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' 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='gplusone'>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plusone size="tall"></g:plusone>
    </div>
    <div style="clear: both;font-size: 9px;text-align:center;">Get 
    <a href="http://www.rajwin-aravind.blogspot.com/">widget</a></div></div>
    <!-- floating page sharers End -->
  2. Save the gadget.
  3. Drag the gadget and reposition it under Blog Posts gadget.
  4. Click Save button on upper right corner.

II. Customizing

  1. Vertical alignment
    Change the value of bottom in code line 3. 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 3. 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;) or right (as in right:10px;) respectively.
  3. Replacing and removing buttons
    You can replace existing buttons with your own. Each button is represented by this code:
 
<div class='sbutton'>
BUTTON CODE
</div>
To replace the button, simply replace the button code with the new code.
To remove the button, delete the whole div.
Update: If somehow your Google +1 button doesn’t appear despite other buttons appear successfully, try this workaround:
  1. Go to Design > Edit HTML and find this line:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    or
    <body>
  2. Copy the code in step I.5 and paste it right below the line.
  3. Replace the margin-left:-71px; in code line 3 with left:10px;.
  4. Preview before saving.
Enjoy!

U Can Download Any Videos, All cracked Applications, Games in the net & also with Various Features.
Click Here to Try ScienceHack ToolBar...

0 comments:

Post a comment