Adding smart floating share widget in blogger

We all the value of social networks in blogging. Enough social engagement can make our dream alive. Generally we all use social sharing buttons in our blog from shrethis/addthis/shareaholic. This is good to use the widget from those server, but this could be reduce your blog loading time. I have noticed that sharethis is faster than other platform.

But the problem is sharethis don't simply support a floating widget with counter. They only supports a simple hover sidebar share widget.

About this floating widget:

A normal share widget that putted on a fixed place can be hide with the scroll up-down. When the widget got hide the chance to share is reduce by user. But a floating widget never hide it remain every time in a side of your article. So user don't need to do a search for the share button to share the post. This will really increase your social engage almost 20%. Personally I'm using this widget in this blog.

Feature of floating widget:

This floating share widget has many amazing feature, I've noticed some in below points.

• Always stay remain with user scrolling.
• Have twitter, facebook, google+ options in show ups.
• Fast loading with custom scripts.
• Easy adding option without creating account.

How to add floating widget:

Adding this floating widget is more easy than ever. With simple 1 step you will able to add this widget in your blog without having any code experience.

Step A:

1. Log-in to your blogger account choose Layout from dropdown menu.
2. Now click Add Widget and choose HTML/JavaScript.
3. Now paste the below code in the empty box and click Save button.

<style>
#pageshare {position:fixed; bottom:15%; right:0px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via='gossippme' >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</div>
<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='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='at'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"> <a href="http://www.blogspotyard.com/2014/10/smart-floating-share-widget-for-blogger.html">Get This</a></div></div>

This was the easiest way to adding smart fast loading floating share widget for your blogger blog. I hove you will love this widget.

Look friends, this is my new blog about blogging and SEO. Here I’m sharing blogger tricks, templates, widgets and SEO tricks. In every post of this blog I tried my best to make the post better understanding with maximum screenshot. So I hope that you will find every post of this blog very friendly. So my request is, if this blog really helped you a little please consider 10 seconds to share share this post in your social profile.
Thanks for reading.