27 abril 2011

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

Hola chic@s! Hoy les voy a mostrar la manera de colocar íconos sociales en su columna lateral o culaquier otra sección que quieras, y  lo vamos a conseguir usando una sola imagen; además le vamos agregar efecto al poner el puntero encima (: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. Esto lo hacemos por medio de la propiedad en CSS llamada background-position.

Para lograrlo, hay que tomar en cuenta las dimenciones de la parte de la imagen que queremos mostrar 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 scripts (enlazados) tengamos en nuestro blog, éste 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. 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 usen, 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, 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).

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 */
#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; /*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).

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 "Diseño", luego agregamos un gadget con la opcion HTML/JavaScript, en la columna lateral que quieras mostrarlos, pero antes, deberás personalizar las almohadillas "#" por los enlaces que corresponden a cada icono.

Puedes usar el bloc de notas 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 fácilmente.

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

                                  

Nota: Utiliza 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 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: recuerda 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

Otras referencias:
css-tricks
Libros Web

Crédito por los iconos de redes sociales
Set1
Set2