Add Floating Share Widget in Blogger.

Tweet

Apart from working on traffic and search engine optimization (SEO), it is very important to integrate your blog with popular social networking websites. So, in this post I am presenting how to add floating share buttons (social bookmarking) widget by the right or left of every page. It is just one of the gadgets you must have to add to your blog if you intend to get free traffic from facebook, twitter, Stumble upon, Google plus and Digg.


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.learningitech.com/2011/11/add-floating-share-widget-in-blogger.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 gadgets and widgets for blogger?