Create Floating Bar for facebook, twitter and other sharing buttons for bloggers

Today I am going to introduce to you a new and cool widget for blogger designed that really took a lot of my time in designing it. You may have seen the design of floating sharing buttons with count on popular blogs. This widget has been tested by us on major browsers like IE6+, Firefox and Chrome and we found it working just fine with no compatibility issues or design conflicts.  If you copied this post or widget and took all the credits then we will take strict action against the blogger/developer and report to Adsense and GOOGLE DMCA. All of you developers and bloggers are requested to link back to this post if in case they will share this widget with their readers.

Copyright

All the codes below are copyrights of MyBloggerTricks. I have only edited and improved the code structure to make it work better and smoothly. We therefore request both bloggers and developers to kindly attach an attribution link back to this page and MyBloggerTricks if they wish to share this tutorial with their readers. Any copyright infringement shall result in your blog being reported to AdSense, Blogger and DMCA.

Adding Floating Bar To Blogger

We have kept the steps extremely easy to apply. But before applying, you would like to see how it looks like so below is the picture of the widget:

 

All you need is to copy and paste the long code we developed and tested all these days. Just follow these extremely easy 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,

<b:includable id='post' var='post'>

     7. Just below it paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.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 .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIMdzrhml5bl23v6EHrdn55eput31XhkHm7dvHcFVPGw9-Fis7hd6dswOq3rEt-6SD4R1rJ8UK32kyAaoFDjwB3cB2Ik9T7-Wh5_1ukyD3VkdhsETJW8j-UJkp-tYjLXrvPiR_pkhiXTC/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIMdzrhml5bl23v6EHrdn55eput31XhkHm7dvHcFVPGw9-Fis7hd6dswOq3rEt-6SD4R1rJ8UK32kyAaoFDjwB3cB2Ik9T7-Wh5_1ukyD3VkdhsETJW8j-UJkp-tYjLXrvPiR_pkhiXTC/s400/gc_social_sprite.gif&#39;) !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_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;
}.mbt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}

.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW7GU0tFmbLVRImA1bwdLEwdX-ulhC2lZ2vBQ8Wkmw4rM0hGnmXoeQndLei-RV7rcNvSFq-E_LCxmklnENICwUL9ciqla3iXhNvdfgkyA4swQIuQRogrTmIW9_KWwasfH8t-M67kwmpN5Z/s400/bubble_arrow_pinterest.png') !important;
}


.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
        <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='mbloggingtricks'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
 
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;My Blogging Tricks&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggingtricks.com/2012/12/create-floating-bar-for-facebook-other-social-media.html' style='color:#CAC8C8;'>Widgets</a></p>
</div></b:if></b:if>

Just replace mbloggingtricks with your twitter username.

     8.  Save your template and you are all done!

Troubleshooting

If in case the facebook like button isn't working then add the following code right below the <body> tag,

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> 

Note:- This floating bar would display on post pages only and wont display on homepage. The widget has a white background and floats to the left of blog posts. Peace and blessings pals! :)