miércoles, 17 de abril de 2019

Blogger: Eliminar borde y sombra de las imágenes

Al crea un blog con Blogger, existen plantillas que dentro de su diseño, agregan un borde blanco y sombra a todas las imágenes que coloquemos en nuestras entradas. Pero es posible que quieras quitar esta características en algunas de ellas. ¿Cómo? Muy fácil.

1. En el menú principal del lado izquierdo, seleccionar Tema o Plantilla (Entre Diseño y Configuración).

2. Al lado derecho se mostrará la Plantilla (o Tema) que has seleccionado para tu Blog.

3. Hacemos click en "Editar HTML". Se mostrará el código HTLM de tu plantilla.

4. Hacemos click dentro de esta ventana y luego Control+F (o CMD +F en Mac), de manera que se muestre la ventana de búsqueda. Todo esto es para encontrar dentro de todo este código, una línea específica.

5. En el cuadro de búsqueda, colocamos
               .post body img

6. Veremos que nos muestra la línea destacada dentro del código, bajo la cual está el código que debemos cambiar. Para eliminar la sombra, colocamos los valores en 0:

  -moz-box-shadow: 5 5 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 5 5 $(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 5 5 $(image.shadow.spread) rgba(0, 0, 0, .2);

cambia a:

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

7. Para eliminar el borde blanco:

  .post-body .tr-caption-container {  
      padding: 10px;  
  }  

cambia a:

  .post-body .tr-caption-container {  
      padding: 0px;  
  } 

8. Guardamos y listo!!




No hay comentarios.:

Publicar un comentario