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: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg', -48, 0], rightnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</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.
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
ResponderEliminaresta super fregon esto!!! ... una pregunta.. podria pegar videos de youtube ahi? como agregaria el embed??
ResponderEliminarha sido perfecto! muchisimas gracias!!!
ResponderEliminarMuchas 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.
ResponderEliminarotras 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...
ResponderEliminarhola decirte que funciona a la perfección.
ResponderEliminarSaludos.
gracias anda de 10
ResponderEliminarHola ... Saludos Desde Galicia
ResponderEliminarAnte 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
A mí me gustaría que sólo se viese una imagen de cada vez, cómo se haría?Gracias
ResponderEliminarhola... 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
ResponderEliminarhola 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
ResponderEliminarAmigo 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.
ResponderEliminarEspero que me puedas ayudar y muchas gracias.
¡Hola! Quiero agradecerte muchisimo toda la información que nos brindas.
ResponderEliminarUn abrazo.
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
ResponderEliminarHola me encanta tu blog ya puse el carrusel en dos blogs miralos http://www.postmundo.com/ y http://verpeliculassiglo21.blogspot.com/
ResponderEliminarmuchos saludos
Franck
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?
ResponderEliminarHolas!!! Mil gracias por este gadget, que luce genial!!
ResponderEliminarSolo una consulta, se pueden agregar mas cuadros en el slider??? Como???
O talvez como agrandar anchar un poco el slide???
ResponderEliminarHola 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.
ResponderEliminarNota :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/
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.
ResponderEliminarbro por que sale atras de la primera entrada????
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarBueno 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
ResponderEliminarhola, muy buen blog.
ResponderEliminartengo una pregunta: como hago para centrarlo? me sale muy pegado a la izquierda.
gracias.
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
ResponderEliminarHola 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.
ResponderEliminarhttp://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.
me encanto estre truco pero dejo de funcionarme de repente mi blog http://castanuelacity.blogspot.com/
ResponderEliminarporfavor respondan creo que son los archivos http://pmsc.free.fr/gb/J/1039115625.js que no estan funcionando
ResponderEliminarHola ... Saludos Desde Galicia
ResponderEliminarNecesito 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
MUY BUENO RALMENTE, PERO QUIESIERA SABER COMO HAGO PARA PONER ALGUN TEXTO DEBAJO DE CADA IMAGEN.
ResponderEliminarESPERO TU RESPUESTA.
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.
ResponderEliminarAl 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.
Hola, veo que tienes desantendido el Blog, no contestas en esta entrada.
ResponderEliminarA 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.
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
ResponderEliminarMuchísimas gracias por este Código ! Si queres ver como me quedo te dejo mi link:
ResponderEliminarhttp://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.
buenas!
ResponderEliminarLo 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 :)
Este blog está mortal!!! Quienes lo crearon son unos grandes. Gracias!!!
ResponderEliminarTe agradezco enormemente esta genial entrada. La verdad es que hacia tiempo que buscaba algo así para mi nuevo blog.
ResponderEliminarAyer 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
amigo no sirve al parecer los codigos murieron ya no estan en linea donde los puedo encontrar?
ResponderEliminarPodrias pasar los 2 .js.. Gracias
ResponderEliminarGracias por tu pagina amigo,
ResponderEliminarme 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.
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/
ResponderEliminarles agradeceria su ayuda
Muchisimas gracias por la información, me esta sirviendo de lujo para un bloque estoy haciendo en estos momentos.
ResponderEliminaramigo como descargo los scripts.. parece que ya no funcionan y quiero subirlos a la página que recomiendas aquí.. gracias maestro!
ResponderEliminarya no funcionan
ResponderEliminaralguien que ayude .....
por favor.....
amigo logre colocar las entradas y las imágenes pero se queda estático y no puedo hacer andar el carrusel. Que hago?
ResponderEliminarme funcionó pero vertical, como hacer para que se vea horizontal este slideshow?
ResponderEliminar