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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixInfklUPJDz5UOkkOrSqk8ePHHwbWM7YBF52VVuneAuWrc-bZ1693D6RF_lPPgxW0x_7aRMbqqs413XDmdJEwUXZ-XYhKwjVBEPqdCiMjv4Ev4o2qkf1euD25rURyiKJyawIsWRa3Ur0u/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhZQqoG8ZQfKKjP6TW2F_jyUO_PuIuFNuUfGs4olv2ozMUGoKzDRnrZ2hKTmxNyP5Zt5394wTZlX6cep2kZMu6sCdmhqXkh6A7ynq6J35yW6EDApmXwksNhJFdOeoc1n-JdogW8_hyphenhypheni9E/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUG42e5ec70_PI4p9UXE7r5uGZtLSB8zGppoQhs0EjRY4ABOJ22sgr-MX9z8HawoMLkt9Wvu-oERGbdhKZQmSkkCZUoctFUvtcAEEgjmUq1dL3pauc70wGrkrZOpQBLUe3ITjmm8gjvaX/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikcX12zR1SNfK_ZPShUBdX3SCMGx-67MKVaZiMr1JBSZmVkOdlDii2xUQoI4UQwWkETkSulvcRWM3PlbfJ9YAoKTvvEdjrqAkyjqJ99adI3yenfPJ5GzBfQaUZzHKbGtjkUDBiGismwYbr/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3xe45g-Zta04YBftbRFJ9DaMOKP9PJQpyOR7eJsdoWtgXst_H0HvV4QpH4dHo2zmGRQYTD-i7IWt2PaW3SsnUXyRtv0MTsiG-bB8DiaW2iN0QQYYCfbliJYeNtnwRD0RidkhfFFbiqSS/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKeHV4a5XKy9-zKqz6Gj94Fw6-0XQFaMYqAETCYp6yDBnvP4Rp-ghTWJLcYRPB2Oh9q9De9BSt0r7ebzfvgoVCvN08RGfMly7mJnSUY_WTto3A8DU-ZmhHgP9ANxW6R49GFI-9h5qThZ9A/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTwvGRkZXUuRTnY_3iOSwCbrAo3bHmrmNsNMMhOzCr3lhUFeco0u52u-Sw56IDUauOaWt3GNe2xl4qMsEUvP87fNwGGfrtdOSfScca5lSp_ZjsBapOoWJTlU0jAu8GB4YD6AuGdQoTkHt/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-yllXlXvruxGy7yPi3M6RZz3YRD7eJftoaig_yt8skgoDwjccWxCHij-ltbMDb_ENrpQFEAFlwXYCdZhQsM5b_tpiHbigzgU7xamA3_0TQSyrSrrNTC5DNPWQietnWNnebTOhcTs8o6W/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiAA6YLUk932ADd_B8OVsaUk0ydTHru49-DzPr1qeO69pgxjQ6zVdyMJYh69wriAjZeNn2p5OaTTyeBY8AG93tnkzOAgJ5wbM3OYP_w-dHzCHWl5VHgdIQtHmkRzODT42kjMj748OridJV/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