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.

Este procedimiento es para usuarios de blogger. También funciona para wordpress.org, y  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:

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(http://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

Échales un vistazo en el plano:

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.

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(http://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í:

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

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