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.