Add Floating Social Media Sharing Buttons To Blogger

Tweet

Pin It

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box.

<!-- floating share bar Start cybertweaks.com-->
<div class='post-outer'>
<style> 
.mbt_social_floating{ 
    position:fixed; bottom:10%; margin-left:-80px; 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('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; 
} 
.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; 
} 
</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>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''></span>
<span class='st_twitter_vcount' displaytext='' st_via='CyberTweaks'></span>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' href='http://pinterest.com/pin/create/button/?url=http://www.cybertweaks.com/2011/06/add-floating-social-media-sharing.html'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' 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_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=''></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' type='text/javascript'></script>
<script type='text/javascript'> 
var addthis_config = { 
     ui_cobrand: "CyberTweaks", 
ui_header_color: "#ffffff", 
     ui_header_background: "#0080FF" 
} 
</script>
<span class='st_email' displaytext=''></span>

<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.cybertweaks.com/2011/06/add-floating-social-media-sharing.html">widget</a></div>
<!-- Do not remove this link -->

</div>
<!-- floating share bar End -->

1. Save the gadget.
2. Drag the gadget and reposition it under Blog Posts gadget.
3. Click Save button on upper right corner.

Update: we have made little changes in this code. new pinterest button and bookmark and share button have been added.

Y U NO Sharing ?