Floating Social Share Gadget For Blog

The following script is shared from Techzain Website .

In My Previous Post , i explained about the social sharing gadget below every post with effects . Today will be giving you the steps to install floating social share gadget for your blog.

What's Special :

• Facebook Like count
• Tweet count
• Google + count and more over this plugin is lazy load social plugin bulited

Steps To Add Floating Share Buttons On The Sidebar :

• Login into your Blogger Dashboard --> Navigate to Design Tab –> Then Click On Page Elements tab.
• Then Click on --> Add a Gadget then Select --> HTML/JavaScript Widget.
• Just Copy below code and Paste inside the widget.There’s no need for a title.

<!-- Floating Share Buttons Code Start-->
<style>
#floatsocail {position:fixed;bottom:15%;margin-left:-71px;z-index:10;float:left;padding-bottom:2px;}
#floatsidebar {background:#fff;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding-left:5px;width:60px;margin:0 0 0 5px;}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatsocail">
<div id="floatsidebar">
<table cellpadding="1px" cellspacing="0">
<tr><td style="padding:5px 0 0px 0;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></td></tr>
<tr><td style="padding:5px 0px 0px 0;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="vndkmr97">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td></tr>
<tr><td style=" padding:5px 0px 0px 0px;"><g:plusone size="Tall" expr:href="data:post.url"></g:plusone></td></tr>
<tr><td><p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://techclient.blogspot.com/2012/01/add-floating-share-buttons-to-your-blog.html">Get this</a></p></td></tr>
</table>
</div>
</div>
<!-- Floating Share Buttons Code End-->

• Replace vndkmr97 with your twitter username.
• Save the widget and drag widget into the blog posts widget section.

NOTE :

If you have previously added the +1 button then you may skip this step.

•  Now search for </head> and just above it paste the following code.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

• That's it now you have a floating share widget in your blog.
• Preview and save the Layout.

Floating widget Customization

To Change the background colour : Change the value of background: #fff;  in above css

To change widget alignment ; Change the value of margin-left:-71px; in above css. Decreasing this value pushes the widget to the right , increasing this value pushes it to the left.

Trouble? Wanna Say thanks Comment Below .