Hola amigos de Mil Trucos Blogger, en el día de hoy veremos como añadir una sencilla galería de imágenes para Blogger, la cual está realizada íntegramente con CSS, por lo que es de carga muy ligera.

Galería de imágenes realizada con CSS

Demo del Truco

Para agrega este truco a tu blog ve a plantilla, Editar HTML y antes de ]]></b:skin>  pega lo siguiente:

/* Contenedor general del visor */
.contenedorvisor {
position: relative;
width: 600px;
height: 560px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.contenedorvisor a {
display: inline;
text-decoration: none;
}
/* Estilo miniaturas */
.miniatura {
width: 18%; /* 100/nºimágenes, 4 en el ejemplo */
margin:1px;
border: 3px solid black;
opacity: 1;
}
/* Estilo imagen principal */
.grande {
width:100%;
position: absolute;
top: 800px; /* Valor mayor que alto contenedor para ocultar todas las imágenes */
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
/* Relleno inicial del espacio para imagen principal */
.muestra {
opacity: .3;
width: 200%;
top: 170px;
}
/* Marcamos con un borde la miniatura seleccionada */
a:hover .miniatura {
border: 3px solid grey;
opacity: .5;
}
/* Movemos con transición la imagen seleccionada a la zona visible */
a:hover .grande {
top: 170px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
z-index:3;
}

Ahora en Diseño, Añadir gadget, HTML/JavaScript añade lo siguiente:

<div class="contenedorvisor">
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN1" />
<img class="grande" src="URL_IMAGEN_ORIG1" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN2" />
<img class="grande" src="URL_IMAGEN_ORIG2" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN3" />
<img class="grande" src="URL_IMAGEN_ORIG3" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN4" />
<img class="grande" src="URL_IMAGEN_ORIG4" />
</a>
<a href="javascript:void(0);">
<img class="grande muestra" src="URL_IMAGEN_ORIG1" />
</a>

</div>

Reemplaza lo resaltado en color azul por lo que se indica en cada caso.

Si el tutorial te ha gustado, no olvides compartirlo en tus redes sociales.