Como crear una galería de imágenes para Blogger

Una carga de imágenes ligera, rápida y realmente hermosa que a todos los bloggers les encantara y sobre todo que les muestre una galería de imágenes controlable, en la cual se pueden mostrar una galería completa, con avances, retrocesos, pausa, texto, y un link en cada imagen para dirigir a su post o artículo que quiera mostrar. En este tutorial vamos a usar jQuery, JavaScript, CSS y HTML, bueno realmente es un solo widget en la cual ustedes van a insertar el código que les proporcionare, Una vez más he tratado que su instalación sea fácil y de primera. Así que sólo tienen que copiar y pegar el código dentro de un widget de blogger para que las cosas funcionen.

Pueden ver su demostración en el siguiente blog de demos, ubicado en el sidebar
Video Tutorial ¿Cómo crear una galería de imágenes online Gratis?


Instalación de la Galería de imágenes en Blogger

    1.- Inicie sesión en su cuenta de Blogger

    2.- Un clic en  "Diseño"


    3.- Un clic en  "Añadir un gadget" luego seleccione un widget "HTML/Javascript" ábralo


    4.- Inserte el siguiente código en su interior


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
#simplegallery1{
position: relative;
visibility: hidden;
border: 1px solid #666;
}
#simplegallery1 .gallerydesctext{
text-align: left;
padding: 2px 5px;
font: 10px normal verdana, arial;
}
</style>
<script type="text/javascript" >
var simpleGallery_navpanel={
    loadinggif: 'http://2.bp.blogspot.com/-ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/s400/ajaxload.gif', //full path or URL to loading gif image
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
    images: [ 'http://2.bp.blogspot.com/-LzMDVlVfxmQ/TlVybqSABOI/AAAAAAAAEx8/riOJdIu1eRc/s400/left.gif', 'http://1.bp.blogspot.com/-ZkATWoPt8Q8/TlVybVMA4xI/AAAAAAAAExs/zoAjOL7erWY/s400/play.gif', 'http://4.bp.blogspot.com/-IlIucHdUM-I/TlVybkMej0I/AAAAAAAAEx0/yQvxG-paQVc/s400/right.gif', 'http://1.bp.blogspot.com/-qdHg1fyty6A/TlVybOlRciI/AAAAAAAAExk/oio-_kn2KO8/s400/pause.gif'], //nav panel images (in that order)
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
    slideduration: 500 //duration of slide up animation to reveal panel
}
function simpleGallery(settingarg){
    this.setting=settingarg
    settingarg=null
    var setting=this.setting
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
    setting.fadeduration=parseInt(setting.fadeduration)
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play
    setting.currentstep=0 //keep track of # of slides slideshow has gone through
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
    setting.oninit=setting.oninit || function(){}
    setting.onslide=setting.onslide || function(){}
    var preloadimages=[], longestdesc=null, loadedimages=0
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif
        var loadgif=new Image()
        loadgif.src=simpleGallery_navpanel.loadinggif
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()
    })()
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images
        preloadimages[i]=new Image()
        preloadimages[i].src=setting.imagearray[i][0]
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
            setting.longestdesc=setting.imagearray[i][3]
        jQuery(preloadimages[i]).bind('load error', function(){
            loadedimages++
            if (loadedimages==setting.imagearray.length){
                dfd.resolve() //indicate all images have been loaded
            }
        })
    }
    var slideshow=this
    jQuery(document).ready(function($){
        var setting=slideshow.setting
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
            return
        }
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
            .css({position:'absolute', left:0, top:0})
            .appendTo(setting.$wrapperdiv)
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
            setting.descdiv=simpleGallery.routines.adddescpanel(setting)
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8})
            .bind('mouseover mouseout', function(e){
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
            })
            .bind('click', function(e){
                var keyword=e.target.title.toLowerCase()
                slideshow.navigate(keyword) //assign behavior to nav images
            })
        dfd.done(function(){ //execute when all images have loaded
            setting.$loadinggif.remove()
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
            slideshow.showslide(setting.curimage) //show initial slide
            setting.oninit.call(slideshow) //trigger oninit() event
            $(window).bind('unload', function(){ //clean up and persist
                $(slideshow.setting.navbuttons).unbind()
                if (slideshow.setting.persist) //remember last shown image's index
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
                jQuery.each(slideshow.setting, function(k){
                    if (slideshow.setting[k] instanceof Array){
                        for (var i=0; i<slideshow.setting[k].length; i++){
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
                                slideshow.setting[k][i].innerHTML=null
                            slideshow.setting[k][i]=null

                        }

                    }
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
                        slideshow.setting[k].innerHTML=null
                    slideshow.setting[k]=null
                })
                slideshow=slideshow.setting=null
            })
        }) //end deferred code
    }) //end jQuery domload
}
simpleGallery.prototype={
    navigate:function(keyword){
        clearTimeout(this.setting.playtimer)
        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number
        if (!isNaN(parseInt(keyword))){
            this.showslide(parseInt(keyword))
        }
        else if (/(prev)|(next)/i.test(keyword)){
            this.showslide(keyword.toLowerCase())
        }
        else{ //if play|pause button
            var slideshow=this
            var $playbutton=$(this.setting.navbuttons).eq(1)
            if (!this.setting.ispaused){ //if pause Gallery
                this.setting.autoplay[0]=false
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})
            }
            else if (this.setting.ispaused){ //if play Gallery
                this.setting.autoplay[0]=true
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})
            }
            slideshow.setting.ispaused=!slideshow.setting.ispaused
        }
    },

    showslide:function(keyword){
        var slideshow=this
        var setting=slideshow.setting
        var totalimages=setting.imagearray.length
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
            : Math.min(keyword, totalimages-1)
        setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
                clearTimeout(setting.playtimer)
              setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)
               try{
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)
                }catch(e){
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
                }
                setting.currentstep+=1
                if (setting.autoplay[0]){
                   if (setting.currentstep<=setting.totalsteps)
                       setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])
                    else
                        slideshow.navigate("play/pause")
                }
            }) //end callback function
       setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background
        setting.fglayer=setting.bglayer
        setting.bglayer=(setting.bglayer==0)? 1 : 0
        setting.curimage=imgindex
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description
            setting.$descpanel.css({visibility:'visible'})
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3]
        }
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
            setting.descdiv.innerHTML=null
            setting.$descpanel.css({visibility:'hidden'})
        }
    },

    showhidenavpanel:function(state){
        var setting=this.setting
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
            this.showhidedescpanel(state)
    },
    showhidedescpanel:function(state){
        var setting=this.setting
        var endpoint=(state=="show")? 0 : -setting.descpanelheight
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
    }
}
simpleGallery.routines={
    getSlideHTML:function(imgelement){
        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'
        layerHTML+=(imgelement[1])? '</a>' : ''
        return layerHTML //return HTML for this layer
    },
    addnavpanel:function(setting){
        var interfaceHTML=''
        for (var i=0; i<3; i++){
          var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0)
           var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i]
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '
        }
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'
        setting.$navpanel=$('<div class="navpanellayer"></div>')
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'})
            .appendTo(setting.$wrapperdiv)
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div
           .appendTo(setting.$navpanel)
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects
    },
    adddescpanel:function(setting){
        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div
            .eq(2).html(setting.longestdesc).end().end()
            .appendTo(setting.$wrapperdiv)
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')
        setting.descpanelheight=$gallerydesctext.outerHeight()
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object
    },
    getCookie:function(Name){
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
       if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return null
    },
    setCookie:function(name, value){
        document.cookie = name+"=" + value + ";path=/"
    }
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [300, 200],
    imagearray: [
        ["PONER EL LINK DE LA IMAGEN 1", "#", "_new", "LA DESCRIPCION"],
        ["PONER EL LINK DE LA IMAGEN 2", "#", "_new", "LA DESCRIPCION "],
        ["PONER EL LINK DE LA IMAGEN 3","#", "_new", "LA DESCRIPCION "],
        ["PONER EL LINK DE LA IMAGEN 4", "#", "_new", "LA DESCRIPCION "],
        ["PONER EL LINK DE LA IMAGEN 5", "#", "_new", "LA DESCRIPCION "]
    ],
    autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false,
    fadeduration: 500,
    oninit:function(){
           },
    onslide:function(curslide, i){
    }
})
</script>
<div id="simplegallery1"></div>


Ahora cuidadosamente realice los siguientes cambios:

1.- Cambie el tamaño de todas sus imágenes a un tamaño fijo. Para cambiar el tamaño de edición de imagen lo podrá realizar donde está marcado de color amarillo 300, 200 donde 300 es el ancho y 200 es la altura. Si sus imágenes son de mayor tamaño entonces se recortarán y no cambiaran de tamaño, pero si serán mostrados. Así que es mejor cambiar el tamaño manualmente de las imágenes y lo puede realizar en Photoshop o en cualquier otro software que usted utilice y proceda a continuar.

2.- Suba sus imágenes a Blogger y luego copie el enlace de su imagen que se encuentra después de  “scr” y remplace donde dice “PONER EL LINK DE LA IMAGEN 1”, haga esto para todas las imágenes que desee subir y también remplace por los que siguen a continuación con su respectivo link, como, “PONER EL LINK DE LA IMAGEN 2”, “PONER EL LINK DE LA IMAGEN 3”, etc.

3.- Remplace #  con el enlace de la página, la cual cuando un visitante le dé un clic a cualquier imagen, les llevara a una página que usted quiere que vean de su blog de blogger. Pero si usted no desea poner un link para que se abra cualquier post suyo, solo tiene que borrar #  y no les llevara a ninguna pagina.

4.- Remplace “LA DESCRIPCION”, por cualquier información que usted desee poner. Esta descripción aparecerá en la parte superior de la imagen cuando un usuario pase el cursor sobre ella. Si no deseas escribir ninguna descripción, solo borra “LA DESCRIPCION”, y no te aparecerá ninguna información.

5.- Si no desea que las imágenes se reproduzca automáticamente, deberás desactivar la reproducción automática. Has estos cambios, cambia de true a false

6.- Para cambiar el intervalo de tiempo entre diapositivas solo necesitaras editar  2000   por el valor que usted desee.

¡Eso es todo!

7.- Por ultimo de un clic en "Guardar" y listo

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

145 comentarios:

  1. Buen post webmaster, ya lo hice y me salio gracias por ayudarnos,, saludos....

    ResponderEliminar
  2. Hola me encanto pero no me funciono tarde mucho subiendo la fotos y todo no se por que me podrías ayudar?

    ResponderEliminar
    Respuestas
    1. Buenas tardes broder buscando algo asi me encontre con este trabajo hecho por tu persona, trabajo mi pagina en bligoo.com fijate que el codigo funciona al 100 pero me bloquea el editor de la pagina, osea al introducirlo me funciona, pero cuando necesito bolver a entrar para agregar mas cosas a mi blog me bloquea el editor. que sera, agradeceria una respuesta. gracias.

      Eliminar
    2. si sirve mucho es bonito lo malo es que no se puede poner zoom

      Eliminar
  3. Muchísisisimas gracias. Estuve quebrándome la cabeza para encontrar un slide que me funcionara y que se viera bonito.
    Este es estupendo. Justo lo que necesitaba.
    Gracias mil. Me suscribo a tu canal.

    ResponderEliminar
  4. Gracias la galeria me funciono bien!!!!

    ResponderEliminar
  5. muy bueno el Slideshow, te mando un correo para preguntarte si has resuelto de que el codigo ajuste la imagen al tamaño elegido y no que lo corte. muchas gracias

    ResponderEliminar
  6. hola.. una pregunta.. se pueden poner 2 slideshows? porque lo he intentado, y solo se ve uno

    ResponderEliminar
  7. ME ENCANTO !! MUCHAS GRACIAS =) ME HA SIDO DE MUCHA AYUDA, FACIL, SENCILLO Y VISTOSO
    SALUDOS

    ResponderEliminar
  8. Hola Dualidad Alterna, de nada, recuerda que cualquier pregunta que necesites saber solo hasmelo saber y te respondere de inmediato.
    Saludos..

    ResponderEliminar
    Respuestas
    1. Lo hice en un gadget; sin embargo cuando hago otro gadget igual, aunque no tenga las mismas imágenes, se ve igual. Me gustaría saber como hacer que se vean las imágenes del otro gadget

      Eliminar
  9. tengo un problema, cuando cargo mas de 5 imagenes no se muestra el slideshow, necesito poner 35 imágenes pero cuando pongo la imagen numero6 desaparece el slideshow sw la pagina.

    ResponderEliminar
  10. Hola Juan Sánchez, tal vez algo estas haciendo mal, ya que el truco de la inserción de código es muy fácil, necesito saber en que parte lo estas aumentando, para poder darte las instrucciones a seguir.
    Saludos.

    ResponderEliminar
  11. Efectivamente, algo estaba haciendo mal, cuando copie el código al editor de textos, este quitaba una (,)(coma) del final de los liks con lo que no cerraba cuando los modificaba y guardaba.
    cambie el editor de textos y guarde los cambios y funciona a las mil maravillas.

    Gracias por el tiempo que dedicas a compartir lo que sabes y matarnos las dudas.

    ResponderEliminar
  12. Hola Juan, de nada, recuerda que cualquier cosa que necesites o quieras tener mas widgets en tu blog de blogger, gustosamente te ayudare.
    Saludos.

    ResponderEliminar
  13. Hola! es muy buena esta galeria, queda muy bien ya la utilice en dos blogs quiero hacerte una consulta, en este caso lo estoy utilizando a modo de banner en la pagina principal y me preguntaba si es posible quitar el menu desplegable con los botones play-pause, etc para que solo se vean las imagenes pero que no sea posible pausarlo. gracias!

    ResponderEliminar
  14. Hola. La Fontana, si es posible realizar el truco que tu quieres, lo unico que necesitas es borrar algunos codigos nada mas. Busa este codigo: images: [ 'Y BORRA TODO LO QUE SE ENCUENTRA AQUI Y DEJALO HASTA EL CIERRE '], en conclusion solo borrar lo que esta dentro de los caracteres que indique y nada mas.
    Espero haber sido lo mas explicativo posible, recuerda cualquier pregunta no dudes en hacermelo saber
    Saludos..

    ResponderEliminar
    Respuestas
    1. Hola Luis, y muchas gracias por ayudarnos tanto.

      Estoy intentando hacer este truco como dices y lo único que desaparece son las imágenes de los botones, pero el menú sigue desplegándose al pasar el ratón. Me imagino que estaré haciendo algo mal.

      Entiendo que donde pone:

      images: [ 'http://2.bp.blogspot.com/-LzMDVlVfxmQ/TlVybqSABOI/AAAAAAAAEx8/riOJdIu1eRc/s400/left.gif', 'http://1.bp.blogspot.com/-ZkATWoPt8Q8/TlVybVMA4xI/AAAAAAAAExs/zoAjOL7erWY/s400/play.gif', 'http://4.bp.blogspot.com/-IlIucHdUM-I/TlVybkMej0I/AAAAAAAAEx0/yQvxG-paQVc/s400/right.gif', 'http://1.bp.blogspot.com/-qdHg1fyty6A/TlVybOlRciI/AAAAAAAAExk/oio-_kn2KO8/s400/pause.gif'], //nav panel images (in that order)

      Debo dejarlo así:

      images: [ ''], //nav panel images (in that order)

      Pero ni haciéndolo así ni aplicando alguna variación sobre esto deja de aparecerme el menú desplegable.

      Gracias por todo.

      Eliminar
  15. Buenos días Luis, gracias por este tutorial, lo he hecho pero se queda alineado a la izquierda, me podrías ayudar para centrarlo?

    ResponderEliminar
  16. Hola Aquario, el codigo que se encuentra en este post esta centrado, y no tiene por que aparecerte a la izquierda talvez algo estas haciendo mal, si necesitas mi ayuda enviame el link de tu blog para yo poder ver que es lo que estas haciendo mal.
    Saludos..

    ResponderEliminar
  17. Luis, al final eliminé el código porque no veia como solucionarlo. En cuanto vuelva a repetirlo si veo que me vuelve a salir a la izquierda te envío el link.Gracias y Saludos.
    Hoy he vuelto a plantear otra duda (antes de ver esta respuesta :))

    ResponderEliminar
  18. ya pude poner mi galeria pero las imagenes no me salen del tamaño son muy peqeñas.. :(

    ResponderEliminar
  19. Hola Maii, recuerda que tus imagenes deben de tener 250X250 pixeles, con eso tus imagenes apareceran en en todo el cuadro de tu slideshow,
    Saludos..

    ResponderEliminar
  20. Hola!
    Me ha encantado.
    Mi pregunta, al parecer de alguna manera te la hicieron ya, pero aja... yo probare.
    Las imágenes me salen cortadas, pero se que es por el tamaño que manejo y no es algo que me preocupe pero salen alineadas a la izquierda, hay alguna forma que se muestre la imagen desde el centro, aunque se corte.
    Gracias!

    ResponderEliminar
  21. Hola Mariajose, realiza este paso:
    1.- Cambie el tamaño de todas sus imágenes a un tamaño fijo. Para cambiar el tamaño de edición de imagen lo podrá realizar donde está marcado de color amarillo 300, 200 donde 300 es el ancho y 200 es la altura. Si sus imágenes son de mayor tamaño entonces se recortarán y no cambiaran de tamaño, pero si serán mostrados. Así que es mejor cambiar el tamaño manualmente de las imágenes y lo puede realizar en Photoshop o en cualquier otro software que usted utilice y proceda a continuar.
    Cambia 250 de ancho y 250 en la altura. Como puedes ver en mi blog yo tengo insertado el mismo codigo y las imagenes no se ven a lado izquierdo.
    Espero te haya sido de mucha ayuda.
    Cualquier pregunta no dudes en hacermelo saber.
    Saludos.

    ResponderEliminar
  22. Hola-hola!
    pasando a molestar nuevamente.
    Quisiera saber si hay alguna forma de quitar la pausa y el play, que solo quedasen las flechillas.
    Gracias!
    ^-^

    ResponderEliminar
  23. Hola, un gusto saludarte
    Tengo una consulta, me gustaria usar el slider para postear noticias, es decir, para ponerlo en mis post cuando quiero pasar alguna serie de imagenes, el problema es que lo hago como post en la opcion HTML y cuando lo posteo no aparece nada. Me podrias ayudar te lo agradeceria mucho. Puedes responderme al correo: scribeconsultas@gmail.com

    ResponderEliminar
  24. Hola Diana, ok ya te envie un email a tu correo, para poderte ayudar, es un truco facil de rehablizar, saludos..

    ResponderEliminar
    Respuestas
    1. A mi me ocurre lo mismo, ¿Podrias ayudarme? Muy amable. :D dulceinspiracion3 @ gmail.com

      Eliminar
  25. hola luis, una consulta, al mover el gadget a la cabecera no puedo, ya que tengo el menu, hay alguna manera de poder ponerlo ahi?

    ResponderEliminar
  26. Hola, es un poco dificil de explicar por este medio, lo que tu dices es un truco muy facil, si quieres que te indique como hacerlo, enviame un email directo a esta direccion: ayudadeblogger@gmail.com
    Y con mucho gusto te ayudare
    Saludos.

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

    ResponderEliminar
  28. Hola Alejandro, he visto tu blog, a tu pregunta, algunas imagenes estan centradas y otras no lo estan. Las imagenes que no estan centradas en tu slideshow es porque son pequeñas y no se ajustan al tamaño del slideshow. Vi en tu blog que tu slideshow tiene una dimension de 600x400, entonces que quiere decir esto, que la imagen debe tener estas dimensiones, es por esto que algunas imagenes no te salen centradas, ya que deberias ajustar su tamaño en photoshop.
    Espero haber sido lo mas explicativo posible.
    Saludos.

    ResponderEliminar
  29. ola luis , sabes agrande el slides . pero las imagen siguen del tamaño pequeño , pues si me dices en que parte del cod, se pueden agrandar, te los agradeceria y si muy buen post

    ResponderEliminar
  30. Hola, si agrandastes el slider en esta parte dimensions: [300, 200],debrias agrandar tambien tus imagenes dependiendo las dimensiones que le hayas colocado en tu slideshow, recuerda agrandar las imagenes a la dimension de tu slider.
    Saludos.

    ResponderEliminar
  31. Hola!
    Una duda, se puede usar en las Entradas o solo en Paginas, porque en Entradas no me funciono!!!

    Slds

    ResponderEliminar
  32. Hola Pablo, si se puedo usar en las entradas de cada post, solo mira en este post lo tengo puesto en mi estrada, en la parte que dice:
    Por favor vea la demostración en este post.
    Saludos.

    ResponderEliminar
  33. Hola, te felicito. Es un gran slide show y funciona de maravilla!
    Estoy muy feliz porque ningún otro me había funcionado.
    Saludos!!!!

    ResponderEliminar
  34. Una pregunta, como hago que no se vea en las entradas? Lo quiero sólo en la página principal. Saludos y gracias!!

    ResponderEliminar
  35. Hola Camila, este slideshow, esta creado para que te apresca en la entrada de cada post, tambien lo podras poner en el sidebar del blog, y por ultimo tambien lo podras poner en un widget abajo de tu menu principal para que apresca solo ahi. Abre un gadget que estese abajo de tu menu, y inserta el codigo en tu nuevo widget eso es todo, recuerda que para que se vea grande tendras que buscar este codigo [300, 200], eso es todo, cualquier pregurnta no dudes en hacermelo saber y de inmediato te respondere saludos.

    ResponderEliminar
  36. Ok, entonces como hago para que no esté tan pegado al título de la entrada. Mira: http://www.camifaster.com/2013/02/tracklist-who-loves-or-not.html
    Quisiera separarlo, padding algo así? En que parte lo modifico?
    Mil gracias por tu atención.

    ResponderEliminar
  37. Hola Camila, abre tu entrada y habilita la casilla HTML, y busca el titulo de tu entrada y encima de ella coloca este codigo
    y con eso se separara el titulo de tu entrada con la del slideshow, inserta cuantas veces quieras hasta que te de el aspecto que tu quieras.
    Saludos.

    ResponderEliminar
  38. Exelente post maestro ya esta puesto en mi blog, estaba buscando como loco un buen slider porque los que encontre me causaban problemas con el jquery, mil gracias si puedes revisas mi blog para que veas que esta perfecto, saludos de antemano ,gracias nuevamente.

    ResponderEliminar
  39. aqui esta : http://pildoradeideas.blogspot.com/

    ResponderEliminar
  40. Hola Franz, he visto tu blog un excelente trabajo que has realizado. Te felicito te quedo perfecto.
    Saludos.

    ResponderEliminar
  41. Gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias, gracias ... y así podría seguir durante 3 días, que es el tiempo que llevo buscándolo! (ninguno de los gracias es copiado XD).

    Ha quedado perfecto!

    Un saludo!

    ResponderEliminar
  42. Hola Jose, de nada y gracia por tus gracias.
    Saludos.

    ResponderEliminar
  43. Gracias Luís, es fantástico; Sin estos tutoriales no habría sido posible mi blog..Pero no puedo poner dos o más sliders de este tipo en el mismo blog(los quiero utilizar como anuncios).. el último siempre anula a los demás. Sabes alguna solución??
    Gracias
    Rosa

    ResponderEliminar
  44. Hola, con respecto a tu pregunta si lo pones en tu sidebar, funcionara correctamente, y si lo usas en tu post tambien funcionara, pero al momento que le pongas en tu post y en tu sidebar, solo aparecera en tu post. Logicamente esto es algo ilogico, pero asi funciona este codigo. La unica solucion es que utilices este slideshow en tu sidebar para que promociones tus anuncios, y en tu post podras colocar otro slideshow con diferentes lineas de código, por ejemplo, utiliza este post en la cual esta un slideshow, aqui te dejo el enlace: http://www.ayudadeblogger.com/2012/10/necesito-un-slider-para-mi-blog-de-blogger.html
    Realiza todos los pasos que se encuentra en el post que te envie, y en el paso 7, copia todo ese codigo del paso 7 y pegalo en una entrada osea en tu post, eso es todo, espero haber sido lo mas explicativo posible.
    Saludos.

    ResponderEliminar
  45. GRACIAS LUÍS POR TU RESPUESTA, pero el problema me aparece cuando quiero aplicarlo como gadget HTML/Java, en el sidebar y quiero poner más de uno. Ya tengo uno colocado..y si coloco otro(con otras fotos links, etc)sólo me aparece el último bloqueándome digamos el anterior
    Muchas gracias, y muchas gracias por el nuevo enlace
    Rosa

    ResponderEliminar
  46. Este slideshow, solo puede funcionar con un solo wigdet y si pones todo este codigo en otro widget ya no te funcionara por que crea conflictos de codigo, es por eso que no te aparece.
    Saludos.

    ResponderEliminar
  47. Muchísimas gracias....!!!! Es fantástico....!!!!
    Pero, si prefiero que no haya posibilidad de que el usuario use el PAUSE o las flechas hacia adelante y atrás, ¿cómo tengo que quitarlo? Es decir, que sea un slideshow automático e invariable.
    ¡Gracias de nuevo y saludos!

    ResponderEliminar
  48. tan lindo pero No me sirve no sale nada :/

    mi blog http://www.tomepalpinto.com

    ResponderEliminar
  49. Corretoo está perfetoo
    es lo que estaba buscando muchas gracias :)

    ResponderEliminar
  50. lo pongo en codigo html en mi pagina y no me aparece nada hermano me podrias mandar el codigo o el truco html para que me aparesca en mi pagina este es mi correo gracias lanuevalamejor@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, no tienes que ponerle en el codigo HTML de tu blog, mira, realiza lo siguiente, abre blogger.com, luego da un clic en "Diseño" y otro clic en "Añadir un gadget", luego buscas el widget que dice "HTML/Javascript" lo abres e insertar todo el codigo que esta en el paso 4 de este post. Y realiza los cambios tal y cual lo explico.
      Espero lo hayas logrado,
      Saludos.

      Eliminar
  51. como puedo poner mas de 5 imagenes???

    ResponderEliminar
    Respuestas
    1. Hola solo debes aumentar este codigo las veces que tu quieras..
      ["PONER EL LINK DE LA IMAGEN 5", "#", "_new", "LA DESCRIPCION "]
      Nada más.

      Saludos.

      Eliminar
  52. YA NO FUNCIONA O POR LO MENOS AMI NO ME FUNCIONA

    ResponderEliminar
    Respuestas
    1. Algo debes estar haciendo mal, el widget funciona perfectamente

      Eliminar
  53. Hola Luis, excelente código, lo estuve buscando mucho y hasta que llegué a tí.. muchas gracias, felicitaciones y Bendiciones.. Una pregunta que necesito por favor: Cómo hago para quitarle los links; es decir, quiero que sólo pasen las fotos pero que no aparezca "la manito" ni que me lleve a ningún lado, sólo que quede ahí... Gracias de antemano por tu respuesta.

    ResponderEliminar
    Respuestas
    1. Hola, es facil no cnfigures nada en el paso 3 que dice:
      3.- Reemplace # con el enlace de la página, la cual cuando un visitante le dé un clic a cualquier imagen, les llevara a una página que usted quiere que vean de su blog de blogger. Pero si usted no desea poner un link para que se abra cualquier post suyo, solo tiene que borrar # y no les llevara a ninguna pagina.

      Solo esta parte no lo hagas y con eso no te enviara a ningun link
      Saludos.

      Eliminar
  54. Hola, te hago otra consulta, no sabes como usar un jquery?, en internter esta lleno de esos scripts,pero como los uso? los puedo usar en alguna entrada? muchas gracias y disculpa tantas preguntas

    ResponderEliminar
    Respuestas
    1. jQuery es considerado un Framework de Javascript, o ambiente de desarrollo. Lo que no es más que un conjunto de utilidades las cuales no necesitan ser programadas, de hecho ya fueron programadas, probadas y podemos utilizarlas de una manera muy simplificada.

      En otras palabras, podremos lograr los mismos resultados, en menos tiempo sin necesidad de programar una funcionalidad completamente.

      Saludos.

      Eliminar
  55. Muchas gracias por el tutorial. Conseguí que me funcionara pero al tener unas imagenes tan desiguales de tamaño...no luce . Cachis!! porque quedaría genial si no fuera por las imagenes :_(

    ResponderEliminar
  56. Hallo Luis,primera vez que veo este Blog y ya te tengo en mis marcadores,me encanto...

    Tengo 4 blogs,esta galería lo coloque en este Blog

    http://jfplanetokiohotel.blogspot.com/

    Quiero preguntarte 2 cositas..
    1- Como hago para que me quede mas al centro del Blog?

    2-Como hago para eliminar el cuadro? que sea de color negro? no se si me explique bien.

    Le voy a colocar mas imágenes...

    Gracias por compartir lo que sabes.Saludos desde Venezuela


    ResponderEliminar
  57. Disculpa lo elimine...pero igualemnet siempre esatré pendiente de aquí,me gusta mucho cambiar los Blogs
    es que yo lo que quiero hacer en realidad es algo como hice en este
    Blog
    http://jfplanetnine.blogspot.com/

    Pero quiero que la imagen superior sea mas grande,me gustaría saber si el espacio que ocupa el título del Blog y la descripción se pueden eliminar

    Gracias...

    ResponderEliminar
  58. Disculpa lo elimine...pero igualmente siempre estaré pendiente de aquí,me gusta mucho cambiar los Blogs
    es que yo lo que quiero hacer en realidad es algo como hice en este
    Blog
    http://jfplanetnine.blogspot.com/

    Pero quiero que la imagen superior sea mas grande,me gustaría saber si el espacio que ocupa el título del Blog y la descripción se pueden eliminar,creo que encontre eso aquí

    http://ciudadblogger.com/2009/06/eliminar-titulo-y-descripcion-de.html


    Gracias...

    ResponderEliminar
    Respuestas
    1. Hola apara cambiar el ancho y la altura del slider es en este punto: dimensions: [300, 200 y si no quieres que se muestre ninguna descripcion en el slideshow, no pongas nada donde dice LA DESCRIPCION,
      Saludos.

      Eliminar
  59. Hola Luis, te pregunto respecto a la galeria de imagenes mi idea es hacer una página en mi blog, soy productor de arándanos en Argentina, el título del mismo sería "Arandanosd Fotos" y insertar aquí la galería de imagenes..el código que citas lo colocaría en la vista HTML es correcto? El tamaño de las imagenes de 300 x 200 sería mejor recortarlas manualmente o la dejo como están en tu código?
    Muchas gracias por toda la ayuda que puedas brindarme.
    Saludos!!

    ResponderEliminar
    Respuestas
    1. Hol sobre tu pregunta es correcto deberas insertar el codigo en el modo HTML del post y las imagenes te recomiendo que cambies el tamaño y que esten de 300 x 200 con eso te mostrara las imagenes mas elegantes en tu blog y sebera super bien.
      Saludos.

      Eliminar
    2. Gracias Luis, me encuentro ahora intentando, me cuesta fijar las imagenes que me gustan en 300 x 200, ya que en algunas preponderá el ancho y en otras preponderá el alto...
      me quedan de 169 x 300 otras de 300 x 169, no puedo fijarlas en la medida que vos aconsejás. Yo trabajo con Microsoft Office 2010 que te parece, mientras te espero continuo trabajando.
      Muchas gracias por tu importante ayuda. Saludos!!

      Eliminar
    3. Hola Luis, acabo de hacer todo como explicás, finalmente inserte el código en el widget, con 5 imagenes, de las cuales 3 son mayores de 300 x 200. Esas 3 no puedo cambiar tamaño porque se desequilibran, pierden la proporción.
      En el Blog aparece solo el título que coloqué en el widget "Arandano Fotos",y nada más. Serán el tamaño de la imagen? creo que el resto está todo bien. Espero tu respuesta. Muchas gracias!

      Eliminar
  60. solo se puede colocar 5 imagenes como puedo colocar mas por fa

    ResponderEliminar
    Respuestas
    1. Hola es facil solo deberas aumentar mas codigos como este despues del ultimo codigo 5 :
      ["PONER EL LINK DE LA IMAGEN 6", "#", "_new", "LA DESCRIPCION "]
      ],
      ["PONER EL LINK DE LA IMAGEN 7", "#", "_new", "LA DESCRIPCION "]
      ],
      ["PONER EL LINK DE LA IMAGEN 8", "#", "_new", "LA DESCRIPCION "]
      ],
      Saludos

      Eliminar
    2. amigo no puedo poner mas de 5 imagenes cual es el cambio ????

      Eliminar
    3. Hola, solo tienes que aumentar un codigo como el siguiente despues del termino del
      ["PONER EL LINK DE LA IMAGEN 4", "#", "_new", "LA DESCRIPCION "],

      Despues de la coma, inserta el siguiente codigo

      ["PONER EL LINK DE LA IMAGEN 6", "#", "_new", "LA DESCRIPCION "],

      Y asi Sucesivamente
      Saludos.

      Eliminar
  61. No, no me sale, mi blog es este: http://magickrishna.blogspot.mx/
    & Mi codificación final queda así (no le movi absolutamente nada mas al resto de la codificacion):
    [
    ["http://www.facebook.com/photo.php?fbid=10200296290842986&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Bienvenidos, pasa ♥"],

    ["http://www.facebook.com/photo.php?fbid=10200332831916490&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Ah!! Pero antes ve por un dulce ♥"],

    ["http://www.facebook.com/photo.php?fbid=10200371673807513&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "O por una taza de café ♥"],

    ["http://www.facebook.com/photo.php?fbid=10200373312248473&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Listo?... Ok ♥ "],

    ["http://www.facebook.com/photo.php?fbid=10200411267077320&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Recuerda que la vida está llena de cosas fantásticas y maravillosas ♥ "]

    ["http://www.facebook.com/photo.php?fbid=10200371674047519&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Que eres quien maneja tu tiempo…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200440090397885&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Que puedes crear tus sueños y cumplirlos…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200373325648808&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Recuerda que TÚ tienes la llave a lo que quieras hacer…♥ "],

    ["http://www.facebook.com/photo.php?fbid=10200339662167242&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Ten en cuenta que la vida debe ser divertida, dale el sentido que quieras…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200339554724556&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "& que eres hermosa…♥"]

    ["http://www.facebook.com/photo.php?fbid=10200445325568761&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Deseo que tu corazón este lleno de alegría y de felicidad…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200311624466317&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Que siempre tengas amor y cariño…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200411267557332&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "Que todos tus deseos se cumplan un día…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200339669287420&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "& recuerda levantarte diario con la esperanza de seguir siempre…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200411267797338&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "No olvides darle like a mi Facebook y sígueme en Twitter…♥"],

    ["http://www.facebook.com/photo.php?fbid=10200527348539284&set=a.10200339722528751.1073741826.1625220372&type=3&theater", "_new", "& gracias por visitar mi blog… ♥"] ],




    ---> QUE ESTOY HACIENDO MAL ?

    ResponderEliminar
  62. Hola estoy tratando de abrir tu blog pero no se abre por que la direccion que me dejaste es incorrecta.
    Enviame tu direccion de blog correctamente para poder verlo y ayudarte.
    Saludos.

    ResponderEliminar
  63. Muy bien explicado, cree mi galería sin ningún problema siguiendo tus indicaciones, gracias.

    ResponderEliminar
  64. Un pequeño problema, si añado alguna imagen mas a la galería esta no funciona, solo funciona si tiene 5 imágenes, ¿como se puede solucionar este pequeño problema? Gracias.

    ResponderEliminar
    Respuestas
    1. Puedes agregar todas las imagenes que deseas, asegurate colocar la coma al finalizar la lineas.
      ["PONER EL LINK DE LA IMAGEN 4", "#", "_new", "LA DESCRIPCION "],

      Eliminar
  65. Saludos, Luis como puedo colocar la galeria, en el centro de la pagina
    al crear el gadget la galeria se queda del lado izquierdo

    ResponderEliminar
  66. Amigo muchísimas gracias por este slide, es exactamente como lo estabamos buscando para nuestro website en Colombia, está del carajo, de verás muchas gracias por tomarte el tiempo y compartir tu conocimiento y ahorrarnos el trabajo a los perezosos, una abrazo desde Colombia brother.

    ResponderEliminar
  67. QURIDO AMIGO,
    He intentado varias veces colocar el código en mi blog y no he logrado que aparezca, intente hacerlo en un blog nuevo sin ningun resultado, mi blog es cesarobertein.blogspot.com, por favor me gustaría poner el código debajo de las pestañas, te agradezco que revises y me indiques que puedo hacer, muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola he visto el blog que me enviastes, y he notado que tienes habilitado un slideshow, este es el script que tiene tu blog : //www.google.com/uds/solutions/slideshow/gfslideshow.js ese es el problema ya que no pueden haber dos script de slideshow en tu blog de blogger ya que ocaciona problemas, mira create un blog de pruebas con una plantilla de blog sencilla, e inserta todo el codigo que se encuentra en este post, inserta los links de las imagenes y mira que funciona perfectamente y no te da ningun error.
      Saludos.

      Eliminar
  68. buenas me gustaría saber como colocar en el titulo de los widget esos colores como los que ud tiene, gracias.

    ResponderEliminar
    Respuestas
    1. hola si es lo que entendi aqui te dejo el enlace en la cual podras reazlizar ese truco: http://www.ayudadeblogger.com/2012/10/como-personalizar-la-cabecera-de-cada-barra-lateral-de-otro-color.html
      Saludos.

      Eliminar
    2. si ese mismo era gracias amigo.

      Eliminar
    3. si amigo ese mismo era gracias

      Eliminar
  69. Amigo gracias por tu primera respuesta, pero me gustaría saber cómo quito el script anterior para poder poner el que tu enseñas por aquí, no soy un experto, me gustaría que ayudaras en esto, gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola, abre el editor html de tu plantilla, luego presiona la tecla control de tu teclado seguido de la tecla f y ahi busca este codigo: //www.google.com/uds/solutions/slideshow/gfslideshow.js una vez que hayas encontrado el codigo borralo y luego le das un clic en Guardar plantilla, eso es todo.
      Saludos.

      Eliminar
  70. como centrarlo?? ya que yo... lo lo quiero poner en una pagina estatica!! y lo e puesto.. y ya agrande el espacio de la pagina para poderle dar un tamaño mas grande.. pero ahora como centro las imagenes y no se queden a un lado..??

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu blog, para poder verlo y darte las instrucciones.
      Saludos.

      Eliminar
    2. http://wwe-wress.blogspot.mx/p/blog-page.html esa es la pagina de mi blog en la cual lo quiero implementar.. :) de antemano gracias!!

      Eliminar
  71. Hola Luis!
    Ya he puesto la galería de imágenes y es perfecta. Gracias
    El único problema que tengo es que no se ve con el Explorer, pero sí con otros navegadores. Se puede solucionar?
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola la galeria de imaganes funciona perfectamente en todos los navegadores web incluido internet explorer.
      Saludos

      Eliminar
  72. Otra pregunta.
    Cómo puedo poner un texto para dar instrucciones de que al pinchar les llevará a otra página?
    Gracias

    ResponderEliminar
  73. Buenos días, me gustaría que apareciera centrado ya que ahora mismo esta en la izquierda y queda regular...

    Me pueden escribar a antoniorolop@gmail.com para solventarme el problema. muchisimas gracias de antemano.

    Un saludo.

    ResponderEliminar
  74. encantado de utilizar tu html me sirvio de mucho .....queda precioso....gracias...
    Visitar:http://avilaaerografia.blogspot.com.es/

    ResponderEliminar
  75. Hola, buenas noches.
    Funciona perfectamente, lo he puesto en una web.
    Sólo una pequeña duda, puedo quitar la barra que sale debajo de pause, avanzar, retroceder? Vamos, que sea invariable, que nadie lo pueda tocar y que corra siempre.
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola claro que se puede realizar ese truco, enviame directamente tu requerimiento a la siguiente direccion: ayudadeblogger@gmail.com
      Y redacta tu requerimiento, y con mucho gusto te envio el codigo sin las opciones que me solicitas,
      Saludos.

      Eliminar
  76. Hola Luis,

    Lo primero gracias por esta aportación que a todos nos gusta tanto. Mencionas que el tamaño es de 250x250, pero no encuentro cómo modificarlo. Por favor, si puede indicarme cómo modificar el tamaño del slideshow se lo agradecería mucho. Un saludo

    ResponderEliminar
    Respuestas
    1. Hola, casi al final del codigo enontraras con un codigo similar a este: [300, 200], donde 300 es el ancho y 200 la altura, tienes que cambiar esos numeros por el tamaño que quieras mostrar en tu slideshow, al igual tendras que tener en cuenta que las imagenes que vayas a mostrar en este slideshow tengan la misma dimension del slideshow.
      Saludos.

      Eliminar
  77. La mejor, mejor entrada sobre slides que he encontrado y la más fácil de montar para novatos como yo...muchísimas gracias !!!

    ResponderEliminar
  78. Gran blog !!! Sabes como poner botones? Gracias

    ResponderEliminar
  79. POrque me salen errores en el codigo al pegarlo ?

    ResponderEliminar
    Respuestas
    1. Copia todo el codigo tal como esta, realiza tu primera prueba y veras que funciona perfectamente.
      Saludos.

      Eliminar
  80. Luis muchas gracias por tus consejos estoy sin palabras de verdad..Saludos de Grecia

    ResponderEliminar
  81. Hola, gracias por el tutorial, me funciona perfectamente, justo lo que estaba buscando ya que mis imagenes son fijas en tamaño, pero una duda, me funciona bien si agrego solo hasta 8 imagenes, si agrego una novena ya no me aparece, no hay una forma de aumentar la cantidad de imagenes o ese es su limite?

    de antemano gracias :D adore este diseño de galeria!

    ResponderEliminar
  82. Hola, Luis, gracias! me ha ido perfecto el código, con imagenes de 1160 x 300 y queda perfecto... Tan sólo hay algo que me gustaría perfeccionar.
    Me gustaría saber cómo cambiar los simbolos de pause, play, left y right además de otra tipo para los números que indican en qué foto estás. n/n o eliminarlos.

    Esperando tu respuesta, un saludo y felicidades por el blog.

    Javier

    ResponderEliminar
  83. Hola Luis Como estas? Lo había colocado antes en otro blog,pero lo elimine...
    Siempre ando cambiando la apariencia de ellos y este slide es muy sencillo...
    Le voy a colocar mas de 5 imágenes.Funciona de maravilla,ya lo había utilizado.
    Aquí lo estoy estrenando...me falta en los otros 2 blogs que tengo...
    pero este es mi Blog principal,El Planeta Azul
    http://jfblueplanet.blogspot.com/
    Saludos desde Venezuela...:-)

    ResponderEliminar
  84. Hola Como estas Luis? Coloque de nuevo el slide,y me gusta como quedo,en este blog
    http://jfblueplanet.blogspot.com/

    Los comentarios no aparecen...creo que escribí en este año aquí,tal vez estés muy ocupado
    Como hago para que las lineas del cuadro sean de otro color?
    Como hago para cambiar el color de la fuente?

    ...Me imagino como es,pero no me atrevo a tocarlo,tal vez lo haga en un blog de prueba que tengo.
    Gracias por compartir.Saludos desde Venezuela

    ResponderEliminar
  85. Saludos....gracias por tu ayuda...pero no se ven las imagenes.....que debo hacer? otra consulta.....deseo realizar un formulario para que los usuarios suban archivos doc....pero no puedo hacerlo pues hay que pagar...que otra opción me ofreces para ello? gracias..espero tus respuestas

    ResponderEliminar
  86. Hola, qué tal. Me pareció super útil la información que compartes te felicito, he buscado mucho y tu post fue el mejor y funciona!!! El tema es que estoy armando un slideshow para la página principal de mi blogy quería saber cómo se podría hacer para quitar las flechitas de avanzar, retroceder y pausar, como así también la línea del borde del slide.
    Te agradeceré mucho si me puedas ayudar...
    Saludos, Romina.

    ResponderEliminar
  87. HOLA LUIS AMIGO, LA VERDAD ME HA SIDO DE MUCHA AYUDA TU POST, LO QUE SI NECESITO QUE ME AYUDES.

    FUNCIONA TODO CORRECTAMENTE, SOLO QUE NO ME MUESTRA LAS IMAGENES.

    Te dejo mi BLog, para que puedas visulaizarlo y darme una ayuda.

    desde ya un millon de gracias.
    http://ricardopalavecino.blogspot.com.ar/

    ResponderEliminar
  88. Hola Luis, no se si ya lo verás, pero primero feliz año, necesito una ayuda tuya, cuando lo pongo en la barra izquierda del blog el cuadro me sale demasiado grande y me engancha en la entrada, hay alguna posibilidad de ajustarlo a un tamaño diferente?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Si este truco no lo puedes realizar te recomiendo ver otras opciones en el siguiente enlace: http://www.ayudadeblogger.com/search/label/Slideshow
      Saludos.

      Eliminar
  89. Hola Luis, acabo de hacer exactamente lo que dijiste acá para crear mi Slideshow, pero quiero cambiarle el ancho (que sea del tamaño de a plantilla) y que las fotos se vean fuera de las entradas junto con sus leyendas. Mi blog es http://turismoenelvalledelmocoties.blogspot.com Saludos!

    ResponderEliminar
    Respuestas
    1. Hola sobre tu pregunta ¿Cómo cambiar el tamaño de Slideshow? Puedes cambiar el tamaño del Slideshow donde esta marcado de color amarillo 300, 200 : Donde 300 es su anchura y 200 es su altura.. Saludos.

      Eliminar
  90. Hola Luis, me funciono bien. Pero quise hacer otro post con el codigo que nos facilitas, y ya no funciona. Solo puede haber un slideshow por blog?
    Saludos,

    ResponderEliminar
    Respuestas
    1. Hola, puede haber los slideshow que quieras mostrar en cualquier post de tu blog de Blogger, sea o no de Blogger, este codigo sirve para cualquier plataforma web. Tal vez algo estas haciendo mal. Saludos

      Eliminar
  91. Hola, quisiera saber como puedo quitar la barra que aparece abajo del slideshow (pausa, avanzar y retroceder). Te lo agradecería.

    ResponderEliminar
  92. Muchas gracias por la información. Quiero preguntarte que modificar para que las letras de la descripción salieran mas grandes. Saludos.

    ResponderEliminar
  93. Hola Luis!

    de antemano muchas gracias por estos aportes geniales.

    tengo una consulta, he querido poner este Slideshow en una entrada, lo que me sale es la secuencia de imagenen en modo autoplay, pero cuando pongo false no me sale ningun boton para ir cambiando de imagene.

    cuando pongo el codigo en la entrada me sale unas leyendas de error con HTTP con HTTPS, será que no se puede usar para entradas?

    Saludos y mil gracias!

    ResponderEliminar
    Respuestas
    1. Hola Ronald, debe ingresar el código en modo HTML de su entrada, ademas, si usted esta utilizando el protocolo HTTPS, deberá desactivarlo, ya que crea conflictos con dicho protocolo, pero si le esta mostrando dicha información en una entrada en la parte superior como un mensaje, descartelo que no sucede nada. Este truco de Blogger funciona perfectamente en las entradas de su blog y en los widgets

      Saludos

      Eliminar
  94. Como puedo subir las fotos? Agradecería su respuesta

    ResponderEliminar
    Respuestas
    1. Hola Helen, gracias por escribir, las imágenes por lo general primero deberá subirla en una Entrada y dicha entrada guardarlo como borrador, luego ingresa nuevamente a la entrada que usted guardo como borrador y copiar la dirección URL de una de sus imágenes, por ejemplo, esta es una dirección URL de una imagen:

      https://3.bp.blogspot.com/-aXgDmY97oG0/VyVOXOfc_JI/AAAAAAAAK8Q/ZMynIHI-pHsCF-rob3yjlOKss8LfBFb5QCLcB/s1600/galeria-de-imagenes-para-blogger.png

      Saludos.

      Eliminar
  95. Me ha sido de gran ayuda lo utilizo en https://juananolipnl.blogspot.com.ar/
    Quisiera consultarte si hay una manera de centrar el slide en el widget.
    Gracias de antemano !!

    ResponderEliminar
  96. Hola Luis: 2 preguntas: No consigo eliminar el boton de play y pausa, no se exactamente en que parte del codigo de images hay que quitar.
    La otra pregunta es si al pinchar la imagen, se vaya al enlace pero en la misma pestaña que está abierta, y no que me abra una pestaña nueva. Mi blog es de reseñas literarias y prefiero que permanezca en la misma pagina y no se empiecen a abrir pestañas nuevas cada vez que entre a mis recomendaciones. Gracias de antemano

    ResponderEliminar
  97. hola me estoy iniciando con el tema de las paginas web, e incie un blog en blogger para probar, hasta ahora todo muy facil hasta que se me ocurrio la idea de colocar una galeria de fotos sobre varios trabajos que he ralizado reparando computadoras, entonces me tope con tu blog en el cual publicas este código html, css con jS, el cual el resultado es una galeria muy sencilla y excelente justo lo que necesitaba, pero ahora el tema! en una sola pagina necesito poner varias galerías de los trabajos que he realizado reparando computadoras ya que con tu código logre colocarlo en una pagina y funciono excelente pero me gustaría que no fuera una sola sino varias, espero me entiendas y me puedas apoyar un poco, gracias de antemano! saludos y bendiciones

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, cual es la dirección URL de su blog donde esta agregado el slider. Saludos

      Eliminar
  98. Muchas gracias por la ayuda pero ¿Me podrían decir cómo orientar al centro las imágenes?

    ResponderEliminar
  99. Cordial saludo. Una excelente ayuda para todos, mil gracias. Si fuera posible, podría colaborarme indicándome, si es posible hacerle un cambio para que la reproducción de las imágenes sea aleatoria. Nuevamente muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, con respecto a su pregunta con este diseño no es posible, se tendría que hacer una serie de cambios.

      Eliminar