Galeria de imagens con html y css para blogger | facil y simple

Galería de imágenes con html y css con bordes y descripción. Simple para mostrar y alinear imágenes en forma horizontal y vertical. 

Pega el código de la galería en cualquier widget o post html y listo.

para agregar mas imágenes a la galería: simplemente pega las veces que quieras este bloque abajo de <body> dentro del código html que sea abajo. (no en <body> de plantilla.


<div class="gallery">
  <a href="#" target="_blank">
    <img alt="Northern Lights" height="400" src="https://s3.amazonaws.com/rd-marketing-objects/ebook_blogs-corporativos/viver-de-blog_materiais.png" width="600" />
  </a>
  <div class="desc">
Descripción</div>
</div>

height="400" = altura de imagen
width="600" = ancho de imagen
<a href="#" target="_blank"> remplaza # por link donde quieras enviar a tus lectores y se abrirá en otra ventana.



<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 170px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a href="#" target="_blank">
    <img alt="Cinque Terre" height="400" src="https://umbralweb.com/wp-content/uploads/2020/01/Bloggin0005.jpg" width="600" />
  </a>
  <div class="desc">
Descripcion</div>
</div>

<div class="gallery">
  <a href="#" target="_blank">
    <img alt="Forest" height="400" src="https://blog.mailrelay.com/wp-content/uploads/2018/03/que-es-un-blog-1.png" width="600" />
  </a>
  <div class="desc">
Descripcion</div>
</div>

<div class="gallery">
  <a href="#" target="_blank">
    <img alt="Northern Lights" height="400" src="https://s3.amazonaws.com/rd-marketing-objects/ebook_blogs-corporativos/viver-de-blog_materiais.png" width="600" />
  </a>
  <div class="desc">
Descripción</div>
</div>

</body>
</html>