¿Cómo crear un scroll de banner 125x125 en movimiento?

Para presentar un scroll de banners en movimiento en tu blog y nos puede servir para crear una lista de blog o web que seguimos o anunciamos en nuestro blog y solo nos ocupara el espacio que tu elijas.


Entramos en Diseño, añadir un Gadget y elegimos HTML/Javascript y copias el código que ves aquí abajo.


<div align="center">
<marquee direction="up" scrollamount="3" style="background- text-align: center; width:125px;height:125px;border:1px solid #000000;padding:3px" onmouseover="this.scrollAmount='0'" onmouseout="this.scrollAmount='2'">
<a href='URL DEL ENLACE' target='_blank' title='TITULO'><img border="0" height="125" src="URL DE LA IMAGEN" width="125" /></a>
<a href='URL DEL ENLACE' target='_blank' title='TITULO'><img border="0" height="125" src="URL DE LA IMAGEN" width="125" /></a>
<a href='URL DEL ENLACE' target='_blank' title='TITULO'><img border="0" height="125" src="URL DE LA IMAGEN" width="125" /></a>

</marquee>



Solo tendrás que cambiar lo que esta en rojo,es decir pon la URL DEL ENLACE que quieras, el TITULO de ese enlace y la URL DE LA IMAGEN donde tiene alojada la imagen que quieres poner.

Este código lo puedes repetir todas las veces que quieras introducir un nuevo banner, solo asegurate de ponerlo antes de </marquee>.


<a href='URL DEL ENLACE' target='_blank' title='TITULO'><img border="0" height="125" src="URL DE LA IMAGEN" width="125" /></a>



Este es el resultado







Puedes modificar si quieres:
  • marquee direction: es el que orienta el movimiento de los enlaces [hacia arriba (up),abajo (down),a la derecha (right) o a la izquierda (left)]
  • scrollAmount: es la velocidad de movimiento. A mayor número, mayor será la velocidad.
  • text-align: es la posición de los enlaces [centrados (center),a la derecha (right)o a la izquierda (left)]
  • width: es el ancho de la tabla y height es el alto.
  • border: es el grosor del borde de la tabla.
  • #000000 : puedes reemplazarlo por el color que quieras (en hexadecimales)
Hay muchas formas de personalizarlo y solo dependerá de lo que te guste, puedes cambiar el tamaño de los bordes, los colores ( en el ejemplo solo cambie el color).


No hay comentarios:

Publicar un comentario

✭¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥