Slideshow galería de imágenes para blogger


Quieren insertar en su blog de blogger un slideshow galería de imágenes para blogger con un simple código y que no le cause ningún daño en la estructura de su blog y sobre todo que tenga una carga ligera al momento de abrir su blog? En este tutorial para blogger aprenderán a insertar un código en su blog para realizar este truco para blogger. Este nuevo código lo podrán insertar en una entrada o en un widget y ubicarlo donde ustedes quieran. Vamos a utilizar un código frágil y sencillo para realizar este truco, deberán tener las imágenes cargadas en su blog y tendrán que tener una dimensión de 300 X 300 pixeles, y si quieren hacerle más grande la galería de imágenes, solo tendrán que aumentar la dimensión de cada imagen y que sea exacta. Este nuevo slideshow galería de imágenes para blogger, funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer, etc.

Slideshow galería de imágenes para blogger

Además, si necesitan saber más trucos de slideshow para blogger, les dejo algunos post que publique anteriormente

  1. Como agregar a mi blog de blogger un Slideshow automatico
  2. Como crear un Slideshow manual para mi blog de blogger
  3. Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
  4. Como hacer un Slideshow Carrusel basado en etiquetas para blogger
  5. Como insertar un Menú desplegable y un Slideshow para blogger
  6. Como insertar un Slider Carrusel en blogger
  7. Como insertar un Slideshow en Blogger simples pasos
  8. Galería de imágenes para blogger
  9. Galería de imágenes para blogger V3
  10. Instalar un Slideshow para blogger con un solo widget
  11. Mostrar un Slideshow con mis entradas populares para blogger
  12. Necesito un Slider para mi blog de blogger
  13. Nuevo estilo de Slideshow para blogger
  14. SlideShow con control deslizante para blogger
  15. Slider carrusel para blogger
  16. Slider para blogger en 3D
  17. Slideshow con Entradas Populares Nuevo estilo
  18. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  19. Slideshow para Blogger
  20. Slideshow para blogger blogspot con etiquetas
  21. Slideshow para blogger con un solo widget
  22. Slideshow para blogger manual nuevo estilo
  23. Slideshow para blogger nuevo estilo
  24. Slideshow para blogger versión 4
  25. Slideshow vertical para usarlo en blogger
  26. Widget Galería de Imágenes para blogger V2
  27. Widget Slider galería de imágenes acordeón para blogger
  28. Widget Slideshow para blogger
  29. Widget para blogger, Slideshow con Entradas Populares
A continuación mire su demostración en este post


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Si quieren insertar este slideshow galería de imágenes en una entrada, solo tendrán que copiar el siguiente código

<style type="text/css">
#slideshow {
  width:405px;
  height:300px;
  background-color:#222;
  margin:0 auto;
}

#slideshow img {display:block;}
</style>
<div id="slideshow"></div>
<script type="text/javascript">
//<![CDATA[
(function() {
    var container = document.getElementById('slideshow');
    var slide = [
        "http://1.bp.blogspot.com/-PxK0qxs5Q7g/UmK175T4T-I/AAAAAAAAFIk/KCzF3Y5LvOA/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "http://2.bp.blogspot.com/-GzCll58mkKI/UmK2LUaDqVI/AAAAAAAAFIs/Z5_N7bFnRDo/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "http://2.bp.blogspot.com/-CwAuNY-io68/UmK2mP0GsGI/AAAAAAAAFI0/kGZsZz2QgMM/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "http://2.bp.blogspot.com/-oE-d7uDkO8A/UmK3hI7fJyI/AAAAAAAAFJE/y678FmydfyA/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "http://2.bp.blogspot.com/-t2neFMn7pTk/UmK32iYo58I/AAAAAAAAFJM/KEu6otjkAB8/s1600/slideshow+galeria+de+imagenes+blogger.JPG"
        // dst...
        ];
    var count = 0;
    setInterval(function() {
        container.innerHTML = "<img src='"+slide[count]+"' alt='Slide "+(count+1)+"'>";
        count++;
        if (count == slide.length) {
            count = 0;
        }
    }, 3000); // Valor de carga...
})();
//]]>
</script>

Realiza estos cambios:

Existen 5 URL que están marcados de color azul, esas URLs sirven para mostrar las imágenes en el Slideshow galería de imágenes, tendrán que cargar una imagen con una dimensión de 400x300 pixeles.

Si quieren hacer su presentación más grande, basta con encontrar este código

width:405px;         Es su ancho
height:300px;        Es su altura

Así mismo tendrán que cambiar la dimensión de las imágenes al momento de cambiar su ancho y altura

Y por último publica tu post

3 Si deseas insertar este Slideshow galería de imágenes en un widget y ubicarlo en el sidebar de su blog, sigue las siguientes instrucciones

3.1 Da un clic en “Diseño

Slideshow galería de imágenes para blogger

3.2 Abre un gadget “Añadir un gadget

Slideshow galería de imágenes para blogger

3.3 Busca el widget que dice “HTML/Javascript


3.4 Ábrelo e inserta el siguiente código en su interior

<style type="text/css">
#slideshow {
  width:300px;
  height:300px;
  background-color:#222;
  margin:0 auto;
}

#slideshow img {display:block;}
</style>
<div id="slideshow"></div>
<script type="text/javascript">
//<![CDATA[
(function() {
    var container = document.getElementById('slideshow');
    var slide = [
        "AQUÍ LA DIRECCION URL DE LA IMAGEN 300X300 PIXELES",
        "AQUÍ LA DIRECCION URL DE LA IMAGEN 300X300 PIXELES",
        "AQUÍ LA DIRECCION URL DE LA IMAGEN 300X300 PIXELES",
        "AQUÍ LA DIRECCION URL DE LA IMAGEN 300X300 PIXELES",
        "AQUÍ LA DIRECCION URL DE LA IMAGEN 300X300 PIXELES"
        // dst...
        ];
    var count = 0;
    setInterval(function() {
        container.innerHTML = "<img src='"+slide[count]+"' alt='Slide "+(count+1)+"'>";
        count++;
        if (count == slide.length) {
            count = 0;
        }
    }, 3000); // Valor de carga...
})();
//]]>
</script>

Realiza estos cambios:

Inserta la URL de la imagen que quieras mostrar donde dice AQUÍ LA DIRECCION URL DE LA IMAGEN 300X300 PIXELES , recuerda que la imagen que subas debe tener una dimensión de 300x300 pixeles

Eso es todo, ahora dale un clic en “Guardar”, y mira los nuevos cambios en tu blog

Fácil verdad!

Recuerda suscribirte a mis nuevas actualizaciones

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

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

9 comentarios:

  1. Hola Luis,
    he insertado tu código en una entrada y en un widget , he ajustado las dimensiones y me sale siempre un rectángulo negro.
    Quiero hacer otras cosas, pero no me atrevo porque tengo que modificar el Html.
    Si no me funciona el más sencillo imagínete el más difícil.
    Yo no se como copiar los datos de mi blogger. La copia de seguridad solo me salvaguarda la estructura, por lo tanto tu me entenderás que hay un cierto temor a modificar el html.
    Saludos Pino
    Mi bloger : http://dietapino.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, y sobre lo que me indicas esta explicado claramente en este post como realizar este truco, y no tengas miedo de hacer varias modificaciones en tu blog, que de los errores se aprende.
      Saludos.

      Eliminar
  2. Hola Luis , muchas gracias por el código me sirvió muchísimo , pero tengo un problema, quiero poner todas mis entradas como galerías pero en la última entrada me salen las imágenes de la primera y en la primera no me salen fotos ... porfavor necesito tu ayuda urgente!! .. te agradecería mucho .. gracias

    ResponderEliminar
  3. Excelente me funciono muy bien, pero siempre al iniciar el Slide tarda el tiempo que se definió, en arrancar con la primera imagen, mientras tanto muestra el fondo. vi que al que tienes de muestra le sucede lo mismo. tienes idea como hacer para que inicie directamente con la primera imagen. saludos.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, con respecto a su pregunta, el código es muy simple y definido, por el cual mientras cargan los datos aparece el fondo negro.

      Saludos.

      Eliminar
  4. seria perfecto si pudiera colocarle enlaces a cada imagen para re-direccionar al darle clic a la imagen

    ResponderEliminar
  5. Una pregunta como hago, para que la imagen se maximice al dar click sobre ella, en la galería que cree con este codigo?
    es que no me lo permite

    ResponderEliminar
    Respuestas
    1. Hola Costa Larimar, con respecto a su pregunta, el código proporcionado es muy simple, en otro tutorial publicare un tema relacionado sobre lo que usted esta necesitando.

      Saludos.

      Eliminar
  6. Me gustaría poder agregarle LINKS... sera posible?

    ResponderEliminar