Agregar Botones de Redes Sociales con Tooltips

En está ocasión me gustaría compartir otra forma o método de agregar botones de redes sociales, con el efecto denominado tooltip, usando CSS3, cómo hemos visto en las otras entradas anteriores, explicando qué son y para que sirven, pero en está coyuntura, he encontrado otra configuración diferente, a la vista en otras circunstancias, pero tampoco muy diferente. Estos tooltips están desarrollados por Alessio Atzeni. He recreado a mi manera, modificando los iconos y el tooltip, cambiando colores, y los botones de las redes sociales más importantes hoy en día, según mi criterio, para un blog o web. De todos modos podéis modificar los iconos de las redes sociales, por las que más os intersese, a vosotros, veamos, ahora sí, la demostración que verás seguidamente, pasa el cursor por encima del botón.

• Hazte Fan!
• Perfil de stumble!
• Seguir en twitter!
• Canal de youtube!
• Cuenta en Instagram!
• Tablero Pinterest!
• Seguir en Google+!

Ahora añadiremos estos botones de redes sociales, 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.

#masterpanel{margin-left:40px}
#masterpanel ul{padding:0; margin:0; list-style:none}
#masterpanel ul li{padding:0; margin:0; position:relative}
#masterpanel ul li a{background-color:transparent; background-repeat:no-repeat; background-position:50% 0; padding:0 10px; margin:0 5px; float:left; height:64px; width:64px; text-decoration:none; position:relative}
a.tfacebook{background-image:url(https://lh4.googleusercontent.com/jleBWStjR4utzPxIrw987WZt6ygHTGheiZM-skAleXM8=s64-no)}
a.tstumble{background-image:url(https://lh5.googleusercontent.com/XZl4YsnAtfMANehobtC1QM8lFgWDhAzOWEDSooALoqwp=s64-no)}
a.ttwitter{background-image:url(https://lh5.googleusercontent.com/-ygAelYpbxKc/U5dI81gGAaI/AAAAAAAAUis/vGswwURBEQc/s64-no/1402441057_Twitter.png)}
a.tyoutube{background-image:url(https://lh3.googleusercontent.com/-Mas51ujMhdA/U5dJqrGR7xI/AAAAAAAAUjU/owv4mlk2au4/s64-no/1402441143_YouTube.png)}
a.tinstagram{background-image:url(https://lh5.googleusercontent.com/-M6bwv_ZXFk8/U5dK0N6pmeI/AAAAAAAAUko/sBMmeUhVWw8/s64-no/1402441098_Instagram.png)}
a.tpinterest{background-image:url(https://lh6.googleusercontent.com/-h9IBD-G306o/U5dJ6vPcdTI/AAAAAAAAUjo/EeRtSTZ5AU0/s64-no/1402441109_pinterest.png)}

a.tgoogle{background-image:url(https://lh6.googleusercontent.com/--Jlsq6a1BpI/U5dKkTj91lI/AAAAAAAAUkU/PbNrzuRMfgY/s64-no/1402441071_GooglePlus.png)}
#masterpanel a small{background-color:Black; border-radius:10px; color:#FFF; display:none; font-family:Consolas,sans-serif; font-size:11px; font-weight:normal;  -moz-box-shadow:0 5px 10px #666;  -webkit-box-shadow:0 5px 10px #666;  box-shadow:0 5px 20px #666; width:80px; padding:5px; line-height:1; text-align:center}
#masterpanel a:hover small{display:block; position:absolute; top:0px; left:0; margin-top:-35px; z-index:9999; -moz-animation:mymove .25s linear; -webkit-animation:mymove .25s linear}
@-moz-keyframes mymove{0%{-moz-transform:scale(0,0); opacity:0}
50%{-moz-transform:scale(1.2,1.2); opacity:0.3}
75%{-moz-transform:scale(0.9,0.9); opacity:0.7}
100%{-moz-transform:scale(1,1); opacity:1}
}
@-webkit-keyframes mymove{0%{-webkit-transform:scale(0,0); opacity:0}
50%{-webkit-transform:scale(1.2,1.2); opacity:0.3}
75%{-webkit-transform:scale(0.9,0.9); opacity:0.7}
100%{-webkit-transform:scale(1,1); opacity: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.

<div id="masterpanel"><ul id="mainpanel"><li><a href="#" class="tfacebook"><small>Hazte Fan!</small></a></li>
<li><a href="#" class="tstumble"><small>Perfil de stumble!</small></a></li>
<li><a href="#" class="ttwitter"><small>Seguir en twitter!</small></a></li>
<li><a href="#" class="tyoutube"><small>Canal de youtube!</small></a></li>
<li><a href="#" class="tinstagram"><small>Cuenta en Instagram!</small></a></li>
<li><a href="#" class="tpinterest"><small>Tablero Pinterest!</small></a></li>
<li><a href="#" class="tgoogle"><small>Seguir en Google+!</small></a></li>
</ul></div>

En el código HTML, debes de remplazar todas las "#" por la ruta de las distintas redes sociales, puedes modificar, las imágenes de los iconos de la redes sociales, por las que desees tú, puedes quitar o añadir más redes sociales a tu antojo, eliminando o añadiendo, en la lista ordenada por los DIV id="masterpanel" eliminando la línea <li> y </li> que quieres eliminar o añadir. En el código CSS, debes de eliminar, si no quieres una red social, esto, por ejemplo: a.tpinterest{background-image:url(https://lh6.googleusercontent.com/-h9IBD-G306o/U5dJ6vPcdTI/AAAAAAAAUjo/EeRtSTZ5AU0/s64-no/1402441109_pinterest.png)}; eliminando está línea del código CSS, eliminaríamos el botón Pinterest, igualmente deberíamos de hacer lo mismo en el código HTML, es decir, eliminaríamos esto: <li><a href="#" class="tpinterest"><small>Tablero Pinterest!</small></a></li>. Bueno, espero que guste.
Alessio Atzeni
Get free premium widgets for your blog and website.