Eliminar el borde a las imágenes de un "post"

Hola amig@s!

¿Cuándo agregáis una imagen a un artículo aparece con un borde?? ¿Un borde sombreado??




Vamos a eliminarlo comentando unos estilos de nuestra plantilla.

El día que redacté mi primer artículo y fuí a añadir una imagen observé que le ponía un borde sombreado. Este efecto no era lo que yo quería así que inspeccioné que css me estaba añadiendo este borde y lo comenté.

Si tampoco os gusta este estilo que añade blogger automáticamente lo eliminaremos en un periquete.

Para eliminarlos tendremos que ir a la vista "Template" de nuestro interfaz blogger. Dentro de "Template" seleccionamos " Edit HTML". 

Se nos abrirá un editor de texto en el que aparece la plantilla de nuestro blog.

 *Si os asusta tocar no tenéis más que copiar el código y pegarlo en un documento por si luego quereis volver atrás . Si hacéis algo raro no tenéis más que pegar el código original enterito y ya está. Aunque bueno, ya sabéis que mientras no guardéis o apliquéis cambios no pasa nada.

Ahora vamos a buscar "moz". Para ello pinchamos sobre el código y con la combinación de teclas "ctrl+f" se nos abrirá un buscador. Este nos facilita la búsqueda dentro del código de nuesra plantilla. Introducimos "moz". 

Buscamos "moz" hasta que encontremos el código que se muestra en el recuadro:  

* para saltar de una búsqueda a otra pulsamos tecla "enter". Esto lo digo porque es posible que en vuestra plantilla aparzca "moz" alguna vez más antes de encontrar la clase que queremos.

.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 queremos eliminar es la propiedad de borde a nuestra imagen. Para los distintos navegadores se denomina "border", "-moz-box-shadow", "webkit-box-shadow" y "box-shadow" . Podríamos poner a cero los valores en píxeles. Yo he optado por comentar esas propiedades y listo. Cuando comentamos un trozo de código es como si lo eliminásemos. Pero así lo tenemos ahí por si alguna vez queremos volver a ponerlo.

Comentamos la propiedad de borde de imágen para los distintos navegadores introduciendo "/*" y "*/" dónde se muestra a continuación.

Vuestro código tiene que quedar de la siguiente manera:

.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);*/

}

Guardamos los cambios y ya está listo.

RESUMEN: Buscar los css que aplican el borde a la imagen (en los distintos navegadores) y comentarlos con barra lateral asterisco, asterisco barra lateral.

Saludos y