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/AVvXsEi1LiWtnZr-qJo7sLi9s0K_oU_9bsSbKoDwMvVzeGNtvUcI3x7ReBajaTZc_Fl0SDQRu3SqpWt8_vF31NGEbRVl-cWu-5FxaTJrEErA0erICgim0JpdDpDZsXUXqsYc_SuaZ56Xy2H7GOg/s50/facebook.png);
}
ul. BTbiz -social li.TBI-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRPJcJKZxLnw35par2buOEvyYiLfWTvtBcbmxF7whktOnhbmaxPqCL3WPL-F2PHzYyQuJo7KEAruL3Ra69RagMqRU5Z9-P0-9cr8OV9DmsGe3q60-3HV1rrdTQyOl5NZmUtOfelB_Gt_M/s50/twitter.png);
}
ul. BTbiz -social li.TBI-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWyF3HPU4Z9enojfSdJqvDBVS5f5tRjSlBnIqaB79-Pjk_SBsh0gFcZ56hOEcqiQZHdpgDpHfoBEipdXTQsMBJFi6QQ_MLyaMJX3vXmITX6imzqBRgvIXHmUxmYHB1PxDkuNGXMOX1S4s/s50/google%252B.png);
}
ul li. BTbiz -pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYzs4sbZrBIoYhHVVorInmlxCKFBZukEHJBocAYjvj2Kvrl65MIWxqpAV_IqupYXYb37mV3FxzRvJKYS1QVEpVluDRd5XrVW4l8W0VvGJug7NV8Q6RKKeM9xHwghX1U-_uqHSin-HVEuE/s50/pinterest.png);
}
ul. BTbiz -social li.TBI-stumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cmOXZjiikkwxFeC0jBhhatCrFKOwoR2gYRoyJRHqGs9JnvRE9sNVC1gFQf_jl3iE70x4zNgAUZ41ni8zr0gbvGS2lRlz8d6AROixU0nsmViHc3aW6jeCvwYAgxpZAWSHqTNijMTdcOI/s50/stumbleupon.png);
}
ul. BTbiz -social li.TBI-delicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOdh8C9ykHc9U69hyphenhyphendcykGs9HgSPmTuCN-MH_XNaHtkCVz-GSDbMNg6m50vcRpms-PYmE7_D3k3C-_X8RmXSQpMW0vtp9YoZMW7MrEWFjbIN5-m1qxmN3hXRfDkQD9OWEsFR5pS7hrkZw/s50/delicious.png);
}
ul. BTbiz -social li.TBI-linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugUJKCQUQIrmKuG1mU0uHrzUlgNGd0TLgvGpxL-DH9KQJd24ccLCT6CGJ-bszlvBh6UflfQDNaXfMJ2pejpd8_jE4gNSG5dCmJ6OtrvOgo0LWmqIRBtuQeJXKZ-KxlscifjQZgxatOHE/s50/linkedin.png);
}
ul. BTbiz -social li.TBI-reddit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-dHXkyxq_kmSD3BX4IGzpGTmY0TveGZoPFmLn5esPCKgQ_6jAFMbn670018exje2h6LvPlXj1kYrcDL04PVgSmXt_XRl3oACh-bBBtSqbgRAngCel_iLbHPhtLDzoM_2T-Rd7Y4t4ko/s50/reddit.png);
}
ul. BTbiz -social li.TBI-technorati {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-7qOihvm-QRCYPjLqoxSdcP0Jsr_da9HP_9pQTuBnf8ZWyL2uzxfKM2qbWHLcYvZOm1325W4GHWd65bf6DmlX_jH_iHloAmr6A_61FfShW1ovo2FKedtdUrRAMuGO05UNXGEiS522wmc/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 == "item"'>
<div style='font-size: 22px;'>You Like It!? Then kindly share with your Friends.</div>
 <ul class='BTBIZ-social' id='BTBIZ-cssanimation'>
 <li class='BTBIZ-facebook'>
 <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'>Facebook</a>
 </li>
 <li class='BTBIZ-twitter'>
 <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
 </li>
 <li class='BTBIZ-googleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'>Google+</a>
 </li>
 <li class='BTBIZ-pinterest'>
<a href='javascript:void((function()%7Bvar%20e=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)%7D)());' rel='nofollow' target='_blank'>Pinterest</a>
 </li>
 <li class='BTBIZ-stumbleupon'>
 <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>StumbleUpon</a>
 </li>
 <li class='BTBIZ-delicious'>
 <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>Delicious</a>
 </li>
 <li class='BTBIZ-linkedin'>
 <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'>LinkedIn</a>
 </li>
<li class='BTBIZ-reddit'>
 <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'>Reddit</a>
 </li>
 <li class='BTBIZ-technorati'>
 <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'>Technorati</a>
 </li>
 </ul>
 </b:if>