8.06.2015

Mini - Tuto: ¿Cómo quitar margen a las imágenes?


¡Hola, viajeros! ¿Qué tal? 
Bueno, hoy les dejamos un mini-tutorial de como quitar ese borde blanco y la sombra, que por defecto traen las imágenes dentro de blogger para ser resaltadas, o podemos cambiarle el color. Y aquí les decimos como.

Nivel: Fácil
Accedemos desde nuestra barra de diseño lateral a Plantilla -> Editar HTML, no sin antes crear la copia de seguridad. 
Una vez ahí en la pantalla de edición, buscamos con CONTROL + F:

.post-body img

Ya localizado lo que andábamos buscando, encontraremos un código similar al siguiente:

Código: 


.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);
}

En donde dice padding, lo de color rojo, lo cambiamos por "0px", luego lo que esta al lado de background en color verde, lo eliminamos.
Y el número que sigue al lado de borderde color morado, lo cambiamos por un cero. Al final, los números que están de color azul, los cambiamos todos por un cero para que las imágenes no tengan sombra.

Y al final te debe de quedar así:

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

  background: ;
  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);
}

Y eso es todo, las imágenes ya no tendrán ese borde blanco y la sombra.

Ahora que sí lo que quieres es cambiar el color del borde blanco, por cualquier otro, en lugar de quitar lo que esta de color verde, lo cambiamos por el color en html y ya esta. fácil, ¿no?

NOTA: Si queremos en algún momento volver a tener el borde blanco o la sombra en las imágenes de nuestro blog, sólo debemos repetir el proceso recién realizado y devolver los valores a los originales.

5 comentarios:

  1. Yei! muchas gracias por los tutoriales, estos ayudan mucho, lo implementare en la primera oportunidad. Saludos

    ResponderEliminar
  2. Hola!!
    Gracias por el tutorial, siempre hacen falta cuando queremos decorar nuestro blog ^^
    Besos

    ResponderEliminar
  3. Hola, muchas gracias por el tutorial, me ha servido mucho :)

    ResponderEliminar
  4. Hola,
    He pulsado "control+F" y me ha salido la barra de búsqueda, hasta ahí bien, pero cuando pongo ".post-body image" no lo encuentra en mi blog. Me podrían ayudar por favor.
    Gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola Julia!

      Este mini-tuto no es mío, pero trataré de serte de ayuda (aunque sea un poco tarde)... Revisando las indicaciones de Clau he notado que no debes ingresar ".post-body image", sino ".post-body img". Creo que a eso se debe el que no lo encuentres.

      Espero te sirva.
      ¡Saludos!
      Att: Shiinna

      Eliminar

¡Hola, viajero!
Queremos darte las gracias por tomarte el tiempo de leer nuestras entradas y comentar, tu opinión es muy importante para las cuatro.
No olvides tener en cuenta lo siguiente:
♥No se aceptan comentarios spam. Todo el que lleve un enlace será borrado.
♥Por favor comenta sobre la entrada, si deseas hablarnos de tu blog, pedir afiliación, o algo por el estilo; desde la pestaña "Contacto" puedes enviarnos un correo.
♥Si perteneces a una iniciativa a la cual también pertenecemos, sé paciente, trabajamos en ordenar nuestro tiempo. Disculpa las molestias.