Loading...

Amazon direct products

How to add floating share button to blogger ?

Having floating share widgets in either side of the websites an easy way to engage your visitors to share your knowledge with others on those social networks. So let’s talk how to add it.

How to Add Floating Share Buttons On the Sidebar:

1. Log in to your blogger account and click on Design
2. Then, Click on Add a Gadget on the sidebar.
3. Select HTML/Java Script.
4. Paste the code below into the box and save. There's no need for a title.


<!-- Floating Share Buttons Code Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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;-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="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.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 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='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><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.tekadda.com/2012/04/how-to-add-floating-share-button-to.html" ><font color="black">[Get This]<font></font></font></a></div></div>


<!-- Floating Share Buttons Code End-->


5. Save the widget and preview your blog.

If you want to add it to Right Side then change this float:left; to float:right;

If you already have a Google plus button above or below your posts, the one in the widget might not appear. It seems you can't have two +1 buttons on a page.

That's it now you have a floating share widget in your Website's Sidebar. 
Wants to get further blogging help?

3 comments :

Anonymous said...

Hi there mates, nice post and pleasant arguments commented here, I am in
fact enjoying by these.

My site; Eating For Energy ()

Anonymous said...

Excellent web site. Plenty of useful info here.
I am sending it to several friends ans additionally sharing in delicious.
And obviously, thanks to your effort!

My web page - Penis Enlargement Bible Scam

Rick Campbell said...

Can you make a review of virtual data room pricing ? is it possible? thanks

 
TOP