Adding floating Social media share bars
I. Adding the buttons
- Adding to Blogger
- Go to Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it under Blog Posts gadget.
- Click Save button (top right hand corner).
- Adding to WordPress
- Go to Dashboard > Appearance > Widgets > Available Widgets.
- Drag Text widget into a sidebar.
- Paste in the code.
- Save.
<!-- floating share bar Start ebookmaterials.blogspot.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' >
<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;"><a href="https://accounts.google.com/Login?continue=http://labs.google.co.in/smschannels/channel/ebookmaterials" alt="Free sms alert"><image src="http://aux.iconpedia.net/uploads/20456545441469173030.png"></image></a>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://topsites100.blogspot.com"><font color="Red" size=3>Get This</font></a>
</div>
<!-- floating share bar End --></div>
Vertical alignment II. Customizing
- Change the value of
bottomin 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 %. - Horizontal alignment
Change the value ofmargin-leftin 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 themargin-leftwithleft(as inleft:10px;) orright(as inright:10px;) respectively. - Replacing and removing buttons
You can replace existing buttons with your own. Each button is represented by this code:To replace the button, simply replace the button code with the new code.1<divclass='sbutton'>2BUTTON CODE3</div>
To remove the button, delete the whole div.
Update (for Blogger): If somehow your Google +1 button doesn’t appear despite other buttons appear successfully, try this workaround:
- Go to Design > Edit HTML and find this line:
<body expr:class='"loading" + data:blog.mobileClass'>
or<body> - Copy the share bar code and paste it right below the line.
- Replace the
margin-left:-71px;in code line 3 withleft:10px;. - Preview before saving.
No comments:
Post a Comment