CÓMO PONER UN SLIDESHOW EN EL BLOG

Hace unos días alguien me preguntaba por un tutorial para crear un slideshow pero al ir a responder me di cuenta de que era un poco largo para hacerlo en un comentario, así que pensé que podía publicarlo en el blog por si a alguien más le resulta útil.

Para quien no sepa de lo que hablamos, un slideshow es una presentación de imagenes que se van sucediendo una tras otra. Podéis ver un ejemplo en mi página de la tienda.



Poner un slideshow en el blog es muy sencillo, como siempre, lleva algo más de tiempo personalizarlo a nuestro gusto y adecuarlo a la estética de nuestra página. Por supuesto que hay muchos tipos o estilos de slideshows y cada uno de ellos acepta modificaciones así que yo sólo os voy a hablar del que uso: slideshow con jquery.

El jquery es, por decirlo de forma sencilla, una biblioteca con lenguajes de programación para crear páginas dinámicas. Si os gusta trastear con vuestros blogs es interesante saberlo ya que algunos códigos nos piden que tengamos jquery implementado en nuestra página. Y hacerlo es así de fácil:

PLANTILLA >> EDITAR HTML >> CONTROL+F (para que se nos abra el buscador) >> buscamos /b:skin >> copiamos esto justo detrás sin las rayas rojas //:



<//script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>;


Ahora vamos a instalar nuestro código HTML. Vamos a DISEÑO >> añadir HTML en el lugar que queramos, en mi caso debajo de la cabecera y copiamos el enlace que podemos descargarnos en este botón:




 Sustituimos lo que está en rojo (URL, URL_IMAGEN Y TÍTULO) y repetimos esta línea tantas veces como imágenes queramos que tenga nuestro slideshow:



Después sólo nos queda trastear con el estilo para cambiar el tipo y tamaño de la letra, el color, la enmarcación de nuestra galería y todo lo que se nos ocurra.

Este es mi slideshow pero con jquery podéis encontrar un montón de estilos, todos ellos personalizables, en este enlace. Una vez que hayáis seleccionado el tipo de slideshow que queréis y lo hayáis modificado a vuestro gusto sólo tenéis que descargar el código y llevarlo a vuestra página.







Sígueme en:



http://eepurl.com/bct2DT

Comentarios

  1. ¡Hola, Rosana! Pues está muy bien saberlo,porque no tenemos un slideshow en nuestro blog, y como en tu tienda, en la nuestra también estaría muy bien. A ver si tenemos un huequito e investigamos más. ¡Muchas gracias por tus conocimientos!

    Muchos besos de las dos.

    J&Y

    ResponderEliminar
  2. Muchas gracias por estas clases de programación para dummies, menos mal que alguien nos lo explica sencillito...

    ResponderEliminar
  3. Hola Rosana...a mi me encanta trastear en la apariencia de mi blog...y sabes? me encanta como lo explicas!!!
    Voy a ojear a conciencia esta sección tuya, además de que me encanta tu blog, apariencia y contenidos por supuesto!!!
    Un abrazo.

    ResponderEliminar
  4. Hola Rosana, yo los usaba en mis épocas de Joomla, pero con el blogger ando super perdida... Además hace años que no cojo un manual de CSS, me quedé en el HTML de los 90... Aunque este verano tengo pensado ponerme las pilas y tu blog ma hace que coja más ganas jejeje por cierto, he encontrado un blog que te deja probar el código en directo, quizás te sea útil.

    Para no ponerte el enlace te digo lo que debes poner en la barra de búsqueda de Google: probar código - código todo código :)

    ¡Saludos!

    ResponderEliminar
  5. Así es como conocí tu Blog,Rosana,por los Tutoriales,jajajaja.
    Esto del slideshow lo tengo pensao,pero al final entre una cosa y otra,no lo hago nunca! Me lo voy a apuntar en grande,jajaja,a ver si así me pongo a ello.
    Gracias!! Se te dan muy bien estos Tutos,sección fija ya!jajajaja ;)
    Besitos! :)

    ResponderEliminar
  6. Muchas gracias por el tutorial!!!
    Me lo dejaré apuntado para cuando pueda porque esta semana ya desconecto que tengo que ponerme a darle duro a la opo....
    XOXO

    ResponderEliminar
  7. Gracias por compartir la información.
    Besos.

    ResponderEliminar
  8. Hola Como estas? me gustaría probar el slideshow pero el link de descarga esta caído, Podrías volverlo a subir? gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola, yo lo tengo implementado en esta página y me funciona ---> http://mamichufletashop.blogspot.com.es/

      Un saludo!

      Eliminar
  9. no creo que respondais pero ya tu enlace del codigo no funciona, subelo a Google Drive si aun lo tienes disponible y es mas facil para tus lectores/as de este post.
    Gracias de antemano.

    ResponderEliminar
  10. tú dices que el codigo lo tienes implementado en tu tienda shop
    http://mamichufletashop.blogspot.com.es/
    pero considero que deberias subir mucho mejor el codigo que es del mismo slideshow de tu tienda shop ,asi de sacarlo de tu tienda es complicado ya que no sabemos cual codigo es tu slide montado ,si puedes podrias subirlo a Google Drive y reactualizar este post para tus lectores/as, Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Mr. CashManFlow.
      Lo primero decirte que yo leo SIEMPRE los comentarios y correos que recibo, y cuando me piden o preguntan algo también respondo.
      Este post como ves es antiguo, así que es probable que esté desactualizado, en cualquier caso yo sigo teniéndolo en mi página y me sigue funcionando correctamente. Y lo que yo tengo implementado es exactamente lo mismo que tengo aquí publicado, así que no veo necesidad de subirlo a Drive. Gracias por tus comentarios y sugerencias!

      Eliminar

Publicar un comentario

Entradas populares