Scroll banner en movimiento de 125x125px

Ya muchos de ustedes habrán oído hablar de los famosos banners de 125x125px que se ubican en el sidebar. Unos los usan para publicidad y otros para promocionar sus otros blogs (en caso de que poseas varios blogs).
Hoy les traigo estos banners de 125x125 para su blog ó página web, con la diferencia de que estos banners están en movimiento y con la ventaja de que no ocuparán mucho espacio en comparación con los otros banners que no están en movimiento. Tú mismo puedes asigarle el tamaño, velocidad y color del scroll.

VER DEMO

Si quieres añadir este gadget a tu sitio web, entonces sigue los siguientes pasos:
1) Primero abre un Notepad online y pega el siguiente código en él. Puedes usar este notepad ó este. Ó si cuentas con un notepad de tu preferencia también lo puedes usar.

<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='Título del banner'><img border="0" height="125" src="Url de la imagen" width="125" /></a>
<a href='Url del enlace' target='_blank' title='Título del banner'><img border="0" height="125" src="Url de la imagen" width="125" /></a>
<a href='Url del enlace' target='_blank' title='Título del banner'><img border="0" height="125" src="Url de la imagen" width="125" /></a>
</marquee>
</div>

2) Ahora sólo falta realizar algunos cambios para que lo insertes en tu sitio web:


> direction="up": "up" significa que el scroll se moverá hacia arriba. Puedes cambiarlo por "down" (abajo),"right" (derecha), "left" (izquierda).
> scrollamount="3": "3" es la velocidad del movimiento. Si el número es mayor, este se moverá más rápido, si el número es menor, será lo contrario, se moverá menos.
> width:125px;height:125px: Lo que está en negrita es el tamaño del ancho y alto de la tabla (del scroll), puedes agrandarlo más o bien puedes hacerlo más pequeño, no te ocupará mucho espacio.
> #000000: Esto es el color de la tabla. Por defecto está de color negro, pero puedes reemplazarlo por elcolor hexadecimal que desees. Para escoger el color ideal, puedes usar esta paleta de colores online.


> Lo que está en rojo:


Url del enlace: Aquí lo reemplazas por la URL de la imagen, el enlace del banner.


Título del banner: Aquí lo reemplazas por el título del banner, dependiendo de lo que se trate.


Url de la imagen: Reemplázalo por la URL de la imagen del banner que quieres promocionar.


Hay otros valores que puedes cambiar si así lo deseas, como por ejemplo  border:1px que es el grosor del borde de la tabla, text-align: center que es la alineación del gadget, por defecto este se encuentra centrado, pero puedes cambiar center por right (si lo deseas a la derecha) ó left (si lo deseas a la izquierda).


3) Después de que hayas realizado todos estos cambios en el Notepad Online, copias todo el código y lo insertas en tu página web. Si usas blogger, agrégalo en un elemento HTML/Javascript. Guarda los cambios y eso es todo.


Si deseas agregar una imagen más, entonces antes de los dos últimos códigos que es este:

</marquee>
</div>

Agrega el siguiente código:

<a href=' Url del enlace' target='_blank' title='Título del banner'><img border="0" height="125" src="Url de la imagen" width="125" /></a>

Y así por cada imagen más que quieras agregar, le agregas eso. Imprimir artículo