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> - See more at: http://templateseacessorios.blogspot.com.br/2013/08/menu-social-com-efeito-tooltip.html#sthash.Vij9mQiM.dpuf

Veja uma demostração!

Gostou do tutorial? Alguma duvida deixe o seu comentário!