-
¿Cómo hacer una sombra paralela a un diseño de Blogger
-
Para añadir un efecto de sombra a un diseño de Blogger.com, que va a utilizar el valor CSS "box-shadow". El valor "box-shadow" añade una sombra cuadro a una sección en el diseño o un tema específico, como una imagen posterior alrededor. El valor "box-shadow" A continuación, se modifica con el relleno de la caja de su elección. También elegir el color de la sombra caja, por lo que el código de color HTML listo antes de comenzar. Copias de seguridad de su plantilla antes de modificar ningún tipo de codificación.Instrucciones
1 Abra un navegador Web. Ir a la página web de Blogger en Blogger.com. Escriba su correo electrónico y contraseña. Haga clic en el gris "Entrar" para ir a la página de "tablero de instrumentos".
2 Haga clic en el enlace "Diseño" para ir a la página de "Diseño". Haga clic en "Editar HTML" para ir a la página "Editar plantilla".
3 Desplazarse hasta la sección en la plantilla HTML en el que desea agregar la sombra. Por ejemplo, desea agregar al cuerpo principal. La codificación es similar a esto:
cuerpo {
de las fuentes: $ (body.font);
color: $ (body.text.color);
fondo: $ (body.background);
}
4 Añadir una línea a la última línea de la codificación justo por encima del soporte final. Tipo "box-shadow:" en ese espacio. Para este ejemplo, se ve así:
cuerpo {
de las fuentes: $ (body.font);
color: $ (body.text.color);
fondo: $ (body.background);
sombra de la caja:
}
5 Añadir el relleno de la caja de sombra, en píxeles a la "-box-shadow -moz:" valor. El primer número es la sombra horizontal y la segunda es que la sombra vertical. Para el ejemplo, se ve así:
cuerpo {
de las fuentes: $ (body.font);
color: $ (body.text.color);
fondo: $ (body.background);
box-shadow: 10px 10px
}
6 Añadir el color de la sombra, con un signo "#" delante de él como con cualquier otro valor de color. Cierre el valor con un punto y coma. Para este ejemplo, se ve así:
cuerpo {
de las fuentes: $ (body.font);
color: $ (body.text.color);
fondo: $ (body.background);
box-shadow: 10px 10px # 888888;
}
7 Haga clic en el botón naranja "Guardar plantilla". Haga clic en el enlace "Ver blog" para mostrar la sombra paralela.
Consejos y advertencias
- Utilice Bloc de notas u otro editor de texto para escribir la codificación. A continuación, copiar y pegar en la plantilla principal.
