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 :
If you have previously added the +1 button then you may skip this step.
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 .
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
- 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.
- 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: 'en-US'} </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 .
0 comments:
Post a Comment
1.Your feedback is appreciated .we will try to respond as soon as possible .
2.While commenting make sure you click "subscribe by mail ", so that you will be notified follow up replies
3.Please don't spam ,dont use keyword in the name section, don't drop the links for the sake of backlinks and other purpose ( Comments will not be published and deleted)
4.Make sure you check the previous comments , before asking any any queries . you may get the solition in the comments itself.
5.Comments should be related to the topic .
if above all not followed the user may result in ban :(