AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Imágenes que van pasando en un gadget

martes, 19 de marzo de 2013

Hace mucho tiempo hice esta entrada explicando como poner imágenes o texto en un gadget, de manera que se movieran, o mejor dicho, que fueran pasando de un lado a otro, ya fuera de abajo arriba o de derecha a izquierda.

Pero últimamente me han llegado consultas acerca de tal cosa y al remitir a los consultantes a dicha entrada me ha dado la impresión que las explicaciones no acaban de dejar claro como se hace, así que paso a explicarlo más detalladamente.

En primer lugar has de ir a Diseño. A veces lo que se abre es el apartado donde puedes modificar la plantilla mediante el HTML, si es así, en la columna de la izquierda pincha en Diseño, para que se abra la página de añadir gadgets.

Una vez en ella, añades un gadget a la columna donde quieras que se vean las imágenes. Eliges el gadget HTML y en el escribes lo siguiente:

<marquee scrolldelay="100" direction="left" onmouseover="stop()"onmouseout="start()" scrollamount="2">


A continuación añades los códigos de las imágenes que quieras que se vean, que deberán estar en algún servidor para que tengan url, de esta forma:

<img src="dirección de una imagen"> <img src="dirección de otra imagen"> <img src="dirección de otra imagen";

repitiendo este código <img src="dirección"> tantas veces como imágenes quieras poner, cambiando solo la dirección, para que se muestren todas.

Cuando hayas escrito todas las direcciones de las imágenes que quieras mostrar, cierras el código con esto:

</marquee>

Como explico en la entrada que he enlazado al principio, el "100" indica la velocidad, a mayor número menor velocidad y "left" indica que las imágenes irán hacia la izquierda. "stop" y "start" indican que se parará al poner el ratón encima y continuará cuando se aparte el ratón.
Si quisieras que las imágenes subieran cambias left por up cuidando de no borrar las comillas.

Esto para poner solo imágenes. Sin enlaces ni nada.

Si además quieres que cada imagen sea un enlace a algún sitio, después del primer código que he dicho lo que has de poner es lo siguiente:

<a href="la dirección del sitio al que enlazará la imagen"><img src="la dirección de la imagen"></a>

repetir este conjunto de códigos tantas veces como imágenes vayas a poner, cambiando la url del sitio enlazado y de la imagen que servirá de enlace, en cada uno de los códigos que incluyas y cerrar con </marquee> cuando hayas acabado.

Si además quieres que se abra en otra ventana, el codigo a poner y repetir tantas veces como imágenes añadas es el siguiente: (recuerda que la primera parte no varia).

<a href="dirección del enlace" target="_blank"><img src="dirección de la imagen"></a>

Y si quieres rizar el rizo y que al poner el ratón encima además de pararse se vea un texto explicativo del sitio enlazado, el código a escribir y repetir tantas veces como imágenes quieras que se vean es el siguiente:

<a href="url del enlace" target="_blank" title="aqui escribes el texto"><img src="dirección de la imagen"></a>

RECUERDA:

Todas las imágenes han de estar en internet, en algún servidor, ya sea Dropbox, en la carpeta Publico, para que tenga url, ya sea en Picasa, o en Flickr o donde quieras.

La dirección de una imagen siempre acaba con una extensión, ya sea .jpg o .bmp o .png 3 letras que indican el sistema del archivo. 
Hago esta apreciación porqué en Picasa es fácil confundirse y copiar la url del álbum donde están las imágenes, en cuyo caso no se verán.
Para saber la url de la imagen en Picasa, se ha de pinchar la imagen que se va a poner, con el botón derecho del ratón y del menú que aparece pinchar, con el izquierdo, en Copiar url (o dirección) de la imagen.

Procura que todas las imágenes tengan un tamaño lo más similar posible.
No se hasta que punto se verian bien si unas fueran mucho más grandes que otras. Se ha de tener en cuenta el tamaño del sitio donde se va a colocar el gadget, para evitar sobrepasarlo. Así, por ejemplo, en una columna lateral no pongas imágenes mayores que su anchura, o puede ser que no se vean o que te echen la columna lateral abajo.

No olvides que el código de inicio solo se pone al principio y que has de terminar con el de cierre para que funcione.


Imprime esta entrada

23 comentarios. ¿Quieres añadir el tuyo?

  1. Lourdes ha dicho
  2. Gràcies.

  3. LoLi Mf ha dicho
  4. Hola Eulalia, felicidades por tu blog, es muy interesante y para novatas como yo, viene genial.
    He intentado poner el artilugio de enlázame y al pinchar luego en él, me sale esto:

    "Vaya, eso es un error.
    Disculpa las molestias.
    Prueba a actualizar la página para ver si todo vuelve a la normalidad.
    Hemos detectado los errores siguientes:
    widget.content: Campo obligatorio; no debe dejarse en blanco.
    Si el problema continúa, te recomendamos:
     Borra la caché y las cookies del navegador y vuelve a intentarlo".
    No se si es por algo que tenga mal en el blog, por la plantilla, o que.
    Yo sigo todos los pasos, y me aparece la imagen, pero al pinchar, me sale este error.
    Me puedes ayudar por favor.
    Este es mi blog
    http://lolim2012.blogspot.com
    Un saludo...LoLi
    Un saludo...LoLi

  5. Eulalia ha dicho
  6. Loli. Yo lo veo bien y si pincho en enlázame funciona.

  7. LoLi Mf ha dicho
  8. Gracias Eulalia, por tu visita y por tu respuesta. Un besito

  9. Laura Rengifo ha dicho
  10. Hola Eulalalia, sabes tenia dias buscando la informacion de como hacer eso de las fotos... valgame Dios! casi muero ene le intento hasta que te encontre!!!!! muchiiisimas gracias!!!!! es tan facil!!!! ajjajajaj! hasta que lo sabes! cuando este listo mi blog, te lo presento... y se aceptan criticas constructivas. Abusando de tu confianza; tenez un post o tuto donde pueda entrelazar o poner en mi blog el link de una tienda online. porfa! te agradeceria mucho! hasta pronto

  11. Eulalia ha dicho
  12. Laura Rengifo:
    Lo siento, no se como se hace eso de la tienda online.

  13. San Judas Tadeito ha dicho
  14. Me gustó mucho la entrada, felicidades.

  15. San Judas Tadeito ha dicho
  16. Me gustó mucho la entrada, felicidades.

  17. Jessy Solina ha dicho
  18. Hola. Yo lo que no entiendo es como crear en enlace de la imagen -.- sorry soy un poco patosa xD

  19. Jessy Solina ha dicho
  20. Bueno ya lo he conseguido pero son excesivamente grandes si les pongo un height y un width se apequeñaran n?

  21. Eulalia ha dicho
  22. Jessy: No estoy totalmente segura de que funcione, pero puedes probarlo.
    Las medidas se añaden en el código de la dirección de la imagen.

  23. Mary Vasquez ha dicho
  24. MIL GRACIAS *-* Desde hace mucho tiempo estaba buscando esto :D
    Enserio te lo agradezco mucho , me sirvio de maravilla

  25. Mary Vasquez ha dicho
  26. Te invito a ver mi blog :D http://relationshipwithbook.blogspot.com/

  27. Aline González ha dicho
  28. ¡¡Muchas gracias!! me ha servido de mucho^^

  29. Peli Bloguista ha dicho
  30. Gracias!! Muy bien explicado y lo he podido hacer sin problemas!!
    ¡Nos leemos!

  31. Marta G ha dicho
  32. ¡Hola!
    Tengo un problema, y es que todo me sale bien, solo que me queda un espacio entre el titulo del gadget y las imágenes, ¿Qué puedo hacer?
    Gracias

  33. Eulalia Batista ha dicho
  34. Hola Marta G
    Este problema puede ser debido al margen que tenga el título del gadget respecto al contenido.
    De todas formas, he entrado en tu blog y, si te refieres al gadget en el que pasan portadas de libros, no me da la impresión que la separación sea excesiva.

  35. Red Berserker ha dicho
  36. Hola! primero muchas gracias por tu post me ayudo bastante aun que solo presento un pequeño problema y es el saber si puedo cambiar el tamaño y el ancho de como se presentan estas imagenes ya que algunas son grandes y quisiera ajustarlas todas al mismo mañana y aparte de esto son un tanto largas entones cuando pasan se leen por mitades... estaria muy agradecido si me ayudaras con esto :D

  37. Eulalia Batista ha dicho
  38. Para cambiar el tamaño de como se presentan has de modificar el tamaño de las imágenes.
    Hay programas de edición de imágenes que permiten hacerlo.
    En cuanto a lo de que son largas, haz que pasen mas lentas a ver si eso consigue que se puedan leer enteras.
    No se me ocurre nada mas.

  39. Pedro España ha dicho
  40. excelente, muchisimas gracias.
    Ojalá tuvieras uno de videos

  41. Eulalia Batista ha dicho
  42. No, Pedro, lo siento. Siempre he sido algo torpe con el tema de los videos.

  43. María José ha dicho
  44. Este comentario ha sido eliminado por el autor.
  45. María José ha dicho
  46. Hola soy nueva. Quiero hacer un vídeo así y que cada imagen enlace a una web. Pero todavía mi blogestá en prueba y no tengo publicadas las fotografínsula, así que no tienen URL cósmo podría hacerlo? Muchas Gracial.

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.