How to Add Floating Facebook Share,Tweet,+1 Button,and Many more Sharing Tools in your Blog.

floating share bar for bloggerAfter the Mashable Sharing Widgets and Facebook pop up jQuery Like Boxes Now I’ll share the Floating Sharing Button Codes with you.Floating Sharing widgets Appears mostly in Left side of your Blog and Follow the Scroll of the page.It is Always visible at a Fixed position on left side even your Visitors surf the whole page.Its Visibility makes It perfect tool for Sharing your Content by your Audience.As I said in my two previous posts I am a Huge fan of MBT.I am never worried about the Coding part of my Blog as I follow MBT regularly.They have launched 4 version of this Sharing widget but believe me you don’t have to bother about last 3 version as they were no match to the latest one.In recent widgets codes I have shared all the previous versions of widgets because they were good enough to compete with each other.Today I’ll only tell you about the latest version of Floating Sharing widget,Which contains all the social media tools to share your blog’s content with anyone on any social networking site.

So lets Begin

I still feel some of the visitors will b curious to know about last three versions so I’ll not make you more eager.These are the Snapshots of the last 3 version with the links to code.If you like any of them you can simple follow the Link and copy the code and Implement it on your blog.

Floating buttons
floating sharing widget

Now come to the Latest and Best version of all Floating Sharing Widgets.This Widget contains Facebook share,Like,Tweet,Google +1,Pinterest,Stumbleupon,and other more than 300+ sharing Buttons.

floating share bar for blogger
of best

For Adding This to your Blog Follow these Steps :

1.Go to Blogger > Template
2,Backup your template
3.Click Edit HTML
4.Click Proceed
5.Then Click Expand Widget Templates
6.Search for

 7. Just below it paste the following code: 

.mbt_social_floating{ position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px; background-color:#f7f7f7;
padding: 5px 0 0px 0px; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; z-index:9999px !important; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; } .mbt_social_floating .mbt_side_social_button{ margin-bottom:5px; float:none; height:auto; width:60px; } .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ margin-left:5px; } .mbt_social_floating .st_fblike_vcount{ margin-left:5px; } .mbt_social_floating .stButton_gradient{ background:none !important; height:21px !important; padding-left:0 !important; } .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { background:url(‘’) no-repeat !important; height:19px !important; width:45px !important; padding:0 !important; } .st_email .chicklets{ background-position:0 -77px !important; background-image:url(‘’) !important; } .mbt_social_floating .st_twitter_vcount .st-twitter-counter{ background-position:0 -58px !important; } .mbt_social_floating .stButton_gradient{ border:none !important; } .mbt_social_floating .stBubble_count{
width:44px !important; font-size: 15px !important; font-weight: normal !important; padding-top:7px !important; height:23px !important; background:none !important; } .mbt_social_floating .st_twitter_vcount .stBubble_count{ color:#00a6df; background-color:#f8fbfc !important; } .st_fblike_vcount{ margin-bottom: 0px; display: block; } .st_twitter_vcount{ margin-bottom: 3px; display: block; } .st_email{ margin-bottom: 5px; margin-top: 3px; display: block; } .mbt_social_floating .stBubble{ background-position: 21px 31px !important; height:35px !important; }

var switchTo5x=true; stLight.options({onhover:false});
Pin It

function run_pinmarklet() {
var e=document.createElement(‘script’);
e.setAttribute(‘src’,’’ + Math.random()*99999999); document.body.appendChild(e);
var addthis_config = { ui_cobrand: “MY BLOGGER TRICKS”, ui_header_color: “#ffffff”, ui_header_background: “#0080FF” }


Just replace amyrawat with your twitter username. 

8. Save your template and you are all done!
And Follow the Rest of Instruction Given in Above link.And have a optimized Floating Share widget with all sharing Buttons to your Blog.This was my third post in the Widget series in Next post i’ll share my Experience with the Sharing Button just below the Title in your blog.Check out the Snapshot or you can see it Appearing on my blog just below the title of post.
social sharing buttons widget
Till then

2 thoughts on “How to Add Floating Facebook Share,Tweet,+1 Button,and Many more Sharing Tools in your Blog.

  • October 11, 2012 at 9:47 pm

    hi i dont know wether u will reply here or not,but i want to know that if its possible that we use our own page address in this floating widget instead of anything else,like i already have people who like my blogs page on fb,so i just want those to merge in this widget,is it possible ? u can check here as two facebook shairing widgets are here,so i just want one that is floating one


Leave a Suggestion/Query/Precious View

This site uses Akismet to reduce spam. Learn how your comment data is processed.