Galería de imágenes para Blogger

Esta galería de imágenes hecha con CSS3 permite mostrar una cierta cantidad de imágenes y al pasar el cursor sobre alguna, esta aumenta de tamaño o si lo desea, se puede hacer que la imagen gire. Está realizada gracias a transformaciones CSS nivel 3, con ellas podremos dar las animaciones y no será necesario recurrir a scripts.

NOTA: No funciona en Internet Explorer.

Puedes ver los siguientes ejemplos:

Efecto zoom:

Efecto Giratorio:

¿Cómo añadir la galería a Blogger?

Paso 1: Añadiendo los estilos y transformaciones:

En ''Diseño | Edición HTML'', buscaremos la siguiente sección:

]]></b:skin>

Arriba de esta, pegaremos el siguiente código:

#galeria {
padding:10px;
margin:0px auto;
width:500px;
height:auto;
background:#fafafa;
border:1px solid #d2d2d2;
}
#galeria img   {
margin-left:12px;
margin-right:12px;
margin-bottom:10px;
padding:5px;
border:1px solid #d2d2d2;
box-shadow:2px 2px 2px #2d2d2d;
}
.aumentar {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;

}
.aumentar:hover {
-moz-transform: scale(2.0);
-webkit-transform: scale(2.0);
text-decoration: none;
z-index:2;
}

.girar {
-webkit-transition-duration: 1.8s;
-moz-transition-duration: 1.8s;
}
.girar:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
z-index:2; /*Ignorar*/
}

Guarda los cambios y listo.

Paso 2: Usando la galería:

Cada vez que quieras utilizar la galería, deberás ir a ''Edición de HTML'' en la entrada y ahí deberás pegar el siguiente código:

<div id="galeria">
<img class="efecto" height="150" src="IMAGEN1" width="200" /><img class="efecto" height="150" src="IMAGEN2" width="200" /><img class="efecto" height="150" src="IMAGEN3" width="200" /><img class="efecto" height="150" src="IMAGEN4" width="200" /><img class="efecto" height="150" src="IMAGEN5" width="200" /><img class="efecto" height="150" src="IMAGEN6" width="200" />
</div>

Consideraciones:

• Tienes que escoger el efecto que se le aplicará, puedes utilizar ''girar'' o ''aumentar'', de lo contrario no aparecerá ninguno.


• Para añadir otra imagen, basta con pegar el siguiente código después de la última:

<img class="efecto" height="150" src="IMAGENEXTRA" width="200" />

• Recuerda que al añadir otra, no puedes dejar espacios ya que no se cuadrarán, debes pegar el código justo después de la última imagen.


• Las transiciones sólo funcionan en Firefox y los navegadores webkit (Safari, Opera, Chrome, etc). En Internet Explorer no funcionará.