Total Pageviews

Popular Posts

Powered by Blogger.

Followers

Sunday 4 December 2011

Add Floating Social Sharing Buttons In Blogger


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 social widget to your blogger/blogspot blogs. I made it into a widget, so you don’t have to go into your template HTML to install this. Just drop the whole code into a HTML/Javascript gadget.It will appear outside of your post sections and as you scroll the page, this widget will also scroll with some animation effects. sounds cool isn't it? so get ready to have this
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.


0 comments:

Like Us On Facebook

Facebook Badge