Wednesday, March 28, 2012

Adding a Floating Sharing Button on Blogger Blog

You've written the articles and also you've shared with your comfort because they're your own creations. Now, won't you wish someone other than you to share your contents to their blog/other social networks. People love to share contents if they find it easier to share. Adding a Floating Sharing Gadget is a great way to help others to share your contents. This gadget floats wherever down or up you go and also readers find it easy to share the contents with this gadget. For adding this Floating Sharing Gadget, follow these simple steps and next minutes, you'll own them in your Blog!


1). Login to your Blogger account and go to a Blog's dashboard


2).Click on design and click add a gadget 


3). Click on HTML/JavaScript and a box will appear


Now copy these codes and paste it in the second box below title




<!--SideBar 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.doncaprio.com/2011/09/sidebar-floting-share-buttons-large.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>
<!--SideBar Floating Share Buttons Code End-->

Now clik save button and preview it!!!
Congratz!! Now you've your own sharing gadget on your blog.
(Do you have any trouble on setting up this widget? If yes then feel free to say or precious words in the comment form below)

No comments:

Post a Comment