Slider (carrusel de imágenes) para Blogger


Hace tiempo ya hablamos sobre como poner un slideshow con imágenes que iban pasando automáticamente y otro slideshow con los títulos de las entradas, así como también una marquesina de imágenes gracias al atributo marquee. Un slideshow colocado debajo de la cabecera de nuestro blog otorga un estilo diferente y una profesionalidad increíble. Por eso mismo, hoy de mano de anshuldudeja, voy a explicar cómo poner en Blogger un slidesow (carrusel de imágenes) que se pueden ir pasando al hacer clic, mejor mira esta imagen para entenderlo:
Slideshow Blogger

Para colocar este slideshow (carrusel de imágenes) en nuestro blog de Blogger deberemos seguir las siguientes acciones:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> y antes pegamos el siguiente código:
<script src='http://pmsc.free.fr/gb/J/1039115625.js' type='text/javascript'/>
<script src='http://pmsc.free.fr/gb/J/1039115553.js' type='text/javascript'/>

<style type='text/css'>
#mygallery{overflow: hidden;}
</style>

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})

</script>

Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan.

4) Ahora buscamos el código ]]></b:skin> y añade encima lo siguiente:
#myslides{

background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}

.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

5) Ahora clicamos en vista previa y si no hay ningún error, guardamos la plantilla.
6) Finalmente vamos a Diseño> Elementos de página> Añadir un gadget> HTML/Javascript y allí pegamos el siguiente código:

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 2nd -->

<!-- 3rd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 3rd -->

<!-- 4th imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" alt="DESCRIPCION" title="TITULO"> <img src="http://ENLACEIMAGEN.jpg"/> </a>
</div>
<!-- end code of 4th -->

</div></div></div>


Si nos fijamos en ese último código, en él es donde incluiremos cada imagen del slideshow (carrusel de imágenes). Cada bloque de código por imagen esta diferenciada por  <!-- 1st imagen --> y <!-- end code of 1st --> y entre ese código ese está el enlace de la imagen que deberemos incluir, concretamente en http://www.ENLACEENTRADA.html deberemos poner el enlace al que queramos que se nos dirija cuando hagamos clic en una imagen determinada; y en http://ENLACEIMAGEN.jpg deberá ir el enlace de la imagen que queramos incluir. Y así con todas imágenes predefinidas. No te olvides DE la descripción y título del SEO imágenes para Blogger. Si queremos añadir o eliminar imágenes basta con fijarse en el código y ver cómo está formado. No guarda ningún secreto.

Todo listo, espero que te guste el resultado final.

47 comentarios:

  1. esta super este post muchas gracias le dio una gran vista a mi web, te queria preguntar aver si sabias como hacerle para ke girara solo cada X segundos si sabes como porfa dimelo te lo agradecere mullones nos vemos

    ResponderEliminar
  2. esta super fregon esto!!! ... una pregunta.. podria pegar videos de youtube ahi? como agregaria el embed??

    ResponderEliminar
  3. ha sido perfecto! muchisimas gracias!!!

    ResponderEliminar
  4. Muchas gracias por la labor en esta magnífica web. Hace poco que he creado un blog por primera vez, así que vamos aprendiendo cosas poco a poco. Prácticamente casi todas las mejoras en la apariencia se lo debo a esta magnífica página. El último Slider (carrusel de imágenes) va como la seda, y como no podía centrarlo (no sabía donde colocar los center, probé varias ubicaciones sin éxito), así que busqué otra forma y me puse a experimentar con las variables px de width para la anchura del carrusel y también las de las ventanillas calculando que cupiesen 4 en lugar de 3 ventanillas. Finalmente centré la tira estirándola de un lado, va fantástico, sin saber htlm intuitivamente y con esta formidable ayuda casi que es adictivo este mundo, muchas gracias otra vez.

    ResponderEliminar
  5. otras ves man te pasastes, gracias por tremendo aporte, otra cosa que te queria pedir, esto me va a pelo, pero ir editando las imagenes cada ves que actualice el blog como ke es muy tedioso, osea man por ejemplo te pongo: una imagen de naruto que esta relacionado con el ultimo capi posteado, pero la gente no sabe a que capi pertenece la imagen y no le dan clic, pero si se puediera poner encima de la imagen por ejemplo "Cap. 151" la gente si le tomaria en cuenta y le daria clic, podrias modificar el html ke has creado con esa opcion, nos ahorarrias mucho tiempo con esa facilidad man... de antemano te agradezco...

    ResponderEliminar
  6. hola decirte que funciona a la perfección.
    Saludos.

    ResponderEliminar
  7. Hola ... Saludos Desde Galicia
    Ante Todo Agradecer Este Aporte
    Asi Como Todo el Contenido del Blog
    Todo lo que he Aprendido . . .
    Ha Salido de Este Fantastico Blog
    Desde mi Ignorancia el Codigo
    Tiene un Pequeño Error
    Nada Grave Para el que Sabe de Esto
    Pero Desquiciante para Torpes
    Donde me Incluyo . . .
    El Error Esta en el apartado 6
    Al final en Imagen 4th
    Los Atributos alt y tittle
    Estan Intercambiados
    Diferente a las otras Tres
    Por lo que una Imagen Sale Mal
    No se Puede Utilizar
    Espero que me Entiendan
    No Quiero Meter la Pata
    Por Ultimo Agradecer a Pegasus
    Su Comentario me Indico el Camino
    Para Centrarlo en mi Blog
    Un Saludo ...Gracias

    ResponderEliminar
  8. A mí me gustaría que sólo se viese una imagen de cada vez, cómo se haría?Gracias

    ResponderEliminar
  9. hola... a mi me falla en una web pero en la otra me funciona a la perfeccion mira en esta es donde falla http://www.neburanimex.com/ y en esta funciona a la perfeccion www.cinebura.blogspot.com espero y me puedas ayudar jej por cierto excelente aporte saludos desde mexico edomex

    ResponderEliminar
  10. hola man, te cuento que lo he probado y ps funciona pero solo funca hasta la tercera imagen, me fije que el cuarto estaba mal, y copie del tercero que estaba bien cambien los datos y agregue mas imagenes pero no funca, se queda hasta el tercero... podrias hacer uno de 6 imagenes man para que no haya problemas... de antemano te lo agradesco

    ResponderEliminar
  11. Amigo mio todo anda me maravilla, gracias por todo, el unico inconveniente es que lo quiero poner un poco mas largo y llevo la noche entera rompiendome la cabeza con esto.
    Espero que me puedas ayudar y muchas gracias.

    ResponderEliminar
  12. ¡Hola! Quiero agradecerte muchisimo toda la información que nos brindas.

    Un abrazo.

    ResponderEliminar
  13. Amigo aun tengo la necesidad de saber como poner el slider mas grande a que ocupe toda la parte donde lo tengo mira mi pagina, www.ciudadnagua.com

    ResponderEliminar
  14. Hola me encanta tu blog ya puse el carrusel en dos blogs miralos http://www.postmundo.com/ y http://verpeliculassiglo21.blogspot.com/

    muchos saludos


    Franck

    ResponderEliminar
  15. hola man tengo un problema, no me aparece la flecha para correr las imagenes hacia algun lado me entienes: ejemplo < imagen > las flechas que aparecen al lado izquiero y derecho al final de la lista de imagen no me aparecen ,, porque? algun error?

    ResponderEliminar
  16. Holas!!! Mil gracias por este gadget, que luce genial!!

    Solo una consulta, se pueden agregar mas cuadros en el slider??? Como???

    ResponderEliminar
  17. O talvez como agrandar anchar un poco el slide???

    ResponderEliminar
  18. Hola ami me anda de 10 todo lo que aplique,pero tengo un problema que cuando le doy click en las imagenes del carrusel me abre otra ventana quisiera saber como hago para que se abra en la misma ventana.

    Nota :los demas enlaces se habren dentro de la misma ventana solo el carrusel se habre en otra..

    Gracias saludos Pueden ver funcionado el carrusel aqui http://luisitotv.blogspot.com/

    ResponderEliminar
  19. Hola, traté de hacer el carrusel y nada de nada. Me trauma leer los comentarios en donde todos lo lograron jeje. Me pueden ayudar? En los pasos tengo una duda: en el segundo paso dice que añadamos encima de un código, el código que viene enmarcado. Entiendo que esto significa SUSTITUIRLO, así que lo sustituí y al hacer click en vista previa se abre otra ventana de internet y me aparece un cuadro que me dice que la página intenta cerrar dicha ventana. Le doy cancel y nada, le doy ok y nada. Ahora bien, si no sustituyo el código y lo añado AL LADO, al dar click en vista previa veo en el encabezado el código y no el carrusel!!! Gracias por su ayuda. Excelente este blog.

    ResponderEliminar
  20. bro por que sale atras de la primera entrada????

    ResponderEliminar
  21. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  22. Bueno pues ya me quedo muy bonito por cierto y no me di por vencido estoy dispuesto ayudar a algunos que no puedan contactecme edu941013@hotmail.com

    ResponderEliminar
  23. hola, muy buen blog.
    tengo una pregunta: como hago para centrarlo? me sale muy pegado a la izquierda.
    gracias.

    ResponderEliminar
  24. quiro descargar los archivos para alojarlos y no los encuentro alguien me puede ayudar. este carrusel lo instale en un blodg que estoy creando y me abia quedado bien, pero a dejado de trabajar bien y por error no salve los archivos script. Gracias

    ResponderEliminar
  25. Hola de Nuevo solo quiero desirles que ya solucione el problema, logre encontrar los archivos y los realoje en Gogle Site y ya estan funcionando perfecto, si quieren ver los cambios que le ise al mio pueden checarlo en mi blog que todavia estoy construyendo.
    http://ibpanamericana.blogspot.com
    Para gamertecnologo que quiere centrarlo lo que yo ise fue lo sigueinte encerre el archivo DIV asi CENTER /CENTER osea asi
    CENTER div id="myslides" ........
    ......./div /CENTER.
    no se si es correcto pero a mi me funsiona el maximo lo puedes checar en mi blog que estoy construyendo.
    y Muchas grasias a este blog que no sabes como busque este carrusel de imagenes.

    ResponderEliminar
  26. me encanto estre truco pero dejo de funcionarme de repente mi blog http://castanuelacity.blogspot.com/

    ResponderEliminar
  27. porfavor respondan creo que son los archivos http://pmsc.free.fr/gb/J/1039115625.js que no estan funcionando

    ResponderEliminar
  28. Hola ... Saludos Desde Galicia
    Necesito su Ayuda . . .
    El Carrusel de Imagenes ya no Funciona
    Necesito que Alguien me Ayude con Esto

    "Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan"

    Si Alguien Puede Decirme Como lo ha Hecho
    He Visto Varios Blogs donde Sigue Funcionando

    Un Saludo . . . Gracias

    ResponderEliminar
  29. MUY BUENO RALMENTE, PERO QUIESIERA SABER COMO HAGO PARA PONER ALGUN TEXTO DEBAJO DE CADA IMAGEN.
    ESPERO TU RESPUESTA.

    ResponderEliminar
  30. De repente me ha dejado de funcionar las miniaturas del Carrusel de imágenes. Tenía 10 imágenes y se veian y funcionaban los vínculos bien hasta que ahora solo se ven dos de las primeras y las otras ni aparecen.
    Al no estar no se pueden ver ni siquiera usar como vínculo para verla en grande. A ver si me puedes ayudar, con este problema pierde mucho encanto mi blog.
    Saludos y gracias.

    ResponderEliminar
  31. Hola, veo que tienes desantendido el Blog, no contestas en esta entrada.
    A ver si alguno puede decirme si mi problema es del servidor donde está ubicado los scripts y como puedo recuperar el enlace o lo que sea, en esto de los scripts ando un poco perdido.
    Gracias.

    ResponderEliminar
  32. hola que tal queria peguntar porq no funciona al ponerlo dos veces en la misma portada, funciona cuando lo pones por separado en distinta entrdas, habra alguna solucion?grcias

    ResponderEliminar
  33. Muchísimas gracias por este Código ! Si queres ver como me quedo te dejo mi link:

    http://zonacosmica.blogspot.com/

    (Esta en la columna derecha)

    Ahora, mi pregunta es: ¿Se puede cambiar la dirección del movimiento? en lugar de que se muevan horizontalmente me gustaría que lo hagan verticalmente.

    ResponderEliminar
  34. buenas!
    Lo primero gracias por la ayuda que presta tu blog.
    sobre este sli, te comento que no consigo centrarlo, me gustaria saber donde encuentro los valores. Gracias :)

    ResponderEliminar
  35. Este blog está mortal!!! Quienes lo crearon son unos grandes. Gracias!!!

    ResponderEliminar
  36. Te agradezco enormemente esta genial entrada. La verdad es que hacia tiempo que buscaba algo así para mi nuevo blog.

    Ayer lo instale y retocando algunos paramentos creo que me a quedado bastante bien. Solo tengo una pequeña duda que no se como solucionar. Cuando quieres abrir alguna entrada del "Slide" se me abré en una ventana nueva. Me gustaría saber que tengo que hacer para que siempre se me habrá en la misma ventana (sin salir del blog)

    Gracias por el aporte y tu magnifico blog, lo sigo desde hace algún tiempo.

    Salu2

    ResponderEliminar
  37. Hola!! llevaba tiempo intentando encontrar una pagina que me explicara como crear un blog de la forma en que tu lo explicas, muchas gracias, cree uno hace tiempo pero lo abandone porque no tenia internet, ayer cree otro que interesante... no se, pero divertido promete ser un rato asi que pasate y a ver que te parece. gracias!!
    www.lasolteradeoro.blogspot.com

    ResponderEliminar
  38. amigo no sirve al parecer los codigos murieron ya no estan en linea donde los puedo encontrar?

    ResponderEliminar
  39. Gracias por tu pagina amigo,
    me esta sirviendo para mejorar la mia aunque aun tengo mucho que aprender, pero todas estas cosas son de gran aporte y ayuda para personas que no tenemos mucho tiempo para ser especialistas en estos temas.

    Un saludo de españa y animo.

    ResponderEliminar
  40. hola fijate que tengo un problema fijate que solo me muestr 2 imagenes y no me da las flechas que debo hacer Mi blog es http://www.paradadelanime.co.cc/

    les agradeceria su ayuda

    ResponderEliminar
  41. Muchisimas gracias por la información, me esta sirviendo de lujo para un bloque estoy haciendo en estos momentos.

    ResponderEliminar
  42. amigo como descargo los scripts.. parece que ya no funcionan y quiero subirlos a la página que recomiendas aquí.. gracias maestro!

    ResponderEliminar
  43. ya no funcionan
    alguien que ayude .....
    por favor.....

    ResponderEliminar
  44. amigo logre colocar las entradas y las imágenes pero se queda estático y no puedo hacer andar el carrusel. Que hago?

    ResponderEliminar
  45. me funcionó pero vertical, como hacer para que se vea horizontal este slideshow?

    ResponderEliminar