Stylish Blogspot Floating Social Sharing Widget

Social sharing widget is one of the most important widget which can lead your site traffic from slower to faster. Today we see most of the websites as well as Blogsites use this gadget. It may be placed on the sidebar, below post title, hanging on top or aside of your site or inside your post. Whatever it looks fade on several places of several sites. You might see this widget floating on the left aside of my site and gives off a stunning mood to the readers about sharing my posts on the social media. This widget is completely customizable and widgetized. I extracted this widget from addthis coding as well as from other JavaScript. Just follow the instructions below to install this widget on Blogger Blog.

Install Fascinating Social Media Floating Widget on Blogger

1. First of all go to Blogger and login with your accont

2. Now go to template section, download full template and follow the commands

Edit HTML> Proceed> Expand Widget Template

3. Now search for ]]></b:skin> and paste the following code above this section

/*-----WBT  COOL SOCIAL FLOATING-----*/
.wbt_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;
}
.wbt_floating .wbt_side_social_button{margin-bottom:5px;float:none;height:auto;width:60px;
}
.wbt_floating .st_twitter_vcount, .wbt_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.wbt_floating .st_fblike_vcount{ margin-left:5px;
}
.wbt_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.wbt_floating .chicklets, .wbt_floating .stMainServices {
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWPp0gLqFDyZb5az37Bgfpud56teylbvXnSi9vKvXSOQ5ub2KXXQzpGrj4jtW4xYjDBBvBWPQx80m0vxfzKqmf9lkgTcSYSwfSY0OURXEC8nZJI8sLJklWsBWphqh9_-vTx-9tRXxEvJG/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/AVvXsEjIWPp0gLqFDyZb5az37Bgfpud56teylbvXnSi9vKvXSOQ5ub2KXXQzpGrj4jtW4xYjDBBvBWPQx80m0vxfzKqmf9lkgTcSYSwfSY0OURXEC8nZJI8sLJklWsBWphqh9_-vTx-9tRXxEvJG/s400/gc_social_sprite.gif') !important;
}
.wbt_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important; 
}
.wbt_floating  .stButton_gradient{
    border:none !important;
}
.wbt_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.wbt_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;
}
.wbt_floating .stBubble{background-position: 21px 31px !important; height:35px !important;
}

4. Now save your template and go to layout section

5. And click on Add a Gadget 

6. Tick HTML/JavaScript and add the following code and save it

<div class='wbt_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'></script>
<script type='text/javascript'>stLight.optionsundefined{onhover:false});</script>
<div style='margin:0px 0 0px 10px;'><div id='fb-root'></div><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like font='' href='' layout='box_count' send='false' show_faces='false'></fb:like></div>
<span class='st_twitter_vcount' displaytext='' st_via='Wildbloggertrik'></span>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:voidundefinedrun_pinmarkletundefined))' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'></a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<script type='text/javascript'>
function run_pinmarkletundefined) {
var e=document.createElementundefined'script');
e.setAttributeundefined'type','text/javascript');
e.setAttributeundefined'charset','UTF-8');
e.setAttributeundefined'src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.randomundefined)*99999999);
document.body.appendChildundefinede);
}
</script>
</center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''></span>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fb7d6f86229e7da' type='text/javascript'></script>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand:"Wild Blogger Tricks",
ui_header_color: "#ffffff",
     ui_header_background:"#0080FF"}
</script>
<span class='st_email' displaytext=''></span>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.wildbloggertricks.blogspot.com/' style='color:#CAC8C8;'>Widgets</a></p>
</div>

7. Make sure to place this widget below of your post see below

Customization Guide

1. Change Wildbloggertrik as of your twitter username
2. Change Wild Blogger Tricks as of your sitename