Cómo eliminar el cuadro y sombra de las imágenes en Blogger

Blogger es una muy buen plataforma para crear un blog, sobre todo porque es “GRATIS”, pero algunas de las desventajas que presenta es que su editor de temas tiene un nivel de personalización muy limitado y por esto la mayoría de los blogs de esta plataforma tienen casi la misma apariencia, pero es posible solucionar esta carencia de personalización utilizando unos cuentos códigos HTML o CSS para lograr algo más de nuestro gusto, incluso no es necesario ser un master en programación para lograr resultados casi profesionales.

Un ejemplo muy sencillo es personalizar la forma en la que se muestran nuestras imágenes en nuestro blog. Como han notado las imágenes que subimos a cada uno de nuestros post se muestran con un pequeño margen y una sombra alrededor de ellas, es posible modificar su color tanto del margen y la sombra, pero no es posible eliminarlas por completo.

Para lograr deshacernos del margen y la sombra de las imágenes subidas a nuestro blog, tenemos que realizar lo siguiente:

Paso 1.- Iremos al menú principal de nuestro Blog y daremos clic en la opción “Plantilla” o “Tema” y dentro de esta daremos clic en Editar HTML.

Paso 2.- Aparecerá una nueva página con el código fuente de nuestra plantilla de blogger, allí tenemos que dar un clic dentro del cuadro y luego tecleamos CONTROL+F. Aparecerá un pequeño rectángulo de búsqueda en la esquina superior derecha.

*NOTA: Si el cuadro de búsqueda apareció fuera de la ventana donde está el código fuente de nuestro blog, es porque no dimos clic en la posición indicada en el paso 2.

Paso 3.- En el cuadro de búsqueda escribiremos lo siguiente (SIN LAS COMILLAS): “.post-body img” y luego presionamos la tecla ENTER.

Después de dar ENTER, en el recuadro del código fuente aparecerán 2 líneas destacadas con lo mismo que acabamos de escribir en el buscador. Nuestro objetivo es el primer resultado que aparece, el cual corresponde a la sombra de nuestra imagen. La cantidad de líneas de bajo de este primer resultado puede variar un poco dependiendo la configuración que tengan en su blog, pero eso no afectara al resultado final.

Paso 4.- El texto en rojo es al que debemos prestar atención ya que modificaremos los números que están antes de “px”, todos se reemplazaran por un “0”

.post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;

background: #fff;

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

*NOTA: Nos debe de quedar algo así:
.post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;

background: #fff;

-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
}

Paso 5.- Ya podemos dar clic a “Guardar tema” o “Guardar plantilla”, ir a nuestro blog y como pueden ver la sombra de nuestras imágenes habrá desaparecido.

Paso 6.- Ya solo nos queda eliminar el borde blanco de la imagen. Como recordaran cuando buscamos “.post-body img” dentro del código de nuestra plantilla, aparecieron dos resultados, para la sombra usamos el primero de ellos y para el marco usaremos el segundo resultado o si lo prefieren busquen este código (SIN COMILLAS) “.post-body .tr-caption-container”.

También se mostraran dos resultados y de igual manera trabajaremos sobre el segundo. En la línea debajo de nuestro resultado esta una línea que dice “padding”, no importa el valor que tenga a delante nosotros lo cambiaremos por “0px”.

Debe verse así ya modificado:
.post-body img, .post-body .tr-caption-container {
padding: 0px;
}

Paso 7.- Damos clic en “Guardar tema” o “Guardar Plantilla” y volvemos a ir a nuestro blog para observar que los marcos de las imágenes se han ido.

De ahora en adelante todas las imágenes que pongamos en algún post de nuestro blog ya no tendrán sombra o el marco molesto, o si lo prefieren pueden volver a poner el borde blanco o la sombra en las imágenes, sólo regresando los valores originales.

"GRACIAS POR TU VISITA"

---

Si te gusto este artículo sobre “Cómo eliminar el cuadro y sombra de las imágenes en Blogger”, por favor compártelo con tus conocidos, en tus redes sociales y sobre todo no olvides dejar un comentario, todo esto me será de gran ayuda para seguir mejorando la calidad del blog.

---