WIDGET:Working floating sharing widget for blogger

To take advantage of biggest social media networks like facebook, twitter and google+ you need to add sharing buttons on your blog. These sharing buttons help your readers to share interesting posts with friends on social media websites. 

It become viral and you will get tons of social media traffic to your blog if your post is really interested and people like it. In this article I am writing about 100% working floating sharing widget at right side of blog. Let start creating awesome floating sharing button widget for blogger.

How to create awesome working floating sharing widget for blogger

Step 1. Go to blogger layout section.

 

Step 2. Click on Add a Gadget.

Step 3. Click HTML/JavaScript widget

Step 4. Paste following codes into the box and save the widget.

<style>
#bw4awidget {
   height: 20px;
   width: 56px;
   border-radius: 0 0 5px 5px;
   float: left;
   padding: 0 0 0 12px;
   background-color: #D0D0D0;
}
#bw4ashare {
   display: scroll;
   position:fixed;
   bottom:3.5%;
   left:8.7%;    width: 68px;
   background-color:#FFFFFF;
   border: 0px solid #A3A3A3;
   border-radius:5px;
   padding:0 0 2px 0;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   z-index:30;
}
#bw4ashare .bw4abutton {
   float:left;
   clear:both;
   margin:5px;
}
.fb_share_count_top {
   width:68px !important;
}
.fb_share_count_top, .fb_share_count_inner {
   -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;
}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {
   width:68px !important;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}
</style>
<div id='bw4ashare' title="Share This">
<div class='bw4abutton' 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='bw4abutton' id="fb-root"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send layout="box_count" show_faces="false" font=""></fb:send></div>
<div class='bw4abutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="btemplates4all">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class='bw4abutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='bw4abutton' 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: 12px;text-align: center;">
</div>
<a href='http://www.bwidgets4all.com/' id='bw4awidget'>widget</a>
</div> 

Step 5. Change btemplates4all with your twitter profile name. To make adjustment according to your theme just make changes bottom and left highlighted at top of the code.

I hope this will work for you. Pl drop your comments below if you face any problem. 

Kindly Bookmark this Post using your favorite Bookmarking service: