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.
Además, si necesitan saber más trucos de
slideshow para blogger, les dejo algunos post que publique anteriormente
- Como agregar a mi blog de blogger un Slideshow automatico
- Como crear un Slideshow manual para mi blog de blogger
- Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
- Como hacer un Slideshow Carrusel basado en etiquetas para blogger
- Como insertar un Menú desplegable y un Slideshow para blogger
- Como insertar un Slider Carrusel en blogger
- Como insertar un Slideshow en Blogger simples pasos
- Galería de imágenes para blogger
- Galería de imágenes para blogger V3
- Instalar un Slideshow para blogger con un solo widget
- Mostrar un Slideshow con mis entradas populares para blogger
- Necesito un Slider para mi blog de blogger
- Nuevo estilo de Slideshow para blogger
- SlideShow con control deslizante para blogger
- Slider carrusel para blogger
- Slider para blogger en 3D
- Slideshow con Entradas Populares Nuevo estilo
- Slideshow de Popular post o Entradas polulares para mi blog de blogger
- Slideshow para Blogger
- Slideshow para blogger blogspot con etiquetas
- Slideshow para blogger con un solo widget
- Slideshow para blogger manual nuevo estilo
- Slideshow para blogger nuevo estilo
- Slideshow para blogger versión 4
- Slideshow vertical para usarlo en blogger
- Widget Galería de Imágenes para blogger V2
- Widget Slider galería de imágenes acordeón para blogger
- Widget Slideshow para blogger
- 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”
3.2 Abre un gadget “Añadir un gadget”
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
9 comentarios: