Cómo quitar las sombras de las imágenes de blogger – Trucos Diseño Web
Tutorial para eliminar las sombras y el borde en las fotos del blog (Blogger)
Cuando subes cualquier imagen al blog, blogger pone por defecto un contorno y una sombra en esa foto o imagen. (ver ejemplo abajo)
Si te gusta como quedan tus fotos con el contorno y el sombreado perfecto no toques nada pero si no te gusta como queda y prefieres que la foto no tenga ese efecto puedes quitarlo de un modo muy sencillo.
1. Entra al editor de blogger y haz click en Plantilla/ Editar Html
2. Después coloca el cursor dentro de la zona editable de la plantilla y presiona la combinación crtl+f en tu teclado, aparecerá un buscador en la esquina derecha del editor
3. Copia este trozo de código: .post-body img y pégalo dentro de la caja de búsqueda, después dale a la tecla enter (o intro). Con esto lo que hacemos es localizar el código en el que vamos a cambiar los parámetros
4. Te aparecerá destacado en amarillo el código que estamos buscando, fíjate sólo en el primero que te marca que es el que hay que cambiar, el código que tenemos que localizar es el siguiente:
.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 que hay marcado en rojo es lo que tenemos que cambiar, puedes cambiar los números uno a uno o copiar y pegar el código de abajo que ya está cambiado
Tienes que poner todo los números marcados en rojo a 0 de forma que quede como el código de abajo
.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 0px0 rgba(0, 0, 0, .1);
Importante cuando no tienes mucha experiencia con el html
Cuidado al tocar el html de la plantilla si no estás seguro de que los has hecho correctamente puedes deshacer (ctrl+z) y dale a vista previa antes de guardar la plantilla y los cambios.
Enlaces relacionados:
Gracias por visitar el blog y feliz día 🙂