Cómo quitar borde sombreado a las imágenes

¡Hola, chicos! Feliz miércoles, ¿Estáis listos para ver las perseidas?
Me encanta agosto por todas las estrellas fugaces que se pueden ver, son tan bonitas. Me suelo pasar la noche en un saco de dormir en el campo, admirando la inmensidad del cielo y filosofando sobre qué puede haber ahí arriba. Me encanta perderme en mis pensamientos y pensar en imposibles. Bueno, ¡A lo que iba! Si es que, hay que ver, la culpa de que me enrolle tanto escribiendo la tenéis vosotros, eh.

Ya expliqué anteriormente en otro post cómo no tener que escribirle un título a las imágenes, ahora vamos un poco más allá. Cuando hice el blog y empecé a llenarlo de imágenes, me di cuenta de algo: tenían un sombreado que no había manera de quitar. No conseguía que el fondo blanco pasara inadvertido, y aunque les pusiera fondo transparente y las subiera en formato png, ahí seguía el sombreado horrible que me destrozaba el diseño.

Voy a explicaros paso a paso como quitar las sombras tan molestas, e intentaré explicarlo bien para que todo sea comprensible. Si algún paso queda mal redactado o no conseguís que funcione, dejad vuestro problema en un comentario e intentaré ayudaros como pueda.

Paso 1

Entramos a Blogger y, en el panel de control de gestión de nuestro blog, accedemos a Plantilla y, después, a Editar HTML. Antes de cambiar nada en el código HTML de nuestro blog recordad hacer una copia de seguridad. ¡Nunca hay que tocar el código HTML sin tener nuestra copia! Si no sabéis cómo hacerla, Google nos lo facilita con el botón que hay Crear/Restablecer copia de seguridad. Os adjunto una imagen en la que señalo dos botones, uno es el de Crear la copia y otro es el de Editar HTML.

Paso 2

Una vez en Editar HTML, colocad el cursor dentro del cuadro y teclead ctrl + F5, eso os permitirá buscar en el cuadrito del código con mucha más facilidad. Escribid en el cuadrito esto: .post-body img.

Paso 3

Localizado el trozo de código, tendréis que cambiar unas cositas. Este es el código que encontraréis, os dejo en negrita los números que debéis cambiar.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);


background: $(image.background.color);
border: 1px solid $(image.border.color);


-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

¿Lo habéis localizado? Bien, pues al último paso.

Paso 4

Debéis cambiar los números que puse en negrita. Hay que sustituirlos todos por un 0.

De manera que quedará así:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);


background: $(image.background.color);
border: 0px solid $(image.border.color);


-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

Haced una previsualización y, si el resultado es satisfactorio, guardad. En caso contrario, cerrad sin guardar ningún cambio, no vaya ser que la liemos y destrocemos el diseño del blog. 

¡Y ya está! ¿Verdad que es sencilo?

¿Os sirvió el tutorial? ¿Conocíais otras maneras más sencillas de quitar el sombreado? Ponedlo en los comentarios, que seguro que ayudará a los demás bloggers.