BLOG DE PRUEBAS DE LA TRUCOTECA DE BLOGS

Lista de banners o imágenes en movimiento

martes, 11 de agosto de 2009
Hoy me ha preguntado Edu en el chat como podía hacer una caja como la que tengo en la columna izquierda del blog, en la que van pasando diferentes imagenes con enlaces a otros blogs, casi como si fuera una presentación o Slide.

Pues bien, aquí va la explicación:

1. Vamos a Diseño > Elementos de la página y allí Añadir un gadget > Nuevo HTML / Javascript

2. Copiamos y pegamos el siguiente código:

<marquee direction="up" scrollAmount="1" style="background- text-align: center; width:150px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">

<a href="URL DEL 1er ENLACE" title="TÍTULO1"><img src="URL DE LA 1ª IMAGEN"</a> <br>

<a href="URL DEL 2º ENLACE" title="TÍTULO2"><img src="URL DE LA 2ª IMAGEN"</a> </marquee>


3. Personalizamos el código

Cambiamos URL del 1er y del 2º Enlace por la dirección a la que llevará cada imagen al pinchar sobre ella, y URL de la 1ª y 2ª imagen por los banners o logotipos correspondientes que hayamos alojado en Picasa, PicCoodle, Imageshack, Photobucket... y que dirigiran al enlace que hayas puesto.

También podemos cambiar TITULO 1 por el título que queramos, por ejemplo el del blog al que se enlace.

Y otra cosa, con el código que tenéis, podéis añadir tan solo 2 imágenes con enlaces, asi que si quieres poner muchos más banners (logotipos), tan solo tienes que pegar de nuevo la línea:



<a href="URL DEL ENLACE 3, 4, 5, etc." title="TÍTULO 3, 4, 5, etc."><img src="URL DE LA IMÁGEN 3, 4, 5, etc."</a>



Y repetirla tantas veces como hagan falta (y cambiando la URL del enlace y la imagen, y el TÍTULO)

También podemos personalizar otras propiedades:

- marquee direction: Hacia donde se moverán las imágenes; up (arriba), down (abajo), right (a la derecha) y left (al a izquierda)

- scrollAmount: Velocidad a la que se moverán las imágenes. Cuanto mayor sea el número, mayor será la velocidad, aunque el 1 está bien.

- text-align: Posición de las imágenes, centrados (center), a la derecha (right), a la izquierda (left).
- width: Ancho de la caja o tabla.
- height: Alto de la caja o tabla.

- border: Grosor del borde de la tabla.

- #000000: Color del borde en códigos hexadecimales, en este caso, blanco. Puedes ver el código del color que quieras en el widget que tengo al final de la columna derecha.


Espero que os haya servido!!! Cualquier duda, problema, etc. me lo podéis dejar en los comentarios. Un saludo!!!

0 comentarios:

Publicar un comentario

Aquí puedes dejar tus dudas, preguntas, sugerencias y comentarios.
Para enlazar a una web
<a href="url-de-la-página">Texto enlace</a>
Y por favor:
-Intenta no escribir en mayúsculas (significa gritar)
-Intenta tener tu perfil habilitado o comentar como -Nombre/URL para poder ver tu blog
-Escribe sin faltas y evitando el lenguaje SMS.
-No hagas comentarios solo con enlaces (excepto si es necesario); intenta opinar sobre la entrada, dudas...
-Asegurate de que tu duda no está explicada en el blog antes de preguntarla (utiliza el buscador), puede que te ahorres tiempo de espera hasta que te conteste.

Muchas gracias!!!