Añadir bordes y sombras alrededor de imágenes insertadas en un post (entrada) de Blogger

Cuando yo hacia una entrada en este Blog, antes casi siempre añadía una sombra cuando insertaba una imágen, pero ahora como no está disponible para instalar Shutter en las nuevas versiones de Linux ya no tengo como, pero se me ocurrió que tal vez habría la manera de que automáticamente al insertar una imágen, Blogger le añada una sombra, y bueno esta es mi investigación, basada en:

Add Border and Shadow Around Blogger Post Image
https://www.bloggerspice.com/2014/12/how-to-add-border-and-shadow-on-blogger-images.html

INSTRUCCIONES:
(Saque un respaldo de su plantilla antes de modificarla)

En editar el tema de Blogger



allí busqué con "Ctrl + F":

.post img

Nota: El autor de esta solución (arriba está el enlace) dice que es posible que encontremos ese texto en una de las siguientes formas:

.post img{
..................................................
..................................................
}

o

.post img
{
..................................................
..................................................
}

o

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
..................................................
.................................................
}

donde esos puntitos ....... significa cualquier texto que podría estar escrito. En mi caso todo el texto que está en mi blog es este:



o lo que es lo mismo:

.post img {
    max-width: 100%;
}
Y este debo borrarlo y poner en vez de ese código cualquiera de los siguientes, que esos si es mejor que los vean en la publicación original y de allí los copien:

https://www.bloggerspice.com/2014/12/how-to-add-border-and-shadow-on-blogger-images.html

Nota: En caso de que esa publicación algún día sea borrada, aquí tengo un respaldo:


Cambio hecho por mi en mi plantilla HTML
El código que yo he hecho para mi plantilla en base a lo aprendido es el siguiente:
.post img {
    max-width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .9);
}
Nota: Tengo que añadir el código: "max-width: 100%;" porque así estaba en la plantilla personalizada que estoy usando de:

https://btemplates.com/blog/maya-template/

Si no pongo ese código la plantilla entera principal de mi Blog en Blogger se daña.

aquí les pongo una imagen de mi reemplazo, y guardo el tema allí en el botón:



Por cierto, para calcular el color de la sombra en rgba usé el siguiente servicio, úselo (allí les explico):

https://www.w3schools.com/code/tryit.asp?filename=G9E8XOY0YJMR

y ahora si, en todas las entradas de mi blog se ha añadido a cada imagen un borde oscuro, ejemplo:



Me despido, alguna consulta me avisan, Dios les bendiga

Comentarios

Publicar un comentario