Esta publicación le mostrará cómo agregar fácilmente una galería de imágenes simple y responsiva a su blog de Blogger/Blogspot. Las galerías son una excelente manera de mostrar varias imágenes sin que el usuario se desplace por una página larga y de carga lenta.
Este tutorial le mostrará cómo agregar una galería de imágenes en un diseño de cuadrícula con filas y columnas. Puede utilizar una galería de imágenes para agregar un portafolio, una galería de proyectos, una galería de recetas o una página de archivo visual que enlace a publicaciones separadas en su blog.
También puedes agregar una galería en publicaciones separadas para mostrar una colección de imágenes, como fotografías de viajes, productos externos, comprar esta publicación o artículos de lookbook.
Style your image gallery with CSS Pegue lo siguiente justo arriba de ... ]]> </b:skin>
/* GALERIA PARA POST DE BLOGGER */
.gallery {padding: 0 5px;float: left; width: 24.99999%;}
div.gallery img {width: 100%;height: auto;}
div.gallery img:hover {opacity: 0.8;}
div.img-desc {padding: 10px;text-align: center;}
* {box-sizing: border-box;}
@media only screen and (max-width: 700px){.gallery {width: 49.99999%; margin: 6px 0;}}
@media only screen and (max-width: 500px){.gallery {width: 100%;}}
.image-gallery:after {content: "";display: table;clear: both;}
Esto aplica estilo a las imágenes y títulos en formato de cuadrícula, además de hacerlos responsivos (pase de 4 columnas a 2 columnas y 1 columna según el tamaño de la pantalla). Personaliza este CSS como desees.
Quieres una cuadrícula de 3 columnas? En su lugar, cambie el valor del ancho en .gallery a 32.99999% y en 2 columnas cambie el valor a 49.99999%
Para agregar la galería a una publicación, página o gadget, copie y pegue el siguiente HTML. Es importante que se asegure de pegarlo en modo HTML (no en modo de redacción/texto enriquecido) y no cambie entre modos una vez que lo pegue; de lo contrario, Blogger agregará código entre líneas y romperá la estructura.
<div class="image-gallery">
<!-- Grid Image Gallery -->
<div class="gallery">
<img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
</div>
<!-- Grid Image Gallery with Caption -->
<div class="gallery">
<img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
<div class="desc">DISPLAYED-CAPTION</div>
</div>
<!-- Clickable Grid Image Gallery -->
<div class="gallery">
<a href="LINK" target="_blank">
<img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
</a>
</div>
<!-- Clickable Grid Image Gallery with Caption -->
<div class="gallery">
<a href="LINK" target="_blank">
<img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
</a>
<div class="desc">DISPLAYED-CAPTION</div>
</div>
</div>
Ahora cargue sus imágenes y reemplace IMAGE-URL con la URL directa de la imagen.
Reemplace ENLACE con la publicación, página o sitio externo al que desea vincular esa imagen. Reemplace SEO-IMAGE-CAPTION y DISPLAYED-CAPTION con un título descriptivo compatible con SEO.
Para agregar más imágenes, simplemente copie y pegue el bloque de código de imagen de cuadrícula dentro del contenedor div de la galería de imágenes.
Ahora puede guardar y publicar su publicación o página. Su galería de imágenes debe mostrarse en una cuadrícula agradable y responder cuando cambia el tamaño de la pantalla del navegador.