sábado, 21 de noviembre de 2015

Tutorial: Cómo Poner Un Slider, Slideshow o Barra de Imágenes en Movimiento en tu Blog.

Hacía siglos que no hacía ninguna entrada para el blog con tutoriales, pero hoy una amiga me ha preguntado cómo poner la barra de imágenes que aparece en mi blog en la parte superior con las portadas de los libros que he reseñado, así que he pensado que es mejor hacer una entrada y contar como añadirlo, así puede que os sirva a alguien más.

Así que haya vamos, lo primero de todo es saber que esa Galería de Imágenes en Movimiento se llama Slider o Slideshow, y os voy a indicar la forma más fácil de incluirla, sin tener que tocar la plantilla del blog.

Lo podéis utilizar para infinidad de cosas, para anunciar las reseñas de los libros que habéis hecho, para poner las iniciativas de las que formáis parte, para indicar con que editoriales participáis, los sorteos, etc.

Para colocarlo en vuestro blog solo tenéis que seguir unos sencillos pasos.



  • Vamos a nuestro blog y desde la Página Principal de Blogger seleccionas Diseño
 
  •  Añadir un Gadget

  • Seleccionamos insertar  HTML/Javascript
  • Ahora procedemos a pegar el siguiente código y guardamos.
<center><div class="widget-content">
<marquee direction="left" scrollamount="4" style="background- text-align:
center; width:300px;height:200px;border:0px solid
#F781D8
;padding:1px"
onmouseover="this.scrollAmount='0'"
onmouseout="this.scrollAmount='3'">
<a href="URL" title="TÍTULO"><img style="width: 200px; height: 200px;" src="URL DE LA IMÁGEN" /></a>
a="" /></a>
</marquee></div></center>

Los campos del código que debéis modificar son:

  • "URL" aquí debéis indicar la URL donde queréis que os redirija la imagen. Por ejemplo, en mi caso, la URL de la reseña del libro.
  • "TÍTULO" Podéis dejarlo tal cual o poner un título. En mi caso, pongo el título de la novela.
  • "URL DE LA IMÁGEN" aquí debéis indicar la URL de la imagen que queréis que salga en el Slider. En mi caso, pongo la URL de la portada de la novela.

Si queréis añadir más imágenes al Slider, sólo tenéis que añadir este código tantas veces como necesitéis.
Yo, por ejemplo, cada vez que hago una reseña, le doy a modificar al Gadget, añado esta línea y relleno los datos.

<a href="URL" title="TÍTULO"><img style="width: 200px; height: 200px;" src="URL DE LA IMÁGEN" /></a>

Vamos ahora a explicar un poco algunas cosas para que podáis modificar el Slider a vuestro gusto.
Los campos que veis en color rosa claro podéis modificarlos a vuestro gusto.
  • "left"  esto indica que la galería de imágenes circula de derecha a izquierda, podéis poner "right" si queréis que se muevan en sentido contrario.
  • 300 - 200 son las medidas de las imágenes, podéis ir cambiándolas para ajustarlas a vuestro blog como queráis. Esto es un poco error y ensayo. Yo tengo puestos los valores que veis en el código.
  • 0 es el tamaño del borde o marco de las imágenes, yo lo tengo en 0 porque prefiero que no tengan marco. y #F781D8 es el color para dicho marco, podéis cambiarlo por el que queráis.
Espero que os sirva el tutorial de hoy y que le saquéis provecho, es una forma muy bonita de dar movimiento a nuestro blog y de tener un acceso rápido y vistoso a las reseñas para los lectores.



20 comentarios:

  1. ¡Te voy a poner un altar! jajaja ¡Gracias por esta fantastica entrada, para las que como yo, no damos una

    ResponderEliminar
  2. Hey, muchísimas gracias por la información, seguro que pronto lo pongo en práctica, besos:3

    ResponderEliminar
  3. Hola! Me ha gustado el tutorial mucho
    Me presento, soy Marco y vengo de la iniciativa cadena de comentarios. Besos

    ResponderEliminar
  4. Oye, muy chulo. Igual me animo y lo pongo en algún lado, aunque no prometo nada... mi blog tiene quizá un aspecto demasiado sobrio para estas cosas ^^

    ResponderEliminar
  5. Un post de lo mas interesante que tengas un buen fin de semana

    http://historiassparacontarr.blogspot.com/

    ResponderEliminar
  6. Hola! Que buen tutorial!! Cuando empecé con el blog me hubiese venido genial que mira que busqué por internet un tutorial que me sirviera, jajaja.
    Besos!

    ResponderEliminar
  7. ¡Hola! :D
    Me encanta como lo has explicado claro y sencillo :)
    A ver si podemos hacerlo en nuestro blog ^^
    Besos ♥
    ~Yvaine

    ResponderEliminar
  8. Hola!!! muy interesante el tutorial, yo tengo puesto uno, pero querría al igual que tu poner un par mas, puedo hacerlo de la misma manera que tu lo haces? o son diferentes códigos?
    Gracias por el tutorial
    Isa
    El desván de las delicias - CDC

    ResponderEliminar
  9. ¡Gracias por la información! Son cosas muy útiles. Un besote :)

    ResponderEliminar
  10. Hola! Gracias por el tutorial, a mí lo de modificar cosas de HTML se me da fatal, así que esto me viene muy bien ^^

    Me quedo por tu blog, que acabo de descubrirlo y me ha gustado mucho n.n

    Besos gatunos!

    ResponderEliminar
  11. Hola bella Eva!!! Este tutorial mola, aunque tarde. Jajajajaja.
    Gracias por compartirlo, luego lo comparto.
    Besos

    ResponderEliminar
  12. ¡¡¡Ay!!! Mil gracias por este tutorial. Hace tiempo que quiero poner un slider, pero no sabía cómo :D
    Besosss

    ResponderEliminar
  13. Hola!!
    Que genial, muchas gracias por este tutorial!!
    Hace tiempo que tenia ganas de tener algo así pero como soy un desastre en estas cosas nunca supe como! De esta manera se ve supr fácil así que de seguro lo intente, gracias!
    Besos.

    ResponderEliminar
  14. Hola preciosa!
    Genial la entrada, la voy a poner en práctica. gracias por el tutorial. Besotes

    ResponderEliminar
  15. Estuve como loca buscando uno de estos hace un tiempo u_u pero guardaré esta entrada por si acaso xD

    ResponderEliminar
  16. Me encantan este tipo de entradas. Es que te comoooooooooooooooooooooooooooooo

    ResponderEliminar
  17. ¡Hola guapa! Genial entrada ^^ seguro que ayudas a muchos blogs, yo tardé mucho en encontrar algo así para ponerlo en el mío ^^
    ¡Un besazo!

    ResponderEliminar
  18. Ainsss, yo en mi actual plantilla no puedo ponerlo, se me descentra todo y sale como quiere, así que he hecho una página que está en una pestaña que pone Participo en y ahí voy poniendo todo :D
    Besos! <33

    ResponderEliminar
  19. Gracias!!!! Pero nena... no puedo coger los códigos :/

    Un saludazo!!!

    ResponderEliminar
  20. ¡Gracias!
    Éste tutorial me ha venido de perlas porque llevaba un rato largo buscando cómo hacerlo y no lo podía encontrar por ninguna parte xD

    Nueva seguidora aquí :D

    ¡Un saludo!

    ResponderEliminar

Y tú ¿qué piensas?
¡Me gustaría mucho saberlo!
¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥

Me hacen tanta ilusión que leo todos y cada uno de ellos SIEMPRE.

Sin embargo y aunque en general suelen ser bienvenidos todos los comentarios y todas las opiniones, me reservo el derecho de eliminar aquellos que me parezcan malintencionados o cuyo único fin sea la autopromoción.

Besos y ¡gracias de nuevo!