Galería de Imágenes para tu Blog, de Blogger. Con HTML y CSS.

Galeria de Imagenes para tu Blog. de Blogger.

Hola que tal. Les vengo a enseñar como poner una galeria de imagenes para su blog. o sitio Web, de una forma muy facil.

Lo primero que tenemos que hacer es copiar este codigo CSS a nuestro blog. Para eso nos vamos al panel de Blogger. Tema / Editar HTML.

Una vez dentro van a dar un clic en cualquier parte del codigo Html y van a precionar en su teclado los comandos Control + F y en el buscador que les va aparecer pegan esto.    ]]></b:skin>  y le dan un Enter.

Encima del ]]></b:skin> Vamos a pegar el siguiente codigo Css.

.caja-img { width: 100%; overflow: hidden; display: flex; flex-direction: row; justify-content: space-between; }

 .caja-img .re-cuadro { width: 32%; background: #F3F4F0; margin-right: 5px; margin-bottom: 20px; } 

 .caja-img .re-cuadro .imagen { padding: 0 5px; }

 .caja-img .re-cuadro .imagen img{ width: 100%; vertical-align: top; }

 .caja-img .re-cuadro:hover { transition: all 0.3s ease; color: #fff; background: rgba(0, 0, 0,.5); } 

 .caja-img .re-cuadro .texto { padding: 0 5px; margin: 0; } 

.caja-img .re-cuadro .texto .text-a { text-decoration: none; color: #000; font-size: 15px; text-align: center; line-height: 17px; } 

 .caja-img .re-cuadro .texto .text-a:hover { text-decoration: underline; color: #fff; transition: none; }

y luego le dan clic a Guardar Tema.

Ahora nos vamos a crear una Entrada Nueva y ponemos el siguiente codigo HTML.

<div class="caja-img">
<div class="re-cuadro">
<div class="imagen"><a href="URL de la entrada a donde va ir"><img src="URL de la imagen" title="Titulo de la Imagen" alt="Coloca nuevamente el titulo de la imagen(Opcional)"></a></div>
<div class="texto"><a class="text-a" href="URL a donde quiere ir"><p>Texto 1 <br />Texto 2</p></a></div>
</div>

<div class="re-cuadro">
<div class="imagen"><a href="URL de la entrada a donde va ir"><img src="URL de la imagen" title="Titulo de la Imagen" alt="Coloca nuevamente el titulo de la imagen(Opcional)"></a></div>
<div class="texto"><a class="text-a" href="URL a donde quiere ir"><p>Texto 1 <br />Texto 2</p></a></div>
</div>

<div class="re-cuadro">
<div class="imagen"><a href="URL de la entrada a donde va ir"><img src="URL de la imagen" title="Titulo de la Imagen" alt="Coloca nuevamente el titulo de la imagen(Opcional)"></a></div>
<div class="texto"><a class="text-a" href="URL a donde quiere ir"><p>Texto 1 <br />Texto 2</p></a></div>
</div>

<div class="re-cuadro">
<div class="imagen"><a href="URL de la entrada a donde va ir"><img src="URL de la imagen" title="Titulo de la Imagen" alt="Coloca nuevamente el titulo de la imagen(Opcional)"></a></div>
<div class="texto"><a class="text-a" href="URL a donde quiere ir"><p>Texto 1 <br />Texto 2</p></a></div>
</div>  </div>

Copia este codigo html las veces que quieras en la Entrada Nueva que vayas a crear y sustituye los textos de colores.