Popular Posts
-
The web is loaded with software which allows you to download YouTube videos in a flash, but there are times when we need to download multip...
-
Few days back Aircel has started accepting pre-orders for Apple iPhone 4S and it is expected that it will be launched officially on Novembe...
-
Its been a while many got impressed with Mashable’s floating social bookmarking widget. So I am going to teach you all how to add floating ...
-
Android Ice Cream Sandwich is the latest version of Android OS. Google Nexus, which is the latest addition to the Android Smartphone, is go...
-
OCR (Optical Character Recognition) is a technology that makes it possible to scan and detect text out of an image document which is scanne...
-
You might have faced the issue many times before. Sometimes you will be excited for getting a software but if it's zip password protect... -
There may not be specific rules that everybody can use to become the best blogger or to create the best blog . Bear in mind that blogs are...
-
Generally the user don't use the Conditions of Google to get Adsense by which Google does not approve their Adsense account. Basically t... -
How much time do you spend on YouTube daily? I bet at least 5 minutes a day. YouTube developers have done an extraordinary job of creating ...
Sunday, 4 December 2011
Add Floating Social Sharing Buttons In Blogger
01:56 | 
Posted by
Satyajit Barik |
awesome floating sharing widget in your site......here we go.!!!
1. Login To Blogger Go To > Design(if u r using the new interface go to layout) > Page Elements.
2. Simply add a Gadget of HTML/JavaScript type.
3. Add this code in to it:
<!-- floating page sharers Start -->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border:1px solid;border-color:#eeeeee #e5e5e5 #c0c0c0; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f7f7f7;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="Tricks N Tips">
<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='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://tricksntechsforum.blogspot.com/2011/12/add-floating-social-sharing-buttons-in.html">widget</a></div>
</div>
<!-- floating page sharers End -->
4. Save your widget and check your blog....
Now If you want to Customize your Floating Widget here are some tips to do so...
Customizing
Vertical alignment (or the postion of the widget above the taskbar):- 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 %.
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-leftwith left (as in left:12px;) or right (as in right:12px;) respectively.
Add or remove buttons:You can replace existing buttons with your own. Each button is represented by following code.
<div class='sbutton'>
BUTTON CODE HERE
</div>
Here is an example to how to add the codes:
Code for Stumbleupon button
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
Code for Digg button
<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>
To replace the button, simply replace the button code with the new code.
To remove the button, delete the whole div.
To remove the button, delete the whole div.
Labels:
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment