How To Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the blogs, and it also increase the number of times your posts get shared on Facebook, Twitter, Google + and other social networks. This widget is created by MBT. This widget includes: Facebook like,Twitter share, Google +, Digg, StumbleUpon and RSS Feed button with a live counter.         

Adding Floating Social Media Sharing Button To Blogger

Step 1: Go to Blogger Dashboard >> Layout >> Add A Gadget >> And select HTML / JavaScript from the list of gadgets

Step 2: Now Copy the Following Code and Paste it the HTML / JavaScript Box

<!-- floating share bar Start --> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; 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;/*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='pageshare' title="Get this from blogolect.blogspot.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='Blogolect' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/blogolect' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='http://2.bp.blogspot.com/-MoGJ9Y3EdzQ/T8f4cj6LHMI/AAAAAAAACP4/VsM0eaG2EM4/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://blogolect.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>

Customization:

• Replace Blogolect With Your Twitter Username.

• Replace http://feeds.feedburner.com/blogolect With Your RSS Feed URL.

Step 3: And Hit The Save Button
And you're done!

From Editors Desk

We hope this article may have helped you in Adding Floating Social Sharing button to your blogger blog. Share this article with your friends and don't forget to subscribe us!

Share This:

Tags:

Widgets

• Prevoius
• Next