Iconos Sociales CSS3 Con Efecto Tooltip Hover

Las redes sociales desempeñan un papel crucial o vital, en la participación de aumentar o incrementar la masa de lectores en su bitácora, es decir, aumenta indirectamente el tráfico a su sitio web o blog. Existen infinidad de redes sociales, en el cual podemos añadir mediante enlace o botones, para que nos sigan a través de según que red social usemos en nuestro blog. Para mi, las más esenciales e importantes son: Twitter, Google+ y Facebook, y son las que uso yo, así que los botones que verás a continuación o seguidamente, emplearemos dichas redes sociales, junto a un botón RSS. Cuenta con propiedades CSS3, con efecto Tooltip al hacer hover, o al pasar el cursor por encima de la red social que deseamos hacer clic.

Descripción de lo que es un Tooltip según la Wikipedia:
Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.
Ahora mostraremos los botones a añadir en forma de imagen, para que vean!

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

1. Entra en Blogger.
2. Y ves a Diseño, luego a Añadir un Gadget.
3. Copia y pega el siguiente código.
4. En añadir un gadget, añades el siguiente código en la opción HTML & Javascript:
5. Luego haz los cambios pertinentes, cambia las URL de tu redes sociales.

<div  class = "contenedor" > 
<ul  class = "acción-bar clearfix" > 
<li> 
<a href= "URL_DE_TWITTER"  class= "like" > 
<span  class= "zocial-twitter" ></span> 
<span  class= "tooltip" > Follow </span> 
</a> 
</li> 
<li> 
<a href= "URL-DE-GOOGLE+"  class= "favourite" > 
<span  class= "zocial-googleplus" ></span> 
<span  class= "tooltip" > Google+ </span> 
</a> 
</li> 
<li> 
<a href= "URL-DE-FACEBOOK"  class= "comment" > 
<span  class= "zocial-facebook" ></span> 
<span  class= "tooltip" > Me Gusta </span> 
</a> 
</li> 
<li> 
<a href= "URL-DEL-RSS-DE-TU-BLOG"  class= "share" > 
<span  class= "zocial-rss" ></span> 
<span  class= "tooltip" > Subscribir </span> 
</a> 
</li> 
</ul> 
</div>
< estilo > 
@ charset  "utf-8" ; 
@ import  url ( http :/ / weloveiconfonts . com / api ? / familia = Zocial ); 
/ * Zocial * / 
[ clase * = "Zocial" ] : antes  { 
  font- familia :  '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 :  300px ; 
} 
/* ---------- ---------- Barra de acción */ 
.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( 45 deg); 
-moz-transform:  rotate( 45 deg); 
-ms-transform:  rotate( 45 deg); 
-o-transform:  rotate( 45 deg); 
transform:  rotate( 45 deg); 
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 >    

Get free premium widgets for your blog and website.