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/AVvXsEhJOty1ZO5_hpUR5TYr8QvEQyTYyqIqYtnngQQrfbMvS91eAb5Na91_W7LkKTERD8lwwohxoPd8WTCgYeEJva_ug8UHr-1ZWlsvs2mHWSwpCSyDx1BzLyzYErTNyQBe2BoqoC9_eRYmpEg/s50/facebook.png);
}
ul. BTbiz -social li.TBI-twitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPf53xLI2edEe2EL8XvFGHKqHvr03vRMuNLFjxfywob3TaEAiYmqxNfAoiq6EP2bzKsqUsjcyoghWOMl0Mb_DVMRltvIFE0CVlWM9KtWHNPGxGqghUpFb5fEFMy1UiD8alWotg8EpOxek/s50/twitter.png);
}
ul. BTbiz -social li.TBI-googleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFT0zfSJ9Dow5_LkBK5KpOSP2siiXgRmaWLFrIIwC2m5gOOOMsol-VOtMvS6eIWmb7fRBmbWLXA1Iy9tWMdSVu5NPt_FavcXl-XscJvAnmKL_7xcoJimaqF80Xt6sAXsuQ7M9tK2P4Lw/s50/google%252B.png);
}
ul li. BTbiz -pinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6aklTziD1qAX5CZm0R_XOZlt1d2HVhAg9vOkDD8tb7-FgM5A98ATBmIplCDxmQgoNBFB2qZAZtKlcO-e09BulGOOp7Int1LaM_4kxbFFCiFhpY1W8g1pSX4YErMHacxHUUPrjDO6sPA/s50/pinterest.png);
}
ul. BTbiz -social li.TBI-stumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhECbQBfTnYVK1ua5xjCTmx8GPnJRS2oEFTxx8mrrXLwwYn7grZ_s5wjhMS36dC3kVII6wZOWf4ymjnz0_aM9iG5ECTGdCraVKaOoa7GMIJBy-EEySw32G3nRl1fBtZUEdK1kk6g8MlzlI/s50/stumbleupon.png);
}
ul. BTbiz -social li.TBI-delicious {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHSxCXvkwB5luWQqH75jlBvhDI50TLM_pONwi5iBeaQqpSw9Z-VwADfr9F9BKbOgYoJnWuWnf1pf1eMx5TnIB2gIYknuN0DlYBRM-XfKLR2v_kT4s46DV6YvHL-7q_RvcdAKQo7SXDBE/s50/delicious.png);
}
ul. BTbiz -social li.TBI-linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIitsEhvqTqO3D-0Qj7LVkEsRqXUhmV9lwj6rThCHYxGa4-3XLAcyss95v_7Rx7I3F6uohN2LXHXYhGs9Hyj9KcoisdGo5o46vjy_-OW5WirRZdU0SbCiZfu7BsmF4U_EH2hrWPfs_fms/s50/linkedin.png);
}
ul. BTbiz -social li.TBI-reddit {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Zr98zmHS-7jnKWmEg5QZywei1a1fOUeoyk3yY5P6BBE9yI1IqV8j9JQGJ2qe_7dlmfhWDJ6zD0pLhEFbYRg7jljLYy1pGrf0VxAyReVbbh0ZibQbQCZT-GVzTq76qEmFtaRSKP1xgh4/s50/reddit.png);
}
ul. BTbiz -social li.TBI-technorati {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsAAIL08v8Ym5FpqZf9zhg3xNhcpI5hUkKsDLGiwaJK_1FkfTLyrvTg7lAtT8yq4cQuz9_hZp2uE26zgeXl5gGIJGBM_XgXYpUOfCj2-7DRWWBGIbAq03d2PYC9mxiGnOuCX2flOvJVus/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>