Home Slideshow Slideshow galería de imágenes para blogger

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 = [
        "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiTJrZoTfZDyFQmDvR_5I-xLot4NQSTXyKHArQaRhP6SfRFChWaRaN_kF21bcOX5yQcoecxaSuXMq0UlPvQnKII-ABYj4a0AYoRc1ExpGj-YGZMfIpAnZOMB-X_GG7lESInKxcm1BxpZ4/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vgkmILWcmWz7-HR76CitzdbrylASCL-wMpg7zBWZn5bTbXnckQjHU_OddNu8PpHXYYQxveIWf9jMjEnPbRUAWeI58nxdcHUb6hDY04a23qN12OvD3iaZn29Hoklq5HBQ9swqNJe5S3E/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOgtt8bvZ9bNjD4Q614fzYU1VTW16q3ufAbkYTDuAKDeCv1BNHrpCkbPM4B9XmbjPEWhzEoDxHk19fJH_mNYF6s-J9ZD5x9AjX6joARdt0P62W1bk2vypZKM47q9pyweNdAX9YPwCorCE/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYm5mgld5XhQklCvh6QkoOHlfC3l2bBAGXC7pgFxrt1n4wj8NjG7CaX2JpZ233W9rtRvquD3KgVpXB__EB2K3RgihuOB03VfYygCZWzD4F3o1k6kQ5hJqO2S-WVMNNLu-VjvqBfe4oNM/s1600/slideshow+galeria+de+imagenes+blogger.JPG",
        "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBhUs0JBOwfyGuKhrMkIBGrIu6UMpoTABV6EvRWXlXScXwcpy9i_FXafvoXx2YViIP9srzlfNv9JyQULwTZxZ1a56TLpkpQ-Ud5RnauSjn0M-Y6c2tmxeLwwKc_Vyo04PdMXAME-BeZV8/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

TAGS:


Share:

Related post

Comentarios

9 comentarios: