27 abril 2011

Agregar íconos de redes Sociales usando una sola Imagen y crear efecto hover


¡Hola qué tal! Hoy te voy a mostrar la manera de colocar íconos de redes sociales en tu columna lateral o cualquier otra sección que quieras y que soporte gadgets, y  lo vamos a conseguir usando una sola imagen; además vamos agregar un efecto al poner el puntero encima (evento :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 explicarla lo más claramente que me sea posible.

Esta técnica consiste en crear una solo archivo de imagen, conteniendo todas las imágenes que usaremos en un elemento (o varios), y luego mover o desplazar la imagen creada, con el fin de mostrar la parte que nos interesa. Ésto lo hacemos por medio de la propiedad en CSS llamada background-position.

Para lograrlo, hay que tomar en cuenta las dimensiones de la parte de la imagen que queremos mostrar respectivamente, así como la posición del  icono dentro de la imagen .

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 scripts (enlazados) tengamos en nuestro blog, éste carga más rápido.

Con ésto 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.

Tengo dos opciones que he creado y que te voy a compartir, puedes usarlas en tu blog si así lo quieres, aunque hay muchos íconos sociales navegando por ahí que puedes usar para éste propósito.

Primero: crear nuestro sprite

Lo primero que tenemos que hacer, es crear la imagen con nuestros íconos. Para ello, puedes usar Paint.net, Photoshop o Gimp.

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 respectivamente (:hover).


A continuación puedes ver la imagen terminada lista para que la uses. Tiene fondo transparente.


Mide 240 pixeles de ancho por 120 pixeles de alto, la parte de arriba (con los iconos más chiquitos) será la parte visible y la de abajo, con los íconos más grandes, será la que se va a mostrar al poner el puntero del ratón encima de la imagen (evento :hover).

Los iconos visibles miden 40 x 40 pixeles, y los de abajo 60 X 60 pixeles. Para que sea fácil entender el funcionamiento, los iconos 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).

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:


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

Paso 1. Ve a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS y agregamos ahí este código CSS. Si nunca has agregado CSS desde el diseñador de plantillas, te invito a que le eches un vistazo a esta entrada que explica más detalles.

Aquí en es CSS, puedes ver como vamos cambiando la posición de la imagen para que se muestre cada icono respectivamente ;)


/* Marcadores Sociales */
#marcadores{
margin: 20px auto 0;
padding: 5px 0 0 0;
width: 240px;
height: 120px;
}
#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; /*posición del icono del feed o RSS*/
}
#marcadores li a.twitter{
background-position: -60px 0; /*posición del icono de Twitter*/
}
#marcadores li a.facebook {
background-position: -120px 0; /*posición del icono de Facebook*/
}
#marcadores li a.youtube {
background-position: -180px 0; /*posición del icono de Youtube*/
}
#marcadores li a.rss:hover{
background-position: 0 -60px; /*posición del ícono del Feed del efecto hover*/
}
#marcadores li a.twitter:hover{
background-position: -60px -60px; /*posición del icono de Twitter del efecto hover*/
}
#marcadores li a.facebook:hover {
background-position: -120px -60px; /*posición del icono de facebook del efecto hover*/
}
#marcadores li a.youtube:hover {
background-position: -180px -60px; /*posición del icono de youtube del efecto hover*/
}


Si te fijas 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).

Paso 2. Haz click en Aplicar al blog para  guardar los cambios.

Paso 3. Ahora necesitas agregar el código HTML, estando "Diseño", luego hace click en agregar gadget en la sección que quieres que aparezcan, y eliges el gadget: HTML/JavaScript, pero antes, deberás cambiar las almohadillas: "#",  por las direcciones web de cada página de red social respectivamente. Puedes usar el bloc de notas de tu computadora para editarlo y luego lo pones en el gadget. Este es el código HTML:


<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>


Para editar el código HTML, guíate siguiendo cada linea de código y los colores que puse para que puedas identificarlos fácilmente. el valor del atributo "class" indica a qué red social corresponde cada icono.

Si quisieras cambiar el orden en que los iconos son mostrados (de izquierda a derecha), pon primero la linea del código HTML que corresponde al icono que te interesa. Por ejemplo, si quisieras mostrar primero el icono de Twitter usarías:


<ul id="marcadores">
<li><a class="twitter" href="#" title="Seguir en Twitter"></a></li>
<li><a class="rss" href="#" title="Suscribirse"></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>


Paso 4.Finalmente guarda los cambios.

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 éste.


Nota: Lee las instrucciones de la primera opción. La imagen anterior tiene fondo blanco.

El CSS sería este:


#marcadores2{
margin: 10px auto 0;
padding: 5px 0 0 0;
width: 200px;
height: 84px;
}
#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 es 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: necesitas poner las URLs de las páginas de cada resd social respectivamente, en sustitución a la almohadilla "#", como te decía en el paso 3 de la primera opción.

El resultado este:

Nota: No agregué el botón de Facebook (no lo uso), para que puedas probar los enlaces.

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

Como puedes 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

Otras referencias:
css-tricks
Libros Web

Crédito por los iconos de redes sociales
Set1
Set2