Floating Share Bar for Blogger

Floating Share Widget for Blogger by - eBlogger Tips

This is awesome floating sidebar widget for your blog by eBlogger Tips . This widget is integrated with AddThis and is using jquery which will load fast on your blog. This floating social bar would only display on your posts and wont display on homepage.

Live Demo of Floating Share Bar Widget

Follow these Steps to Add this Widget to your blog:-

First of All take Backup of your template >> Go To Blogger >> Template >> Edit HTML >> Tick the expand widget templates :-

1. Search for :-

2. Just below it paste the following code :-

<!--Floating Sharing Widget by eBlogger Tips-->

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.esg_social_floating{
    position:fixed; bottom:10%; margin-left:-75px; 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;
}
.esg_social_floating .esg_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.esg_social_floating .st_twitter_vcount, .esg_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.esg_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.esg_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.esg_social_floating .chicklets, .esg_social_floating .stMainServices {
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBdyEugZQ4i49eKDY8oOScZ9WBBrTgXC3KStech_aV4jVvTSavJjxG7oSxGq-jLjfVWcKhI6eLa3ntxYxANFT9It3rW0GlZeZ3WurgkyX9cU7esUMHQsmQh8xzXToxciJY885qPo6u44ha/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/AVvXsEjBdyEugZQ4i49eKDY8oOScZ9WBBrTgXC3KStech_aV4jVvTSavJjxG7oSxGq-jLjfVWcKhI6eLa3ntxYxANFT9It3rW0GlZeZ3WurgkyX9cU7esUMHQsmQh8xzXToxciJY885qPo6u44ha/s400/gc_social_sprite.gif') !important;
}
.esg_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.esg_social_floating  .stButton_gradient{
    border:none !important;
}
.esg_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;
}
.esg_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;
}
.esg_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}
</style>

<div class='esg_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='ebloggertipz'/>
<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=" + 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('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + 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: "eBlogger Tips",
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.ebloggertips.com/2012/11/floating-share-bar-for-blogger.html' style='color:#CAC8C8;'>Get This</a></p>
</div>
</b:if></b:if>

<!--Floating Sharing Widget by eBlogger Tips-->

Now Hit Save and You are Done !


Some Tweaks & Instructions:-

-> Replace eBloggerTips with your Twitter Handle

Now Your Done. Still you get in Trouble ! Just comment Below we will fix your problems :)