¡Aprendamos a Bloggear! - Poner Slider o galería de imágenes en movimiento en tu blog

Hola Hola!! Soy Cat y aquí estoy de nuevo otro sábado con el segundo tutorial en este blog. Antes de empezar con el nuevo tuto, quería avisaros que estamos recibiendo varios formularios duplicados ya que muchos pensáis que nos hemos olvidado. Ni mucho menos es así, estáis todos en nuestra lista para reseñar pero sois muchos. En cualquier caso si tenéis alguna duda o habéis cambiado el nombre, url o ha pasado algo en vuestro blog mandadnos un mail y no otro formulario de contacto, ya que así será más sencillo para nosotros. Y eso es todo, vamos con el tutorial!

El de hoy ha sido petición de Shine, que no tenía muy claro como poner un widget de los que hay en este espacio que le llamó bastante la atención. Concretamente el Slider en movimiento que tenemos en la barra lateral anunciando los blogs de cada administradora. Así que espero que os sirva este tutorial, que lo entendáis y para cualquier duda referente a este tutorial mandadme un mail a cathiieh@gmail.com

- ¿Qué es un Slider o galería de imágenes en movimiento? -
La verdad es que no sé exactamente como se llama este widget para mi siempre será “el coso ese que tiene imágenes pasando y cuando pones el cursor encima de una de ellas se para”. Pero el nombre más similar que he encontrado, que no sé si será el correcto, es Slider. (Si alguien sabe cuál es el nombre correcto que me lo diga, faltaría más.) Os dejo un ejemplo de Slider para que sepáis de forma más clara que es.

- ¿Para qué sirve? –
Este Widget puede tener muchos usos. Los he visto en blogs de reseñas anunciando las reseñas de los libros que se han hecho, también haciendo promoción a otros blogs (como en el nuestro) y diversas cosas. Resulta práctico ponerlo ya que ocupa poco espacio y queda bastante estético.

- ¿Cómo ponerlo? -
Quizás si no estás acostumbrado a usar códigos HTML te sea un poco difícil ponerlo. ¡Pero ten en cuenta que es sólo copiar y pegar códigos! Es muy sencillo, ya verás:

1. Diseño > Añadir un gadget > HTML/Javascript
2. Copiar código HTML [Click aquí para conseguirlo]
3. Rellenar el código HTML según las instrucciones del archivo adjuntado en el paso anterior.
4. Guardar y colocarlo en la zona que más te guste de tu blog.

Click en la imagen para agrandarla

Y eso es todo! Así de sencillo y rápido. ¡Espero que os haya servido! Contadme en los comentarios que os ha parecido y si lo habéis puesto en vuestro blog, enseñádmelo. Si tenéis alguna duda o queréis que haga algún otro tutorial en especial tan solo tenéis que acceder ¡AQUÍ! 

Nos vemos el próximo sábado!
Mil besos!♥

36 comentarios

  1. waaa gracias! puede que lo use en un futuro :)

    ResponderEliminar
  2. Llego a saberlo y me espero a que tú lo expliques porque tuve que buscarlo en internet y lo que me costó ponerlo u.u Ni lo entendí.
    Por cierto no sé si dejas hacer sugerencias, pero ¿podríais explicar como se pone un gadget con los ultimos comentarios y foto?
    Es que lo tenía puesto pero se me quitó un día y ya no se pone u.u
    Mil besos.

    ResponderEliminar
  3. Creo que lo voy a usar para mi blog de historias, ya que el personal no tiene casi nada de imágenes, banners o links. Pero en el de historias puedo hacer portadas de cada novela y hacerlas que pasen así de bonitas :)

    Gracias, me ha encantado el tuto de hoy :)

    ResponderEliminar
  4. yo ya tengo varios de esos, pero es muy buen idea, sobretodo porque ahorra mucho espacio en el lateral y encima queda muy bonito
    un beso

    ResponderEliminar
  5. Enhorabuena Cat, me encanta como lo explicas todo y estoy pensando en ponerlo en mi blog de reseñas :)
    Un besazo!

    ResponderEliminar
  6. Me encanta :D pensaré que imágenes para ponerlo dentro de poco! Buena explicación guapa! Muuuuuak

    ResponderEliminar
  7. Me encanta :D pensaré que imágenes para ponerlo dentro de poco! Buena explicación guapa! Muuuuuak

    ResponderEliminar
  8. OH gracias se me pasó por completo mirarlo, que vergüenza xd
    Ahora mismo puede que incluso lo ponga en práctica en el blog, me encantan estos tutos por lo sencillos y útiles que resultan:P
    besitos

    ResponderEliminar
  9. Ah eso si, tuve un problema con las dimensiones... ¿se podría poner automático para no tener que modificar nada?
    gracias

    ResponderEliminar
  10. Hola Shine!! El gadget es automático por si solo ya.
    Quizás si se comete ese fallo es o porque bien has copiado mal el HTML del gadget o porque en la configuración HTML de tu plantilla hay algo que impide que sea automático.
    Eso ya sería algo más concreto de tu plantilla, vaya.
    Un saludo!

    ResponderEliminar
  11. Hola! de verdad me han salvado, lo estuve buscando un buen rato, eh, solo tengo una duda... ¿Se puede hacer que pase un poquitico más rapido? Gracias

    ResponderEliminar
  12. ¡Muchisimas gracias por el tutorial!
    Lo intenté hacer como 10 veces con diversos tutoriales pero no me salia...
    Ahora ya tengo mi slider de reseñas.

    ¡Muchas gracias! (otra vez)

    Besos<3

    ResponderEliminar
  13. Pues lo he intentado pero una imagen se mueve (tal y como debería), y la otra sin embargo se queda debajo de ésta y sin moverse :cccc

    ResponderEliminar
  14. Hola Marina ♥!

    Comprueba debidamente que has copiado bien los códigos HTML y has seguido las instrucciones.
    Si aún así no te sale puedes contactar con Cat vía mail (cathiieh@gmail.com) para que resuelva tu duda.

    Un saludo!

    ResponderEliminar
  15. ¡Buenas! Me ha venido genial el post, una explicación muy sencillita. Pero tengo una duda, ¿qué habría que modificar para que las imágenes pasaran más rápido? ¡¡Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. ¿Es tarde ya para responder? O:

      Revisa al inicio del código, donde dice "onmouseover="this.scrollAmount='0'"" y "onmouseout="this.scrollAmount='3'"". Lo primero corresponde a la velocidad al poner el mouse sobre una imagen (xD la idea es que pare, por eso es 0), y lo segundo es la velocidad cuando no está el mouse encima. Entre más alto, más rápido :3.

      Eliminar
  16. Yo he tratado, pero las imágenes me quedan muy grandes, cómo puedo hacer para que las imágenes me queden parejas y de un tamaño pequeño para que se vean bien???

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      xD Me doy la libertad de responder xP.

      O: Tienes dos opciones: usar imágenes del mismo tamaño (o al menos del mismo alto, que es lo que importa) o en el código de cada imagen editas donde dice "img border="0" img style="width: 100px; height: 100px;"": width es el ancho y height el alto ;).

      ¡Suerte!

      Eliminar
  17. ¡Hola! Hace ya bastante que vi este tutorial y lo apliqué en mi blog. ¡Muchísimas gracias! (xD Juraría que ya había pasado a agradecer, lo siento).

    Ayer, sin embargo, me di cuenta de que ahora al posar el mouse en una de las imágenes, no se detiene :C. Al principio pensé que era algo sólo de mi blog, pero al pasar acá, vi que tampoco paran... ¿alguna idea de porqué pasa? O:

    ♥ Gracias de antemano~.

    ResponderEliminar
    Respuestas
    1. xD Hola otra vez. Estuve jugando un poco con el código, revisando otros sitios y viendo los códigos de otras páginas con gadgets similares y encontré una solución :D.

      Sólo reemplacé "onmouseover="this.scrollAmount='0'"" y "onmouseout="this.scrollAmount='3'"" con "onmouseover="stop()"" y "onmouseout="start()"" respectivamente, y para regular la velocidad cambio el número en "scrollamount="4"". ;) Lo dejo aquí, en caso de que le sea útil a alguien más.

      Otra vez, ¡gracias por el tutorial!

      Eliminar
  18. ¡¡muchas gracias!! me ha servido de gran ayuda ^^
    Un abrazo.

    ResponderEliminar
  19. Hola gracias por el tutorial, soy nuevo en esto y quiero saber si hay posibilidades de hacer slider con las notas de las p{aginas, ya hice el de las entradas

    ResponderEliminar
  20. ¡Hola! Gracias por el tutorial, pero tengo un problema. Cuando voy al blog a ver las imágenes no me salen, me pone un cuadrado del tama{o de la imagen con una montaña rota al costado, que quiere decir que no se puede ver. ¿saben por que? gracias.

    ResponderEliminar
  21. Hola!
    Nadie me lo había planteado tan sencillo, gracias!!! Ya te sigo...

    ResponderEliminar
  22. HOLA! <3
    Disculpa. UNA DUDA. Es que ya lo intente en mi blog pero cuando repito el parrfo en cursiva me aparece la imagen estancada. ¿que hago?

    ResponderEliminar
    Respuestas
    1. Hola Alexa!
      Comprueba que hayas copiado correctamente el código del archivo. Muchas veces no nos damos cuenta y detalles como puntos o comas no los copiamos. Ese simple detalle hace que el código deje de funcionar.
      En el caso de que siga dándote algún tipo de fallo contacta conmigo en cathiieh@gmail.com y te ayudaré de una manera más personal encantada

      Un saludo! :)

      Eliminar
  23. Hola:
    En el navegador de Explorer no funciona correctamente la "caja de imágenes en movimiento", y sí en Chrome.

    Me podrías explicar que es lo que falla para corregirlo.

    He visto que tu caja si funciona con Explorer.

    Un saludo.

    Mi blog (trata de plagas) es: http://ratamur.blogspot.com.es/

    ratamur@gmail.com

    Un saludo. Juan Antº

    ResponderEliminar
  24. Osea hellou? Esto no va se tira media hora cargando soys unos rechingones....

    ResponderEliminar
  25. ¡Bien! He encontrado lo que estaba buscando para poner las iniciativas en las que participo. ¡Muchas gracias! A ver si no me lío a la hora de poner el código, que bien que sé sobre html y tal pero luego me cuesta hacer algunas cosas (por pereza sobre todo xD).

    ResponderEliminar
  26. Hola ..lo que yo quería saber..es como poner imágenes en movimiento ..unas que son parecidas a esta entrada que subieron.. pero q al tocar cada imagen te lleve a una entrada del blog.
    Si me pueden mandar la info al mail.se los agradezco..
    santiago_08_16@hotmail.com

    ResponderEliminar
  27. Hola! Gracias me ha servido de mucho!

    ResponderEliminar
  28. Hola! Me sale una imagen debajo de la otra, yo las quiero juntas (lado a lado)... ?

    ResponderEliminar
  29. Hola! Me sale una imagen debajo de la otra, yo las quiero juntas (lado a lado)... ?

    ResponderEliminar
    Respuestas
    1. Corregí todo lo demás, pero tengo exactamente la misma duda que tu :/

      Eliminar
  30. ¿De qué tamaño tienes que ser las imágenes?

    ResponderEliminar
  31. Muchas gracias por la explicación! Yo estaba teniendo problemas con el código que tenía pero este funciona espectacular :D

    ResponderEliminar

Los comentarios serán eliminados si:

- Contiene faltas de respeto.
- SPAM.

¡Muchas gracias por tu comentario!

Seguidores