12 de agosto de 2015

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.

12 comentarios:

  1. Que buena me ha parecido esta entrada! Me va a venir genial, muchas gracias por la información :)
    Formo parte de la iniciativa todos contra todos y ya te sigo. Besos!!

    ResponderEliminar
  2. Que buena entrada aunque no la usaré porque ya lo he intentando y cuando busco lo que me dices no me aparece, quien sabe.
    Igual me gusta el sombreado de las imagenes.
    Saludos :D

    ResponderEliminar
    Respuestas
    1. Qué raro, de todas formas me he dado cuenta de que falta añadir una cosa a la entrada. Espero tenerla actualizada en poco tiempo y así poder ayudar a más gente.
      ¡Un saludo! :)

      Eliminar
  3. Hola!!

    Muchas gracias por esta entrada, espero darlo echo, ya que me incomoda mucho esa sombra que suele tener.

    Saludos, nos leemos.

    ResponderEliminar
    Respuestas
    1. ¡Espero entonces que te haya salido, Eva! :3 De todas formas, de no ser así puedes dejarme otro mensaje e intentaré buscar una solución.

      Nos leemos. ♡

      Eliminar
  4. Este tutorial es bastante útil también. Fue uno de los primeros cambios que hice en mi blog XD. Me gusta el texto de introducción a la entrada, a mí también me gusta observar el cielo nocturno.
    Un saludo :)

    ResponderEliminar
    Respuestas
    1. Ay, es que una le pone fondo transparente a las imágenes para que no se note la diferencia entre el fondo del blog y la imagen en cuestión y viene Blogger y te pone una sombra en los bordes. ¡Es horrible! Y jo, gracias, y también gracias por leer mis relatos. ❤❤❤
      ¡Un besito!

      Eliminar
  5. Hola Azalea!
    Gracias por el tutorial, la verdad es que estas cosas siempre vienen bien.
    Venía a verte, porque hace tiempo que no te veo. Espero que todo esté bien.
    Un besazo! <33

    ResponderEliminar
    Respuestas
    1. ¡Hola, Sandra!
      Ay, muchas gracias por pasarte. Todo está bien, lo que sucede es que últimamente no tengo tiempo para nada. ):
      ¡Un beso, bonita! ♡

      Eliminar
  6. ¡Vaya, muchísimas gracias! Trataré de hacerlo en breve, pero la verdad es que tengo la agenda algo apretada.

    ¡Nos leemos!

    ResponderEliminar
  7. ¡Hola! Yo también busco el código y no me sale así. He pensado que quizás puede ser porque solo aparezca así en la plantilla ''simple'' o como se llame. Yo tengo la plantilla Etéreo y no me salé ese código pero tampoco me aparecen las imágenes sombreadas. Lo estaba buscando porque quiero cambiarme a la plantilla simple pero al probarla me aparecían las imágnees sombreadas y se me fastidiaba todo el diseño, así que me quedaba como estaba.

    Si consigo aseguramente de que con la plantilla simple si que me aparecerá el código para cambiarlo, me cambiaré ^^

    Gracias por el tutorial.
    Besos-

    ResponderEliminar

Agradezco que deje un comentario, pues los comentarios son lo que le da vida a un blog. No obstante, ruego que no haga spam ni deje links directos.
¡Gracias de antemano!