Iconos de Redes Sociales con Tooltips Circulares

Seguimos con los tooltips de las entradas anteriores, pero ésta vez, veremos el tooltip o la burbuja con la descripción emergente de forma circular, de diferente forma a la vista, a los precedentes visualizados, aludidos anteriormente. Estos ejemplos están basados y re-diseñados con la ayuda de los tutoriales de la web Tympanus o Codrops, asentándose en ellos. A continuación podrás ver la demostración del tooltip circular, pasando el cursor por encima del botón de la red social elegida, espero que os gusten, enjoy this tooltips!

Botones sociales con Tooltip Circular

• Twitter
• Google Plus
• Facebook
• LinkedIn
• Instagram
• Pinterest
• Youtube
• Mail
• RSS

Ahora añadiremos estos fantásticos botones en Blogger!

1. Entra en Blogger.
2. Y ahora ves a Plantilla & Editar HTML.
3. Copia y pega los siguientes CSS.
4. Una vez copiado el CSS, busca con Ctrl+F la etiqueta ]]></b:skin>:
5. Y antes de dicha etiqueta añade los siguientes estilos.

.nav-tt{
 padding: 50;
 width: 450px;
 height: 70px;
 margin: 80px auto 30px auto;

}
.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/-12UK5a2iZ2A/U5Y4ByZSPwI/AAAAAAAAUfE/pNVhor-4Op0/s32/1402371617_google_plus.png) no-repeat;}
.nav-tt li .twitter {
background: url(https://lh5.googleusercontent.com/-cUdQHbpsbkI/U5Y6_oEMYRI/AAAAAAAAUfY/kGfAN7zGXzI/s32/1402371604_bird_twitter.png) no-repeat;}
.nav-tt li .pinterest{
background: url(https://lh4.googleusercontent.com/-MvJph7MhiIE/U5Y7eB-Ry0I/AAAAAAAAUfw/yxZF-xtt1dM/s32/1402372534_pinterest.png) no-repeat;}
.nav-tt li .facebook{
background: url(https://lh6.googleusercontent.com/-vkinJ6khaJo/U5Y7NxAsZ1I/AAAAAAAAUfk/5_2so-NyXwE/s32/1402371594_facebook_fb_social_social_media.png) no-repeat;}
.nav-tt li .linkedin{
background: url(https://lh6.googleusercontent.com/-1-dxGPKNbqU/U5Y9PW_WYqI/AAAAAAAAUgM/62U2K_o7Ubk/s32/1402372984_linkedin.png)no-repeat;}
.nav-tt li .instagram{
background: url(https://lh6.googleusercontent.com/-2InMRg46DCo/U5Y-646oNaI/AAAAAAAAUhA/y3mQ4fIfPmA/s32/1402373375_instagram.png) no-repeat;}
.nav-tt li .youtube{
background: url(https://lh5.googleusercontent.com/-jk3XhEWW1I4/U5Y-TfUJFQI/AAAAAAAAUgw/ysLcGcyAuZA/s32/1402373260_youtube_you_tube_google.png) no-repeat;}
.nav-tt li .mail{
background: url(https://lh5.googleusercontent.com/-wSbxvTQvRwA/U5Y9zLjOWcI/AAAAAAAAUgY/Idgw_JD5yCY/s32/1402373132_gmail_mail.png) no-repeat;}
.nav-tt li .rss{
background: url(https://lh3.googleusercontent.com/-ukYHUISNuZs/U5Y-DvrOy4I/AAAAAAAAUgk/zXi3Yfh7_OE/s32/1402372026_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: Georgia, serif;
 font-weight: 400; 
 font-style: italic;
 font-size: 14px;
 color: #000;
 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);
}

Ahora añadiremos el HTML de los botones con Tooltips!

1. Estando en plantilla; busca con Ctrl+F la etiqueta </body>.
2. Una vez encontrada dicha etiqueta, añades el HTML antes de </body>
3. También el HTML, lo puedes colocar entrando en Diseño and HTML/JAVASCRIPT.
4. Recuerda que debes de remplazar todas la "#" por las URL de tu red social.

<ul class="nav-tt">
<li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
<li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
<li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="instagram" href="#" target="_blank"><span>Instagram</span></a></li>
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
</ul>

Get free premium widgets for your blog and website.