En la plantilla de blogger, editar html buscan: b:skin> y justo antes pegan el codigo css para el estilo de la galeria (esto se aplicara a todas las galeria que quieran crear en cada post.)
Para buscar en la plantilla control f y escriben o pegan la palabra a buscar.
codigo css:
/*---galeria de imagenes-----*/
/* START SIMPLE RESPONSIVE GALLERY XOMISSE */
.gallery {
padding: 0 3px;
float: left;
width: 23.99999%; /*--esto modifica el ancho de imagenes para que quepan en la entrada--*/
}
div.gallery img {
width: 100%;
height: auto;
}
div.gallery img:hover {
opacity: 0.8;
}
div.desc {
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box: 1px;
}
@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;
}
/* END SIMPLE RESPONSIVE GALLERY XOMISSE */
Luego copian y pegan el codigo html para la galeria en cada entrada, post o pagina que quieran.
codigo html:
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src= "link imagen 1"/>
</div>
<!--Grid Image Gallery-->
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src="link imagen 2" />
</div>
<!--Clickable Grid Image Gallery-->
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src="link imagen 3" />
</div>
<!--Clickable Grid Image Gallery with Caption-->
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src="link imagen 4" />
<div class="desc"></div>
</div>
Para agregar mas imagenes, solo cipien y peguen este codigo:
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src="link imagen 1/>
</div>
<!--Grid Image Gallery-->
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src="link imagen 2" />
</div>
<!--Clickable Grid Image Gallery-->
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src="link imagen 3" />
</div>
<!--Clickable Grid Image Gallery with Caption-->
<div class="gallery">
<img alt="SEO-IMAGE-CAPTION" src="link imagen 4" />
<div class="desc"></div>
</div>