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.

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:

 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.

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!!