miércoles, 21 de mayo de 2008

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Í

8 comentarios:

DaniBai dijo...

uuy que lio!! podías haber hecho el ejemplo con nosotros!! jaja cuando puedas pasa por nuestro blog a recoger un premio un saludo

Jordi dijo...

Esto es lo que estaba buscando. Esta muy bien explicado me ha salido a la primera. +5 puntos porque no me deja dar mas

Jefe indio dijo...

me declaro culpable de ser uno de los que pregunto jeje

Joaquin dijo...

Excelente aunque yo solo necesitaba poner el movimiento por que lo demas ya lo tenia,el centrado de las imagenes lo tengo puesto en cada imagen una por una independientemente con la etiqueta div,como agradecimiento pongo tu blog enlazado con mi web que aunque no esta terminada podeis ver aqui el resultado de los enlaces http://clansb.awardspace.com tambien e puesto el titulo de tu imagen gracias.

Tashano dijo...

Hola Nya....gracias, gracias, gracias !!!!!!!, me has hecho capaz de poner los Links en movimiento....yo que soy una inutil para esto!!!!!!!!
mil gracias.
Tashano

Maria dijo...

Muchisimas gracias!!!
estaba buscando,las reglas para poner este link en mi blog,pero las q veia eran tan,pero tan dificiles q no podia seguir los pasos de ella,contigo fue superfacil!!!!
Te vote 5 y pq no habia mas,porque sino....
Un beso

Yaritza Fontanez Torres dijo...

Hola me gusta el slide o caja con enlaces o imagenes en movimiento. Me gustaria que me ayudaras a como hacerme uno por favorrr. Te lo voya a agradecer y si quieres que te vincule lo hare pero ayudame por favor a tener uno asi.

msn aztirayaneris@hotmail.com

Loida dijo...

Hola! Muchísimas gracias por el aporte. Lo estaba buscando hace tiempo pero ninguno me funcionaba ^^
Y ahora este queda perfecto
¡Un besazo!