SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Como eliminar sombra de las imágenes en Blogger -C7

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

Para eliminar las 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.

Opción 1: Eliminar las sombras de algunas imágenes.
Opción 2: Eliminar sombra de todas las imágenes.
Opción 3: Poner sombra 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.

Así que empezamos.



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 así:

<b:skin>...</b:skin>

5✻ Le damos a los puntitos y se despliega y abre el código (esto lo he explicado en clases anteriores)

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 (no te asustes, porfa ;) ) 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


 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 en sustituir 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



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" 


¿Ves qué fácil? El mundo es tuyo, ¡Elige lo que quieras!




*Importante: los pasos en los que tienes que editar HTML de plantilla con los códigos que empiezan por img.conborde {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






FIN DE LA CLASE

¿Qué te ha parecido? Difícil? Yo creo que una vez hecho ya resulta facilito ¿no? Cualquier duda o lo que quieras ya sabes, en comentarios puedes dejar lo que quieras. Si tienes algún tutorial pendiente que necesitas para mejorar tu blog, también puedes proponérmelo :)

En la siguiente clase veremos cómo personalizar los títulos de las entradas. Es interesante ¿Verdad? ¡¡Espero que no te lo pierdas!!


Sino te quieres perder ni una sola clase suscríbete



   

1 comentario

  1. Hola,ami no me sale .post-body img solo me sale .post-body pero no me sale 1px ,ayudaaaa

    ResponderEliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.