Con un simple código HTML podemos lograr el poder varios enlaces o banner en movimiento de arriba hacia abajo y así lograr que de un efecto de movimiento muy eficaz y liberar mucho espacio en nuestra sidebar.
Para hacerlo debemos ingresar en nuestro Panel de Blogger --- Elementos de Pagina y creamos un nuevo widget (HTML/Javascript) y pegamos lo siguiente:
<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'">
<a href="URL del enlace 1">Nombre del enlace 1</a><br/>
<a href="URL del enlace 2">Nombre del enlace 2</a><br/>
<a href="URL del enlace 3">Nombre del enlace 3</a>
</marquee>
Para poder modificar el link y el nombre del link que queremos mostrar en lugar del banner tenemos que cambiar lo que marque en color 'Azul' por el link de la pagina a la cual va direccionado el enlace y lo que marque en color 'Rojo' el nombre del enlace que deseamos mostrar.
Sin embargo, si quieren hacer estos enlaces con sus banners deberían pegar este código en lugar del anterior:
<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'">
<a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
<a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
<a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
</marquee>
También podemos cambiar y personalizar nuestro código:
<marquee direction="up"> - Cambiando el codigo que marque en color podemos modificar para que direccion se movera, podemos escoger entre 'up', 'down', 'left' y 'right'.
width:200px;height:150px; - Cambiamos el tamaño del cuadro donde apareceran los banners o enlaces.
border:1px solid #ccc; - cambiamos, eliminamos o agregamos color al borde que se mostrara en el cuadro de los enlaces o banners.
- scrollamount="1" - la velocidad en la cual se pasaran los enlaces o links en nuestra ventana, cuanto mas alto el valor en numero mas velocidad obtendrá.
Quedarían así:
Tags:
Ejemplo del codigo 1
Tags:
7 comentarios:
Muchas gracias me va a sevir de mucho :D
Me gusto me llevo el codigo
muy buen post!!! esta buscando algo asi, aunque lo intente y no me funciono... no se movia... pero bue gracias =)
Muchas gracias!, era justo lo que estaba buscando ^^
por que no me funciono en mozilla pero si en ie8?????
bueno muy bueno quisiera saber como hago pa q el ciclo empieze d nuevo sin nesecidad q la ultima imagen llegue al final osea q la 1ra imagen vuelva a salir detras d la ultima ..espero me entiendan y tmbn spero respuestas gracias :)
Gracias amigo primer vez que me queda tan claro una explicación de código HTML... Muchas gracias.
Publicar un comentario en la entrada