Cómo eliminar sombra de las imágenes en Blogger que trae por defecto, varias opciones

Como eliminar sombra de imágenes en Blogger tutorial

Cómo eliminar sombra de las imágenes en Blogger que trae por defecto, varias opciones

Para eliminar sombras de las imágenes de las entradas que trae por defecto Blogger tenemos tres opciones. Desde ya te aconsejo que te apoyes en el vídeo tutorial para realizar esta clase de forma más cómoda.

Podemos Eliminar solo la sombra y el borde de algunas imágenes o bien eliminarla de todas las imágenes por defecto. Además si elegimos esta opción podemos ponerle sombra, igualmente, solo a algunas imágenes.

A veces queda bien, depende para qué lo uses, pero otras veces queda como muy postizo… depende lo que quieras, es cuestión de gustos.

Si esto de tanto tutorial te hace perder mucho tiempo…

Es real, esto lleva tiempo. No solo cuando sale bien sino todo el tiempo perdido de esos tutoriales “fracaso” que al final no salen como queremos. Si te sientes frustrada y lo que quieres es emprender un negocio online a través de tus conocimientos y tu blog, ponte en contacto conmigo, pide la primera reunión gratuita o echa un ojo a nuestros servicios porque de esta manera sabrás en qué debes dedicar el tiempo para crear tu negocio rentable en menos de un año. En nuestra Academia Creactiva encontrarás formaciones avanzadas.

Empezamos el tutorial.

Eliminar las sombras de algunas imágenes

1✻ Plantilla
2✻ Crear/Restablecer copia de seguridad
3✻ Editar HTML
4✻ Dentro del cuadro buscamos , que aparece por el principio de la plantilla en verde, como algo así:

</b:skin>

6✻ Nos vamos a la etiqueta de cierre, abajo, después de todo ese código de color azul.

</b:skin>

7✻ Y nos encontramos esto (si has seguido el curso clase a clase) :

.feed-links {
visibility:hidden;
display:none;
}
]]></b:skin>

8✻ Vamos a pegar después del } el siguiente código:

img.sinborde {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    border-radius: 0px 0px 0px 0px;
    background: none;
}

9✻ Con lo cual nos quedaría tal que así:

.feed-links {
visibility:hidden;
display:none;
}
img.sinborde {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
]]></b:skin>

10✻ Guardamos plantilla

11✻ Vamos a la entrada donde queramos editar la sombra de la imagen.

12✻ Le damos a editar

13✻ Vamos a HTML a la izquierda del editor, aquí, mira:

Cómo eliminar sombra en algunas imágenes

 14✻ Y dentro de todo ese código buscas esto:

<img 

seguidamente quizás aparezca algo como border=’0′ pero no se le hace caso, y después tiene que venir (en esa línea y seguido de <img )

src=

15✻ Pues entre esos dos códigos – entre img y src- pegamos el siguiente:

class="sinborde" 

16✻ Guardamos o Actualizamos la entrada y ya no nos aparece sombra.

Eliminar las sombras de todas las imágenes del blog en Blogger

 Para que nunca aparezcan es mucho más sencillo.

1✻ Realizamos los 5 primeros pasos de la opción anterior y después vamos a buscar dentro del cuadro de texto (pulsamos CTRL+F y sale un cuadro de búsqueda, ya lo he explicado en clases anteriores)este código:

.post-body img

2✻ Nos salen dos apartados sombreados en amarillo tal que 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);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

3✻ Pero resulta que no tenemos esos números ¿Verdad? En tu código aparecen unos números diferentes a cero, por ahí. Vale, pues los cambias por cero, los que están seguidos de px o si prefieres puedes copiar y pegar (sobre el mismo código que tienes tú) este código directamente, porque así es cómo tiene que quedar para que no aparezca ni una sola sombra ni borde de ningún tipo, pero fíjate ensustituir bien el código y no borrar más de la cuenta… Menos mal que guardamos plantilla por si acaso 😉  

Poner sombra solo en algunas imágenes del blog de Blogger

1✻ Esto es sencillo, llevamos a cabo el proceso de Eliminar la sombra en todas las imágenes de las entradas y

2✻ después el proceso de Eliminar sombra solo en algunas imágenes pero en este caso en vez de usar el código que empieza por img.sinborde  usaremos este otro:

img.conborde {
 border: 0px;
 -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
 -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
 box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
 border-radius: 0px 0px 0px 0px;
 background: none;
}

3✻ y en vez de usar este código class=”sinborde”  (entre img y src )usaremos este otro :

class="conborde" 

¿Te ha parecido fácil? Pueden surgir problemas, no te preocupes, es normal ¡No eres profesional de código! pero si estás haciendo esto es porque quieres hacerlo por ti misma. Si no es así ya sabes que trabajo con mujeres emprendedoras para desarrollar Marcas Personales online a través de su talento.

IMPORTANTE

Los pasos en los que tienes que editar HTML de plantilla con los códigos que empiezan por img.conborde { o img.sinborde { es un proceso que se realiza una vez solo, pero el resto hay que hacerlo siempre que queramos eliminar la sombra y el borde del que hablamos.  

Vídeo tutorial de apoyo

En la siguiente clase veremos cómo personalizar los títulos de las entradas.

Es interesante ¿Verdad? ¡¡Espero que no te lo pierdas!!

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

3 comentarios

  1. Ligia Calderón

    Hola Mónica, que gran trabajo haces niña! Yo me sentía completamente perdida con esto de blogger y por poco dejo todo tirado, gracias a lo que generosamente compartes he logrado ver mi blog más bonito, aún tengo mucho por aprender pero creo que me estoy animando más gracias a usted.

  2. Anónimo

    Hola Mónica, muchas gracias por este artículo,me fue de gran ayuda, pude conseguir eliminar los bordes de aquellas imágenes en las que quería hacerlo, no obstante me di cuenta de que sólo ha sido efectivo para la versión web del Blog mientras que en la versión móvil los margenes de esas imágenes siguen apareciendo, cómo podría solvertar esto? Gracias 🙏🙏

Deja tu comentario

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