Una galería de imágenes que rotan

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Simple galería de imágenes usando la propiedad marquee

Si quieres poner una galería de imágenes en tu blog y quieres hacerlo de forma simple y rápida este es tu truco.

> Ver Ejemplo

Tan solo necesitarás alojar tus imágenes en un espacio tal como Imageshack o Tinypic.

Una vez tengas las imágenes podremos comenzar.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este bloque:

<marquee widht="300" direction="left" style="border: 2px solid #cccccc;" onmouseover="this.scrollAmount=1" scrollamount="1" onmouseout="this.scrollAmount=2">

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

</marquee>

Y sustituye en cada caso, URL DE TU IMAGEN por la dirección de esta última (que previamente alojaste).

Si no sabes como obtener la URL de una imagen, lee esta entrada.

Con este código podrás añadir un total de 4 imágenes. En caso de querer añadir más, inserta esta línea tantas veces como necesites:

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

Recuerda que siempre debes agregarla antes del cierre </marquee>

Ahora vamos a hablar del tamaño. En las líneas del código econtrarás las propiedades heigth="70" y width="70", que representan la altura y anchura de la imagen, respectivamente.

Puedes ajustar el tamaño que tendrá cada imagen incrementando o disminuyendo el valor 70, situado dentro de las comillas.

En todas las líneas deberíamos tener los mismos valores (que en este caso se trata de 70 x 70) para evitar que la galería se "desarme".

La galería está enmarcada con un borde de color gris, con un grosor de 2 píxeles. Puedes editar el color, el estilo y el grosor en esta línea:

border: 2px solid #cccccc;

Para obtener el código de cualquier color utiliza la tabla de colores.

Para cambiar el estilo del borde (que en este caso es solid) mira esta entrada.

Finalmente guarda el gadget.