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

  • Muchas gracias por explicarlo tan bien, me ha sido de gran ayuda :).

    Un saludo!

  • Mil gracias. Tras leer varios tutoriales ninguno me funcionó, el tuyo está bien explicado y me ha salido a la primera. Excelente.

  • De nada!! que bueno que les haya resultado a los dos 😀

  • Soy la unica que no lo puede hacer? nada me aparece para cambiarlo!

  • Lule donde tienes el problema???

  • Muchas gracias!! Intente con otros tutoriales y no podia, pero ustedes explicaron lo de la barra de busqueda dentro de del cuadro de codigos y eso era lo que me fallaba jeje. Gracias por explicarlo tan bien y con imagenes 🙂

  • gracias, me sirvio para hacer algo, me vino muy bien. Pero me gustaria saber otra cosa que no me sale. ACa esta el problema , si alguien sabe ayudeme

    https://productforums.google.com/forum/#!category-topic/blogger-es/dise%C3%B1o-y-plantillas/_SAbgHCtNPw

  • Verjencio, creo que ese es un problema que trae por defecto blogger, en lo personal, la única forma que encontré para solucionarlo fue subiendo el PNG a un sitio de hosting de imagenes y con la dirección que me daba ese sitio, lo enlacé en mi blog.

    Espero te sirva de algo la ayuda, mucha suerte! 😀

  • Perfecto. Después de varios intentos fallidos, esta explicación me ha sido muy útil 🙂
    El borde blanco ya no me aparece en las fotos de las entradas, pero en las fotos de la barra lateral me sigue apareciendo. No sé si a todo el mundo le ocurre. Gracias, ¡suerte!

  • MUCHAS GRACIAS
    Por tu aportación, excelente explicación.

    Saludos.

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