Hvordan å gjøre en Drop Shadow til en Blogger Layout
For å legge til en skygge effekt til en Blogger.com layout, vil du bruke CSS "box-shadow" verdi. Den "box-shadow" verdi legger en boks skygge til en seksjon i oppsettet eller et bestemt element, for eksempel rundt en stolpe bilde. Den "box-shadow" verdien blir så modifisert med boksen padding som du velger. Du velger også fargen for boksen skygge, så har fargen HTML kode klar før du begynner. Sikkerhetskopier malen før du endrer noe koding.
Bruksanvisning
1 Åpne en nettleser. Gå til Blogger hjemmeside på Blogger.com. Skriv inn din e-postadresse og passord. Klikk på den grå "Logg inn" -knappen for å gå til "Dashboard" side.
2 Klikk på den blå "Design" linken for å gå til "Design" side. Klikk på "Rediger HTML" for å gå til "Rediger mal" -siden.
3 Bla ned til delen i HTML-mal der du vil legge til skygge. For eksempel ønsker å legge det til hoveddelen. Kodingen ligner på dette:
kropp {
font: $ (body.font);
farge: $ (body.text.color);
bakgrunnen: $ (body.background);
}
4 Legg til en linje til den siste linjen av koding like ovenfor den endelige braketten. Skriv "box-shadow:" i det rommet. For dette eksempelet, ser det ut som dette:
kropp {
font: $ (body.font);
farge: $ (body.text.color);
bakgrunnen: $ (body.background);
box-shadow:
}
5 Tilsett boksen skygge padding, i piksler til "-moz-box-shadow:" verdi. Det første tallet er for den horisontale skygge og den andre er for den vertikale skygge. For eksempel ser det ut som dette:
kropp {
font: $ (body.font);
farge: $ (body.text.color);
bakgrunnen: $ (body.background);
box-shadow: 10px 10px
}
6 Legg fargen på skygge, med en "#" tegn foran det som med alle andre fargeverdi. Lukk verdi med et semikolon. For dette eksempelet, ser det ut som dette:
kropp {
font: $ (body.font);
farge: $ (body.text.color);
bakgrunnen: $ (body.background);
box-shadow: 10px 10px # 888888;
}
7 Klikk på den oransje "Lagre mal" -knappen. Klikk på den blå "View Blog" linken for å vise skygge.
Hint
- Bruk Notepad eller en annen tekst editor for å skrive koding. Deretter kopiere og lime den inn i hovedmalen.