How To Add Vertical Floating Social Bar In Blogger V 2.0

Vertical social bar will floats vertically along with the blog post and also helps to share articles . This widget will give you awesome interference to the viewer and make them to get socialize with widget .This widget also counts the number how many times article got shared. Have a demo below of the widget .

DEMO :

Tutorial : How To Add Vertical Floating Social Bar In Blogger V 2.0

• Login to blogger dashboard .
• Back up your blogger template .

Note : Always back up your blogger template before and after adding of widgets .

Don't know How to backup here is the tutorial : How To Backup Blogger Template 

• Click on Edit HTML tab .
• Now Search For below code .

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

•  Paste the below code under the above 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 .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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAUlcXpE-x2JLifAscT6Cgn3BpyaM0xTTsot7ykRkLUrKTZKG7AsgFQSHCeKEb1aP8BBfsjP5f-8OrQlSF2A5kAtuOLjVjil7El1-q4J0DkuXOCVWus-4MXUa-WT9kqf4cYed_8MYpFCii/s400/gc_social_sprite.gif') no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAUlcXpE-x2JLifAscT6Cgn3BpyaM0xTTsot7ykRkLUrKTZKG7AsgFQSHCeKEb1aP8BBfsjP5f-8OrQlSF2A5kAtuOLjVjil7El1-q4J0DkuXOCVWus-4MXUa-WT9kqf4cYed_8MYpFCii/s400/gc_social_sprite.gif') !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;
}.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/AVvXsEhJgzFhZgjdmw-5ZZSf47Zk-X9Gn_7svIxK2mC-vYa4A572sXer42NsPaDZG6kvPvf2L1u-4SrvsWqO9440MB_lB531G1WHENppWW1rfPtbASjEW0TOtMR74jfiWFduj_dqDo9BXM2c3aN7/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>
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<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='bloggerslab.in'/>
<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: "TheBlogWidgets.com",
ui_header_color: "#ffffff",
     ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
<a href='http://www.bloggerslab.in/2014/06/how-to-add-vertical-floating-social-bar.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Customization : 

Change the colored Bloggerslab.in to your own twitter username .

Like and share our articles . 

found any errors in implementing the widget feel free to comment below .