Best Floating Sharing Bar/Button for Blogger

This Tutorial will show you how to add Floating sharing Button...in Blogger

To add Floating sharing Button in Blogger Just Follow these simple steps
1:- Login to your blogger dashboard >>Template >>Backup template >>
2:- dashboard >>Template >> Edit Template >> Expand Template
3:- Now find the following below codes

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

4:-And add the below codes Just after/below of Above code

 <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hb_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;
}

.hb_social_floating .hb_side_social_button {
    margin-bottom: 5px;
    float: none;
    height: auto;
    width: 60px;
}

.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}

.hb_social_floating .st_fblike_vcount {
    margin-left: 5px;
}

.hb_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}

.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
    background: url(&#39;
    http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJH2OBFJAAsGrDQmpLm2lObX8mCDEHdRMxLi28bfP6ClhSEbrhrGxNvZqFyrtuONIEKdFNzCAVVg_CDsLVo8h4XjsJcCQZb5W9Fh6IDd6Pv9zAHw3uFe1MB3jEm-nWkgdLmDlkMXCZcAXw/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;
    http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJH2OBFJAAsGrDQmpLm2lObX8mCDEHdRMxLi28bfP6ClhSEbrhrGxNvZqFyrtuONIEKdFNzCAVVg_CDsLVo8h4XjsJcCQZb5W9Fh6IDd6Pv9zAHw3uFe1MB3jEm-nWkgdLmDlkMXCZcAXw/s400/gc_social_sprite.gif&#39;
    ) !important;
}

.hb_social_floating .st_twitter_vcount .st-twitter-counter {
    background-position: 0 -58px !important;
}

.hb_social_floating  .stButton_gradient {
    border: none !important;
}

.hb_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;
}

.hb_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;
}

.hb_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>

<div class='hb_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});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='twitter_name'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <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;Helper Blogger&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&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.1vikash.blogspot.com' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>

NOTE:- Now replace twitter_name with your twitter username in line number 107.
If you want to edit the position or background color of the bar then edit the lines from 6 to 10.

NOW SAVE YOUR TEMPLATE YOU ARE ALL DONE 

Like this Post ??? Then Pls Support us LIKE US ON FACEBOOK OR Follow OUR Blog :)

THE END