Sleek Social Media Sharing buttons with Css3 Tool tips

Sleek Social Media sharing widget with Css3 Tool tip effect on hover

1. Go to Blogger dashboard --> Template --> Edit Html (Tick Expand widget template option).

2. Find for ]]></b:skin> tag and place the following peace of code just above it.

/* Social Media Sharer widget by http://Bloggertricks.biz */
ul.BTbiz-social {
list-style:none;
display:inline-block;
margin:10px auto;
padding:2px;
}
ul. BTbiz -social li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul. BTbiz -social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul. BTbiz -social li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul. BTbiz -social li.TBI-facebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzK9_JBrLSUWuCAnzNBni3uMkoLpEedGM4S7ezxXTUvihg_2jaOgMdMWOvqW2GcSdAcoq7C-OO_K-t-PBuKPpYlhWHCO8WN7rSh8jGSfjhdwjrDSdotqk7SkhI1AKBrzcILS9_zpy2uNU/s50/facebook.png);
}
ul. BTbiz -social li.TBI-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cME9tXtUTJDunh5PivClawcRGlN1fQp3YEKOvW6Pm-Xub4AD1_pE_wTe1SsWbqe2P5FXBd7tLWqEOACK3KQBmX1cixdBWHYYToH4oVaWlfBLlmZKXBSUPZV7N1ssfcDcZq5NRNt_lnE/s50/twitter.png);
}
ul. BTbiz -social li.TBI-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRBFxA84Np5WRrfJWywuLb-76yscgfLifcYqMVoMsvIV7IOQ34ObF3X48v8-aO2x2tqblzZj06FeDQWrxSU0YaDxkqekjs-PGkChJmxZsLrF2kDDg2uHwv2xaNcN7vYrYmbpbFrw29Cyk/s50/google%252B.png);
}
ul li. BTbiz -pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx4TeijtqS3nPpCeGGLomZBUojBZddcbX54NPBYEsaHt9GwBcZjH90b31petKmGb1e-3XaVLgmUAJDQke40QgajF8btFHBzm94HK3JDZhRBjkGHrTUBf4p_LMZ70lnA62QPM6_6fyUjWM/s50/pinterest.png);
}
ul. BTbiz -social li.TBI-stumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdrt_Vbbv01CpSn0F4K9kEPdtJz_qaUfP9WYmtJVBs3H0xY0UxpVCuK03UPexsBdQ_e3-R_7FF1ExZAH7a6ezCK61W7SAk_Euhj9MN4wItpIPd4kiJBlrz-6yJwJOV53_vldbDxO5tUI/s50/stumbleupon.png);
}
ul. BTbiz -social li.TBI-delicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVKxVEi6gvF-8nk9fVXeM3Fzxgm6aKKrqNxeIry_H9IcLl-bEiGv6nS-fsj3F2o3ta3mcNplYFw062r0vB1dkuBZbV8YTm-mmYap8VC7hR0eouV3CrLQpTBywTQ6_SoKI5_KI_PF_qGE/s50/delicious.png);
}
ul. BTbiz -social li.TBI-linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK06g4PT2dmtpF3GyFgmuqw6plu0qpu9ld18gUSxcv_n4LYmrvNlCEniqeYfoJp5JTwm5MfDe6VO5XZY7N1MqtJae51A27iaN-ldUjPrHVsVrtniHvQzFBUtBKkTZPRmAKEiY1MVpoFkU/s50/linkedin.png);
}
ul. BTbiz -social li.TBI-reddit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2IR9UJe4c6autK7xjVH0fWhOPOYmkG1X3UEuZKbVU9UJTDm73z-kzrWDBmEV2hzI0kpfftDyT8MB-5nK7GuNqLIGCt-aUynCqJyWzWAoCgLS5t_18jRLcbUm8z9Hw-kwf2DlUZyqTR8/s50/reddit.png);
}
ul. BTbiz -social li.TBI-technorati {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkeGovNorwE60qg0USh-3Ewc0FyB1YB-r2pgzp1239cVHUgTb-pif8AH66-fuPJkm2d_89ZyvO2x0ulHpomICe6RzJmQL8VO5cjzVETGhzHvUGm2tPVr6VT8b2k1gue8-bZsqkYndIRqk/s1600/technorati.png);
}
# BTbiz -cssanimation:hover li {
opacity:0.2;
}
# BTbiz -cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
padding:2px;
}
# BTbiz -cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
# BTbiz -cssanimation li:hover {
opacity:1;
}
# BTbiz -cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Media sharer widget by http://Bloggertricks.biz */

Sleek Social media sharer widget code

3. Now find for <data:post.body/> and place the following peace of code just below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>You Like It!? Then kindly share with your Friends.</b></div>
    <ul class='BTBIZ-social' id='BTBIZ-cssanimation'>
    <li class='BTBIZ-facebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='BTBIZ-twitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='BTBIZ-googleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='BTBIZ-pinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute (&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='BTBIZ-stumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='BTBIZ-delicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
    </li>
    <li class='BTBIZ-linkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
<li class='BTBIZ-reddit'>
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
    </li>
    <li class='BTBIZ-technorati'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
    </li>
    </ul>
    </b:if>

Note:-

• If you find more than 1 appearance of <data:post.body/> tag, add the above peace of code just below the first appearance of it.

4. Save the Template.