UA-41536646-1

Sunday, 23 June 2013

Floating sharing widget for websites

sharing widget

Hi dear friends! How are you? Today I'm going to tell you about a essential widget you should have in your blog or website. This is a special widget that will also carry visitors to your website. After adding this widget any visitor who visits your website can share your posts in social media like Facebook, Twitter, Google+ etc. So other user who use the social networks can see those posts and they will come to your website for reading them. How is that it can carry 500+ visitors to your blog daily if you are sharing these posts daily. But you should have more friends or followers on those social networks.  This is also easy to add and anyone will not get any questions about it. OK Lets get started.


1. Logging to your blogger Dashboard

2. Now go to Layout>>>Add gadget

3. Choose html/javascript on pop up window

4. Now paste the below code in it

<!-- Floating Share Buttons Code Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:right; 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://trawelindia-softwares.blogspot.com/2012/01/add-floating-share-widget-in-blogger.html" ><font color="black">[Get This]<font></font></font></a></div></div>

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

5. Now click save

6. Refresh page. You will see a share box on side bar

That's it. This is not a hard one. You can do it soon and easily. If you have any problems feel free to comment below. Thanks for reading.

Happy blogging!




No comments:

Post a Comment

Share with friends

Related Posts Plugin for WordPress, Blogger...