Agregar íconos sociales usando una sola imagen y crear efecto hover

Hola chicos (as), hoy les voy a mostrar la manera de colocar íconos sociales en su columna lateral y esto lo vamos a conseguir usando una sola imagen, además le vamos agregar efecto hover.

Esto lo vamos a lograr usando una técnica llamada sprites, si nunca has escuchado hablar de esta técnica, puedes ver esta entrada de JMiur donde habla sobre ella, de cualquier modo yo trataré de explicarles lo más claramente que me sea posible.

Esta técnica consiste en crear una sola imagen conteniendo todas las imágenes a usar en un elemento, que en este caso serían nuestros iconos sociales, y luego mover o desplazar la imagen o sprite, con el fin de darle la ubicación que necesitemos, tomando en cuenta las dimensiones de los iconos, para que se muestren respectivamente.

VENTAJAS:  Esta técnica es muy conveniente ya que hacemos menos peticiones al servidor de almacenamiento de imágenes que usemos, lo que favorece la carga de nuestro blog, ya que entre menos peticiones de imágenes y script's (enlazados)  tengamos en nuestro blog, este carga más rápido.

Tengo dos opciones que he creado y que les voy a compartir, puedes usarlas en su blog si así lo quieren, aunque hay muchos íconos sociales navegando por ahí que puedes usar para este propósito.

Primero, hacer o crear nuestro sprite...

Lo primero que necesitamos hacer es crear la imagen con nuestros íconos, puedes usar Paint.net, photoshop o Gimp;  y en este ejemplo, los icono pequeños serán visibles, y los más grandes se mostrarán al poner el puntero sobre cada icono respectivamante (efecto hover).

A continuación puedes ver la imagen terminada lista para que la usen, tiene fondo transparente...

(si las vas a usar, la puedes llevar a cualquier editor como Gimp o Paint.Net y ponerle el color de fondo que necesites)

...y mide 240 pixeles de ancho por 120 pixeles de alto, la parte de arriba (con los iconos mas chiquitos) será la parte visible, y la de abajo, con los íconos más grandes será la del efecto hover.

Los íconos visibles miden 40 x 40 pixeles, y los de abajo 60 X 60 pixeles, y para que  estos coincidan deberán estar en un bloque de 60 X 60 pixeles cada uno, (que es la medida de los del icono más grande que son los de abajo) y tienen que estar bien alineados.

Entonces, la medida con la que vamos a trabajar para cada bloque es 60 pixeles de ancho por 60 pixeles de alto...

...y esta es la representación gráfica...

Como puedes ver, nos vamos a ahorrar 7 imágenes ya que usaremos sólo una de las ocho que tendríamos que usar  y sólo para mostrar cuatro iconos, más los del efecto hover.

Agregar nuestro código CSS y HTML para poner a los iconos  en acción...

Paso 1. Vamos a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS y agregamos ahí este código CSS...

/* Marcadores Sociales */
ul#marcadores{
margin: 20px auto 0;
padding: 5px 0 0 0;
width: 240px;
height: 120px;
}
ul#marcadores li {
list-style-type: none;
margin : 0;
padding: 0;
float: left;
}
#marcadores li a{
background: url(http://4.bp.blogspot.com/-063Xsp75qOY/TbeA0johGtI/AAAAAAAAFvY/UYDlwDYKEU4/s1600/marcadores-tuto3.png) no-repeat 0 0;
margin: 0;
padding: 0;
display: block;
width:  60px; /*El ancho del bloque con el icono*/
height:  60px; /*El alto del bloque con el icono*/
}
#marcadores li a.rss{
background-position: 0 0; /*la posición del icono del feed*/
}
#marcadores li a.twitter{
background-position: -60px 0; /*la posición del icono de Twitter*/
}
#marcadores li a.facebook {
background-position: -120px 0; /*la posición del icono de Facebook*/
}
#marcadores li a.youtube {
background-position: -180px 0; /*la posición del icono de Youtube*/
}
#marcadores li a.rss:hover{
background-position: 0 -60px; /*la posición del ícono del Feed del efecto hover*/
}
#marcadores li a.twitter:hover{
background-position: -60px -60px; /*la posición del icono de Twitter del efecto hover*/
}
#marcadores li a.facebook:hover {
background-position: -120px -60px; /*la posición del icono de facebook del efecto hover*/
}
#marcadores li a.youtube:hover {
background-position: -180px -60px; /*la posición del icono de youtube del efecto hover*/
}

Si se fijan en el código anterior, vamos desplazando los iconos tomando en cuenta la medida del bloque contenedor de cada ícono, que es 60 x 60 pixeles y el primer valor es para la coordenada x (horizontal) y el segundo para la y (vertical).

Recuerda ubicarte después de cualquier llave de cierre } (por ejemplo) y dar enter, para que sea leido lo que has agregado. También si lo prefieres puedes agregar el código yendo a la edición de HTML de tu plantilla  y pegarlo antes de ]]></b:skin>  es lo mismo, con la diferencia de algunas vetajas que te dicía anteriormente.

Paso 2. Haz click en APLICAR AL BLOG para  guardar los cambios.

Paso 3. Ahora agregaremos el código HTML, estando en los elementos de página, eligiendo la opción de HTML/JavaScript, en la columna lateral que quieras mostrarlos, pero antes, deberás personalizar los gatitos (#) por los enlaces que corresponde a cada icono, puedes usar una nota de tu computadora para editarlo, luego lo pegas en la columna lateral de tu blog.

<ul id="marcadores">
<li><a class="rss" href="#"  title="Suscribirse"></a></li>
<li><a class="twitter" href="#" title="Seguir en Twitter"></a></li>
<li><a class="facebook" href="#" title="Seguir en Facebook"></a></li>
<li><a class="youtube" href="#" title="Seguir en YouTube"></a></li>
</ul>

Nota: Guíate siguiendo cada linea de código y los colores que puse para que puedas identificarlos facilmente.

Paso 4. Finalmente guardas los cambios.

Y el resultado final, sería este:

Opción 2

Ahora usaremos esta imagen que contiene los iconos del feed, de correo, twitter y facebook , creando un efecto que parece que el  icono sale hacia arriba al poner el puntero encima de este...

                                  *Imagen con fondo blanco

Nota: Utiliza las instrucciones de la primera opción.

El código CSS sería este:

ul#marcadores2{
margin: 10px auto 0;
padding: 5px 0 0 0;
width: 200px;
height: 84px;
}
ul#marcadores2 li {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
#marcadores2 li a {
background: url(http://1.bp.blogspot.com/--DjPR0HsB8c/TbiHJZAWEzI/AAAAAAAAFvw/g0-m4xDQAcU/s1600/marcadores2.png) no-repeat 0 0;
margin: 0;
padding: 0;
display: block;
width:  50px; /*El ancho del bloque con el icono*/
height:  42px; /*El alto del bloque con el icono*/
}
#marcadores2 li a.rss{
background-position: 0 0; /*la posición del icono del feed*/
}
#marcadores2 li a.correo{
background-position: -50px 0; /*la posición del icono de correo*/
}
#marcadores2 li a.twitter {
background-position: -100px 0; /*la posición del icono de Twitter*/
}
#marcadores2 li a.facebook {
background-position: -150px 0; /*la posición del icono de Facebook*/
}
#marcadores2 li a.rss:hover{
background-position: 0 -42px; /*la posición del icono del Feed del efecto hover*/
}
#marcadores2 li a.correo:hover{
background-position: -50px -42px; /*la posición del icono de correo del efecto hover*/
}
#marcadores2 li a.twitter:hover {
background-position: -100px -42px; /*la posición del icono de twitter del efecto hover*/
}
#marcadores2 li a.facebook:hover {
background-position: -150px -42px; /*la posición del icono de facebook del efecto hover*/
}

El código HTML este:

<ul id="marcadores2">
<li><a class="rss" href="#" title="Suscribirse"></a></li>
<li><a class="correo" href="#" title="Seguir por e-mail"></a></li>
<li><a class="twitter" href="#" title="Seguir en Twitter"></a></li>
<li><a class="facebook" href="#" title="Seguir en Facebook"></a></li>
</ul>

Nota: necesitan sustituir los enlaces respectivamente, como les decía en el paso 3 de la primera opción.

 ...y el resultado este:

IMPORTANTE: recuerden guardar la imagen en Blogger para usar su propio enlace y no afectar la carga de la misma en su blog.

Como pueden ver, es posible crear cualquier tipo de efecto que se les ocurra, cambiando las imágenes y usando una sola imagen :).

Probado en: IE6, IE7, IE8, Firefox y Google Chrome.

Si eres el primero en comentar y pedírmelo, yo misma voy a crear tu sprite, y tu eligirás los íconos :)...

...y si te gusto y/o te fue útil, no olvides Suscribirte a mi blog. 

Otras referencias:
css-tricks
Libros Web

Créditos por los íconos sociales...
Set1
Set2