Efeito Tooltip em Redes Sociais Animado com CSS3

Olá, eu venho aqui para dar um presente ao seu blog ^_^,  trata-se de um efeito para redes sociais que usa a técnica tooltip e será animado com CSS3.

Demonstração

1° Passo - Adicionando ao Blog

Procure por

header-wrapper
e acima do fechamento da div (</div>) cole o código a seguir:

<div id='redessociais'>
<ul class='nav-tt'>
<li><a class='twitter' href='LINK DA REDE AQUI' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='LINK DA REDE AQUI' target='_blank'><span>Google Plus</span></a></li>
<li><a class='facebook' href='LINK DA REDE AQUI' target='_blank'><span>Facebook</span></a></li>
<li><a class='linkedin' href='LINK DA REDE AQUI' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='tumblr' href='LINK DA REDE AQUI' target='_blank'><span>Tumblr</span></a></li>
<li><a class='pinterest' href='LINK DA REDE AQUI' target='_blank'><span>Pinterest</span></a></li>
<li><a class='youtube' href='LINK DA REDE AQUI' target='_blank'><span>Youtube</span></a></li>
<li><a class='mail' href='LINK DA REDE AQUI' target='_blank'><span>Mail</span></a></li>
<li><a class='rss' href='LINK DA REDE AQUI' target='_blank'><span>RSS</span></a></li>
</ul>
</div>

2° Passo - Adicionando o Estilo (CSS3)

Em seguida, procure em seu modelo:

]]></b:skin>

E coloque o código CSS logo acima: /* Redes Sociais
---------------------------------*/
.nav-tt{
padding: 50;
width: 120px;
height: 70px;
margin: -20px 0px 30px 20px;
float:left;
}
.nav-tt li{
float: left;
list-style: none;
}
.nav-tt li a{
display: block;
width: 40px;
height: 40px;
margin: 0 2px;
outline: none;
position: relative;
z-index: 2;
text-indent: -9000px;
text-decoration: none;
}
.nav-tt li .gplus{
background: url(https://lh4.googleusercontent.com/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
background: url(https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
background: url(https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/rss.png) no-repeat;
}
.nav-tt li a span{
width: 80px;
height: 80px;
line-height: 80px;
padding: 10px;
left: 50%;
margin-left: -60px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #f5f5f5;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #ffffff;
background: rgba(255,255,255,0.5);
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 50%;
bottom: -40px;
opacity: 0;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

}
.nav-tt li a span:before,
.nav-tt li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 11px solid rgba(0,0,0,0.1);
}
.nav-tt li a span:after{
bottom: -13px;
margin-left: -10px;
border-top: 10px solid #ffffff;
}
.nav-tt li a:hover span{
opacity: 0.9;
bottom: 50px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}


É isso pessoal espero ter ajudado e até uma próxima