Blogger

Ξ 25 comentarios

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

por Hina Palitah
Cómo eliminar la sombra y el cuadro de las imágenes en Blogger

Aquí en Cómo Lo Hago seguimos con ganas de entregarles los mejores trucos para que logren un excelente blog a medida, es por eso que ahora les enseñaremos como eliminar la sombra y el borde blanco, que por defecto traen las imágenes dentro de Blogger.

¿Cómo? Toda la información después del salto.

¿Qué necesito?

  • Un Blog creado en Blogger
  • Al menos 1 imagen insertada en el blog

 

Materiales

 

¿Cómo lo hago?

1.-  Ingresamos al menú principal de nuestro Blog y hacemos clic en la opción Plantilla. Dentro de esta, hacemos click en Editar HTML. 

 

1

 

2.- La nueva pantalla tendrá cuadro lleno de códigos, si es así, vamos bien.

Damos un clic dentro del cuadro y luego apretamos Control+F. Nos aparecerá un pequeño rectángulo en la esquina superior derecha que dirá “Search”.

*Es importante que el rectangulo de “Search” aparezca dentro del cuadro de códigos y NO dentro de nuestro navegador.

 

2

 

3.- Dentro del cuadro Search escribiremos lo siguiente: .post-body img y luego presionamos la tecla Enter.

Una vez hecho esto, dentro de nuestro cuadro de texto aparecerán 2 líneas destacadas con lo mismo que acabamos de escribir en el buscador.

 

3

 

Lo que nos importará es el texto que encontramos bajo el primer texto destacado, el cual corresponderá a la sombra de nuestra imagen. Puede variar un poco pero el código será algo así:

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

4.- Nos ocupamos únicamente del texto destacado en negrita. Dentro de este texto debemos cambiar todos los números que se encuentran delante de las letras “px” por un 0.

*Debe quedar así:

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

Si hicimos todo bien, la sombra de nuestras imágenes habrá desaparecido.

 

4

 

5.- Ahora eliminaremos el borde blanco. Para eso nos ocuparemos del texto bajo el segundo texto destacado. Que será algo así:

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

Y nuevamente cambiamos el número que está delante de las letras “px” por un 0.

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

 

5

 

6.- Hacemos click en Guardar Plantilla y… ¡Listo!

6

 

Todas las imágenes que insertemos de ahora en adelante y las que tengamos dentro del blog con anterioridad, habrán perdido su sombra y borde blanco.

*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.

FINAL

Cualquier comentario, consulta o aplauso, por favor no olvides dejarlo más abajo.

Les recordamos que este tutorial ha sido desarrollado y documentado por el equipo de Cómo Lo Hago, por lo que cuenta con nuestro sello de garantía:

 

Sello de GarantÍa CLH

 

¡Hasta la próxima!

Comparte este tutorial

El culpable de todo esto

Una vida de grandes ideas ha rodeado a Hina Palitah. Desde una temprana edad (por ahí por 10 años bajo cero) se ha dedicado a la invención de discutidas y resistidas ideas, las cuales a pesar de su éxito, no lograron traerle la fama y reconocimiento que merecía. Hasta que un día, cuando la oportunidad tocó su puerta, decidió irse de un concurso de nudos antes de presentar su mejor nudo, al darse cuenta que la idolatría y fortuna no era lo que perseguía. Finalmente, gracias a un exitoso negocio de zapatos de papel, fue reclutada por Topher, quien buscaba hacer algunas adquisiciones, para incorporar su visión y grandes ideas al equipo. Hoy llega renovada y en busca de venganza, ¿contra quién?, no sabemos.

En los barrios marginales se le conoce como: Hina Palitah

Comentarios en Facebook

25 Comentarios

  • Hola! En mi blog no figura “.post-body img”, con lo cual no puedo seguir estos pasos, y las imágenes que subo a mis posts siguen apareciendo con un borde gris 🙁

    Alguien me podría ayudar?
    Mi blog es http://sopacomunicacion.blogspot.com.ar/

    No sé si con “inspect element” ya pueden ver el código y ayudarme, o si necesitan que les envíe todo el código de la plantilla…

    Mil gracias!!

    • Hola Dani! revisé tu blog y si está el post-body img , quizás estás agregando alguna puntuación que evita que lo encuentres, yo lo veo en la línea 575 por si te sirve de ayuda.

      Mucha suerte! 😀

  • Hola! Muchas gracias, lo acabo de hacer y se han ido los bordes de las imágenes de los post, pero introduje una imagen para que aparezca siempre como firma en cada post y de ésta no se han ido los bordes ¿es normal? Te agradecería mucho si me pudieses decir como quitarla. La introduje desde configuración, entradas

    Gracias!

  • hol, hice la operacion me salio bien con la primera image pero puse otra al final de la pagina (una linea pequena horizontal) y nada que se le quita ni sombra ni borde…por qué sera?
    gracias de antemano!

  • Graciasss 😀 mi buscador al parecer no sirve, pero lo localicé por el número de línea del screen 😀

  • Me salvaste la vida con la técnica del Clic dentro de la plantilla. No lo sabía y me llevaba mucho tiempo buscar los códigos manualmente.
    Comparto tu entrada en mi sitio, me encantó lo de eliminar los bordes, para algunas plantillas son espantosos.
    Suerte y gracias !!!!!

  • Muchas gracias! Bien explicado y muy necesario! Funciona 🙂

1 2 3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos