CÓMO AÑADIR ICONOS SOCIALES CON EFECTO HOVER

El efecto hover es aquel que produce cambios en el aspecto de un elemento, cuando se le pasa el cursor por encima.

Estos cambios son comúnmente referentes a color, tamaño, y desplazamiento

Hoy aplicaremos este efecto a los iconos de redes sociales utilizando sprites, es decir, creando una sola imagen compuesta de todos los iconos que necesitamos, tanto en estado normal como con el efecto hover, para luego mostrarlos individualmente con CSS. 

Con el mismo procedimiento, y una pequeña variación, veremos cómo lograr dos efectos diferentes.

Cómo añadir iconos sociales con efecto hover

Este procedimiento es para usuarios de blogger. También funciona para wordpress.org,  wordpress.com con “Custom Design upgrade“, que incluye un editor de CSS.

PROCEDIMIENTO:

1. Construye tu sprite

Crea una imagen que contenga todos los iconos, con y sin efecto:

sprite iconos sociales

Puedes diseñar tus iconos, o buscarlos en la web. Yo, por ejemplo, tomé los míos de esta página; elegí los negros de 48×48 y los confetti de 72×72. Vienen en 3 tamaños y ¡34 colores diferentes!  Muy recomendables para este propósito.

Ten en cuenta que:

El tamaño de los iconos más grandes será la referencia para crear el sprite.

En mi caso, los iconos más grandes miden 72×72 pixeles, entonces, el tamaño completo del sprite sería:  216px de ancho (72×3) X 144px de alto (72×2).

En ese espacio (216 x 144) ubiqué todos los iconos, como muestra la imagen arriba, cuidando que estuvieran bien alineados, los unos con otros.

2. Obtén la URL de tu sprite

Para ello, cárgalo a algún sitio de alojamiento como photobucket.

3. Agrega el código CSS al blog

Dirígete a: Plantilla>Personalizar>Avanzado>Añadir CSS, y pega el siguiente código CSS:

/* CSS ICONOS SOCIALES EFECTO HOVER */
ul#iconos {
width: 216px;
height: 144px;
margin: 10px 0 0 0;
padding: 5px 0 0 0;
}
ul#iconos li {
list-style: none;
float: left;
}
#iconos li a{
width: 72px;
height: 72px;
background: url(https://apuntesmultimedia.files.wordpress.com/2013/10/sin-tc3adtulo-1.png) no-repeat;
display: block;
}
#iconos li#facebook a{
background-position: 0 0;
}
#iconos li#twitter a {
background-position: -72px 0;
}
#iconos li#contacto a {
background-position: -144px 0;
}
#iconos li#facebook a:hover{
background-position: 0 -72px;
}
#iconos li#twitter a:hover {
background-position: -72px -72px;
}
#iconos li#contacto a:hover {
background-position: -144px -72px;
}/* FIN CÓDIGO apuntesmultimedia.wordpress.com */

En la primera parte del código, va el ancho y alto del sprite, en este caso 216 y 144, respectivamente.

La siguiente medida a tener en cuenta, es el ancho y alto de cada icono. Siempre corresponderá a los iconos de mayor tamaño, en este caso: 72 px.

En background: url va la URL del sprite, obtenida en el paso 2

Por último, las posiciones de los iconos se definen partiendo de la referencia: 72px (icono mayor tamaño), y teniendo en cuenta los ejes X y Y: 

  • facebook sin efecto: 0 0
  • twitter sin efecto: -72px 0
  • contacto sin efecto: -144px 0
  • facebook con hover: 0 -72px
  • twitter con hover: -72px -72px
  • contacto con hover: -144px -72px

posiciones iconos sprite

Échales un vistazo en el plano:

posiciones iconos sprite

4. Haz clic en “Aplicar al blog”

5. Agrega el Código HTML

Dirígete a: Diseño>Añadir un gadget. Elige el gadget “HTML/Javascript” y pega el siguiente código HTML:

<!--HTML ICONOS SOCIALES EFECTO HOVER-->
<ul id= "iconos">
<li id="facebook"><a href="AQUÍ TU ENLACE" title="Sígueme en Facebook"></a></li>
<li id="twitter"><a href="AQUÍ TU ENLACE" title="Sígueme en Twitter"></a> </li>
<li id="contacto"><a href="AQUÍ TU ENLACE" title="Escríbeme"></a></li>
</ul> <!--FIN CÓDIGO apuntesmultmedia.wordpress.com-->

Reemplaza cada enlace donde indica “AQUÍ TU ENLACE” con la URL correspondiente a tu facebook, twitter, etc.,y luego en “title” ingresa el texto que quieres que se muestre cuando se pase el cursor por encima de cada icono.

Recuerda que si cambias algún “id” en el código (en este caso: “facebook”, “twitter”, “contacto”), debes hacerlo tanto en el código HTML como en el CSS.

6. Haz clic en “Guardar”

Y ¡listo! Ya tienes unos iconos sociales con efecto hover.

ver demo 1

Para lograr el efecto de la segunda opción, solo tienes que añadir: transition: all 0.5s ease; al código CSS

/* CSS ICONOS SOCIALES EFECTO HOVER */
ul#iconos {
width: 216px;
height: 144px;
margin: 10px 0 0 0;
padding: 5px 0 0 0;
}
ul#iconos li {
list-style: none;
float: left;
}
#iconos li a{
width: 72px;
height: 72px;
background: url(https://apuntesmultimedia.files.wordpress.com/2013/10/sin-tc3adtulo-1.png) no-repeat;
transition: all 0.5s ease;
display: block;
}
#iconos li#facebook a{
background-position: 0 0;
}
#iconos li#twitter a {
background-position: -72px 0;
}
#iconos li#contacto a {
background-position: -144px 0;
}
#iconos li#facebook a:hover{
background-position: 0 -72px;
}
#iconos li#twitter a:hover {
background-position: -72px -72px;
}
#iconos li#contacto a:hover {
background-position: -144px -72px;
}/* FIN CÓDIGO apuntesmultimedia.wordpress.com */

Obtendrás algo así:

ver demo 2

Conoce un poco más sobre los sprites y sus ventajas aquí.

Encuentra más iconos de redes sociales gratis  aquí, aquí y aquí.

 

Anuncios

25 comentarios en “CÓMO AÑADIR ICONOS SOCIALES CON EFECTO HOVER

    • ¡Te han quedado muy bien! Qué bueno que el tutorial te haya sido útil :)
      Para que te quede el otro efecto solo tienes que borrar del CSS la siguiente línea de código: transition: all 0.5s ease;
      ¡Un saludo!

      • Gracias Karen… pero no está en el código esa línea… es lo que me mosquea…. bueno. Tp me parece mal tal y como está. así que guay. Gracias

  1. quede con duda, de partida me encantó el post pero cuando decías que creáramos una imagen con todos los iconos solos y con efectos y después crear un sprite, la verdad es que nisiquiera sé que es un sprite si me pudieras explicar bien ese punto te lo agradecería un montón

    • Hola Fernanda, a lo que me refiero con “todos los iconos”, es que necesitarás incluir tanto los que estarán visibles en el blog (en el ejemplo, los negros), como los que se verán cuando pases el cursor por encima (en el ejemplo, los color confetti). El sprite es esa imagen compuesta por todos los iconos.
      Saludos.

  2. Hola, me encanta este tutorial. Lo estoy haciendo (segunda opción) con dos iconos (linkedin y skype) de 32x32px, los he colocado en un archivo de 64x64px.
    El de skype me funciona perfectamente pero el de linkedin no (aparece el icono pero no hace el efecto)
    Te dejo el código pero yo creo que está bien:
    ——-
    ul#iconos {
    width: 64px;
    height: 64px;
    ..
    #iconos li#linkedin a{
    background-position: 0 0;
    }
    #iconos li#skype a{
    background-position: -32px 0;
    }
    #iconos li#linkedin a:hover{
    background-position: 0 -32px;
    }
    #iconos li#skype a:hover{
    background-position: -32px -32px;
    }
    —-
    Cuál puede ser el problema???
    Muchas gracias

  3. Excelente tutorial gracias, ya te sigo en twitter, de casualidad tienes un tutorial de como crear las imagenes en photoshop para usarlos en sprites css gracias

  4. Hola,
    Gracias por compartir tus conocimientos.
    A mi me pasa que no me aparece la imagen, sí están los links (paso el mouse por donde deberian estar los iconos y salta el link).
    Alguna idea de qué estoy ahciendo mal?
    Gracias por todo!
    María.

  5. hola se que no viene al tema pero me llama la atención porque tengo la fecha parecida a la tuya en mi blog y presento un gran problema y es que cuando la traduzco al ingles traduce la fecha y la desconfigura la saca del circulo sabes como ayudarme?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s