Menu social com efeito tooltip

Mais um modelo de menu social bem bacana, com efeito tooltip para ajudar seus visitantes a te seguir, te perseguir, te curtir, te pentelhar, etc. Coloque em seu blog este widget importante e com um design bacana e com script enxuto e leve.

Salve. Agora clique em Layout...

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="ENDEREÇO DE SUA PÁGINA NO TWITTER" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Siga-me</span>
</a>
</li>
<li>
<a href="ENDEREÇO DE SUA PÁGINA NO GOOGLE PLUS" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Meu círculo</span>
</a>
</li>
<li>
<a href="ENDEREÇO DE SUA PÁGINA NO FACEBOOK" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Curta-me</span>
</a>
</li>
<li>
<a href="ENDEREÇO DO BLOG/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Inscreva-se</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 296px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>