jueves, 24 de junio de 2010

Como crear un scrooll de banner 125x125 en movimiento.

Este truco blogger es 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.

Pasos a seguir:

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>
</div>

Solo tendrás que cambiar lo que esta en rojo,es decir pon la url del enlace que quieras, el nombre de ese enlace y la url de donde tiene alojada la imagen que quieres poner.

Este código lo puedes repetir todas las veces que quieras introducir un nuevo banner.

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

 Puedes modificar también 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 a ti te guste, puedes cambiar el tamaño de los bordes,los colores.

El ejemplo de este truco lo podéis ver arriba y a la derecha de este blog y si tienes alguna duda,solo tienes que escribir un comentario. 

Trucos,tutoriales y herramientas para mejorar tu blog.

3 comentarios:

  1. Gracias por el truco! Lo probé, incluso modifiqué valores y funciona perfecto.
    Saluditos!!

    ResponderEliminar
  2. Me alegro de que te sirviera.Saludos.

    ResponderEliminar
  3. Tengo un problema hay un espacio muy grande entre fotos que hago

    http://cubacubanoscubania.blogspot.com/

    ResponderEliminar

Quieres Comentar

Todos los comentarios están siendo leídos y moderados.

- Todos los comentarios deben ser relacionados con el artículo.
- Serán borrados aquello comentarios que sean considerado SPAM.
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto.
- Los comentarios serán publicados a la brevedad mínima posible.