LINKS EN MOVIMIENTO PARA EL BLOG, ENLAZA OTROS BLOGS

Bueno, decido volver a escribir una entrada con este tema, viendo que muchos de vosotros me preguntais lo mismo.

Explicaré pasito por pasito cómo se hace:

1º Primero tenemos que tener en cuenta que las imágenes que una vez pinchadas nos llevan a una página web (esto se llama botón) están formadas por dos cosas: un link a la web a la que queremos que nos envíe y un link a la dirección donde se aloja la imagen que nos muestra.

Por ejemplo, el botón de mi blog está formado por lo siguiente:

<a href="http://elblogdenya.blogspot.com" target="_blank"><img src="http://i287.photobucket.com/albums/ll154/nyaraki/blognya.gif"/></a>

El resultado de ésto es mi botón

2º Ahora se trata de hacer una tabla muy básica que consta de una casilla con una columna, es decir, tan sólo hacemos una celda. Pero el añadido que tiene es el movimiento, de ahí que en vez de usar los códigos “table” de una tabla, se use el de “marquee”, es decir, marquesina.

Aquí iré pasito por pasito, piano piano, para que no os perdais.

El código completo que usaremos es el siguiente:

<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 ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> <br> <a href="URL DEL ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> </marquee>

Desde que comienza el código “marquee” hasta que termina nos encontramos por medio mil cosas que os detallo a continuación:

- “marquee direction” es la dirección del movimiento. Puede ser hacia arriba (up) o hacia abajo (behind) o hacia la derecha (right) o hacia la izquierda (left)
- “scrollAmount” nos indica la velocidad de ese movimiento. Podemos variar desde el 1 al dígito que queramos. Cuanto mayor sea el número, más rápido se moverá.
- “text-align” nos indica a qué lado se colocan las imágenes en esa tabla, bien centradas (center) como a la derecha (right) como a la izquierda (left)
- “width” nos indica el ancho de la tabla que se marca en píxeles. Y “height” nos indica el alto de la tabla también marcada en píxeles.
- “border” nos indica el grosor del borde de la tabla. Si ponemos 0 no habrá borde, será transparente , y si ponemos un número….a mayor número, mayor grosor.
- “solid” nos indica el color de ese borde. Teneis que poner el código html del color seleccionado.

Una vez hecha la parte decorativa de esa tabla, debemos introducir todas las imágenes de los links que queremos incluir. Recordad lo que expliqué en el paso uno. Si no está así puesto, es lógico que no se vean las imágenes ( a no ser que falle el servidor donde estén alojadas) o que no funcionen los links.

Os voy a poner de ejemplo una tabla con link para que veais cómo queda.

Si ponemos este código

<marquee direction="up" style="background- text-align: center; width:200px;height:150px;border:1px solid #000000;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'"> <a href="http://lawarradelosmundos.blogspot.com" target="_blank"><img width="200" src="http://www.lordmax.org/imagenes/warralink.jpg" height="70/"/></a>
<a href=http://elcoterucu-udias.blogspot.com6gt;<img id="BLOGGER_PHOTO_ID_5147277921097822658" border="0" style="CURSOR: hand" alt="" src="http://3.bp.blogspot.com/_VWtmsmrPvYE/R27N_28_McI/AAAAAAAAAK4/J1cU2R75w0w/s200/milogo.jpg"/></a> </marquee>

En este caso, veis que hemos colocado la decoración de la tabla y después van dos links, el de La Warra de los Mundos y el de El Coterucu de Udías. (primero con el link hacia esos blogs y luego la dirección donde tienen alojada su imagen)

El resultado es éste:





Si poneis el puntero de vuestro ratón sobre la tabla, vereis como se para el movimiento, dejando así ver el link que haya y que podamos pincharlo.

Si solo quisiéramos hacerlo con imágenes, deberíamos colocar la dirección en la que se alojan y hacer la tabla de la misma manera que antes. No tiene ninguna dificultad.

Es decir, usando el código html "img". Podemos combinar con la alineación (center, left, right). Básicamente, el código es así:

<ALINEACIÓN><img src="http://DIRECCIÓN DE LA IMÁGEN"></ALINEACIÓN>

Decir que a las imágenes se les puede añadir un tamaño con width y heigh y más cosas, pero bueno, partid de lo básico.


Si teneis alguna duda, escribidme un comentario y os responderé. Sé que este tema lo he explicado a través de mail a muchos de vosotros porque en el post anterior no lo entendais muy bien, pero espero que este libro del Quijote que he puesto hoy sirva para que os resulte más sencillo.

NOTA: tened mucho cuidado cuando escribais los códigos, os lo diré mil veces, de no quitar las comillas y de escribirlo despacito....

No olvides votarme: PINCHA AQUÍ