Today we will see how to add fantastic floating share bar for facebook and other sharing sites. Yes these days the sharing trend is very popular. If someone see your blog post and it looks good to them. Then may they want to share that on facebook, twitter, and other popular sharing sites. So we should have some good widget for our blog. It will help us to improve our blog popularity. It is not having any java script and j-query. Below we can see why we should not add the JQuery on our blog and how to add this to blog in simple steps.

Why to not use JQuery and java script?

Yes we should not use the java script and jquery because some of the old browsers do not support this. It also increases the speed of our blog or website. So we should keep away our blog or website with this. It will help us to make our blog/website fast.

How to Add this to our blog:

Step 1: Go to blogger dashboard>>template.

Step 2: Backup your template.

Step 3: Click to edit html in template.

Step 4: Now click on expand widget template.

Step 5: look for below line.

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

Step 6: Now add the below line add the following script.

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<style>

.cat_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;
}
.cat_social_floating .cat_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.cat_social_floating .st_twitter_vcount, .cat_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.cat_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.cat_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.cat_social_floating .chicklets, .cat_social_floating .stMainServices {
    background:url('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/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('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif') !important;
}
.cat_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.cat_social_floating .stButton_gradient{
    border:none !important;
}
.cat_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;
}
.cat_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;
}
.cat_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.cat_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.cat_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.cat_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}
.cat_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270/s400/bubble_arrow_pinterest.png') !important;
}

.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}
</style>

<div class='cat_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='careerandtricks'/>
<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: "CAREERANDTRICKS",
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.careerandtricks.com/2012/12/add-floating-share-bar-for-facebook-and.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>