How To Add Floating Social Sharing Button On Blogger

Posted By B | Post a Comment

Pin It Now!

Done, at least we get a latest way to increase blogger traffic. Add floating social sharing buttons on your blog & get profit. User can share your post by a single click. Let's enjoy blogging. There is 3 social sharing plug in available, facebook, google+ and twitter. After adding this, your blog will look like great to watch. Hope all of you guys like this.

Add Floating Social Sharing Buttons

1. Go To Blogger Layout > Add a Gadget > HTML/JavaScript.
2. Then copy the code bellow & paste it on HTML/JavaScript

<!-- floating MHT share bar Start www.myhowtricks.com -->
<style type="text/css">
#mhtcredit {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#mhtcredit .mhtsharebutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:55px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:55px !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='mhtcredit' title="Get this via myhowtricks.com">
<div class='mhtsharebutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='mhtsharebutton' 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>
<div class='mhtsharebutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="myhowtricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.myhowtricks.com/2012/04/how-to-add-floating-social-sharing.html">Get This</a></div><!-- Do not remove credit, View license http://www.myhowtricks.com/p/terms-conditions.html -->
</div>
<!-- floating MHT share bar End www.myhowtricks.com -->

3. Now save the HTML/JavaScript widget.

4. At last drag it just below the post body as shown below,

View your blog to see it hanging just to the left of your blog post body. You must shown the widget.

Customize this widget:

To align the widget more towards the left or right then edit this value: margin-left:-71px;  Decreasing this numeric value will shift the widget to the right and increasing the value will shift it to left.

To Change the color of the floating widget background then change this: background-color:#fff;
You can use html color code generator to select a color.

You are all done.