Come fare un'ombra esterna a un layout di Blogger

December 22

Come fare un'ombra esterna a un layout di Blogger


Per aggiungere un effetto ombra a un layout Blogger.com, si utilizzerà il valore CSS "box-shadow". Il valore "box-shadow", aggiunge un'ombra di dialogo per una sezione nel layout o un elemento specifico come ad esempio intorno a un'immagine un post. Il valore "box-shadow" viene poi modificato con la scatola imbottitura di tua scelta. È anche scegliere il colore per la scatola di ombra, in modo da avere il codice di colore HTML pronto prima di iniziare. Eseguire il backup del modello prima di modificare qualsiasi codifica.

istruzione

1 Aprire un browser Web. Vai al sito web di Blogger in Blogger.com. Inserisci il tuo indirizzo email e password. Fare clic su "Sign in" grigio pulsante per accedere alla pagina "Dashboard".

2 Fai clic sul link "Design" per andare alla pagina "Design". Fai clic su "Modifica HTML" per andare alla pagina "Modifica modello".

3 Scorrere verso il basso fino alla sezione nel modello HTML in cui si desidera aggiungere l'ombra. Per esempio, si desidera aggiungere al corpo principale. La codifica è simile a questo:

body {

di carattere: $ (body.font);

colore: $ (body.text.color);

background: $ (body.background);

}

4 Aggiungere una riga all'ultima riga di codifica appena sopra il supporto finale. Tipo "box-shadow:" in quello spazio. Per questo esempio, sembra che questo:

body {

di carattere: $ (body.font);

colore: $ (body.text.color);

background: $ (body.background);

box-shadow:

}

5 Aggiungere l'imbottitura scatola di ombra, in pixel al "-moz-box-shadow:" il valore. Il primo numero è per l'ombra orizzontale e la seconda è per l'ombra verticale. Per l'esempio, sembra che questo:

body {

di carattere: $ (body.font);

colore: $ (body.text.color);

background: $ (body.background);

box-shadow: 10px 10px

}

6 Aggiungere il colore dell'ombra esterna, con un segno "#" davanti come con qualsiasi altro valore di colore. Chiudere il valore con un punto e virgola. Per questo esempio, sembra che questo:

body {

di carattere: $ (body.font);

colore: $ (body.text.color);

background: $ (body.background);

box-shadow: 10px 10px # 888888;

}

7 Fare clic sul pulsante arancione "Salva modello". Fai clic sul link "Blog" per mostrare l'ombra.

Consigli e avvertenze

  • Utilizzare Blocco note o un altro editor di testo per scrivere il codice. Quindi copiare e incollarlo nel template principale.