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 = [
"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”
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
Hola Luis,
ResponderEliminarhe 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
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.
EliminarSaludos.
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
ResponderEliminarExcelente 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.
ResponderEliminarHola, 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.
EliminarSaludos.
seria perfecto si pudiera colocarle enlaces a cada imagen para re-direccionar al darle clic a la imagen
ResponderEliminarUna pregunta como hago, para que la imagen se maximice al dar click sobre ella, en la galería que cree con este codigo?
ResponderEliminares que no me lo permite
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.
EliminarSaludos.
Me gustaría poder agregarle LINKS... sera posible?
ResponderEliminar