Tilpass overskriftsdelen av Blogger.com-bloggen

Kan 3, 2024

I den siste opplæringen tilpasset vi koblingsdelen for Blogger^TM weblogg. Nå vil vi tilpasse Header-delen øverst på bloggen. Overskriften inneholder tittelen og beskrivelsen på bloggen din. Vi kommer til å endre skrifttypen, eller skriften, for teksten og legge til en farget bakgrunn.

Som i den siste opplæringen, vil vi gjøre disse forbedringene ved å endre noen få linjer i malens HTML-kode. Klikk på Mal-fanen på menyen øverst på siden som tar deg til delen Rediger gjeldende mal. Du finner HTML-koden for malen i boksen nedenfor. Vi vil gjøre noen få endringer i CSS-stilkoden. (For å finne ut mer om Cascading Style Sheets, følg lenken nedenfor.) Bla ned koden til du kommer til Header-delen i CSS-stilkoden. Som du kan se er stilkoden veldig lang, og toppteksten i stilkoden har seks deler.

@media alle
@media håndholdt
#bloggtittel
# blogg-tittel a
# blogg-tittel a: hover
#beskrivelse

Den første delen av koden (@media all) kontrollerer egenskapene til overskriften, inkludert bredde, margin og kantstørrelse. Den andre delen (@media-håndholdt) arver disse egenskapene fra den første delen og endrer også bredden på Header til 90 prosent for håndholdte skjermer. Fordi vi vil ha den nye bakgrunnsfargen til den som brukes i begge tilfeller, vil vi legge til en kodelinje for bakgrunnsfargen i den første delen (@media all). Denne nye kodelinjen er i fet skrift nedenfor. I eksemplet nedenfor har vi brukt en lysegrå farge, men bruk gjerne alle farger du ønsker.

@media alle {
#Overskrift {
bakgrunnsfarge: # EFE3EF;
...
Neste, vil vi endre skrifttypen for tittelen til den populære, casual stil font kalt Comic Sans MS. Selvfølgelig står du fritt til å bruke alle skrifter du liker. De neste tre delene av malens CSS-kode (# blogg-tittel, # bloggtittel a, # bloggtittel a: svev) kontrollerer egenskapene til tittelen på bloggen. Den første delen kontrollerer de generelle egenskapene, og de to andre delene kontrollerer utseendet på teksten når den fungerer som en hyperkobling. For å angi tittelens skrifttype, eller font, for alle tilfeller, legger vi til CSS-koden for font-familien til den første delen (# blog-title). Fordi fontnavnet vårt inneholder mellomrom, må det også plasseres i anførselstegn ("tegneserier sans ms").

#bloggtittel {
font-family: "comic sans ms";
...
Til slutt vil vi jobbe med CSS-koden for beskrivelsen av bloggen din (#beskrivelse). Dette er den siste delen av de originale seks. Som du kan se nedenfor, er all CSS-koden som kontrollerer fontegenskapene for beskrivelsesteksten listet sammen på en linje. Alt vi trenger å gjøre er å legge til “comic sans ms” foran på listen over skrifter som vil gjøre Comic Sans MS til standardfont for beskrivelsesteksten.

#beskrivelse {
...
skrift: 78% / 1.4em "tegneserie sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
...
}

Når du er ferdig, klikker du på knappen Forhåndsvisning for å forhåndsvise endringene dine, og lukker deretter nettleservinduet for å gå tilbake til forrige webside. Klikk på Lagre malendringer-knappen. Når du ser bekreftelsesmeldingen som indikerer at endringene ble lagret, klikker du på republikk-knappen. For å bekrefte at bloggen din er oppdatert, klikker du på Vis blogg-fanen i menyen øverst på siden. Du må kanskje oppdatere bloggsiden din for å se endringene.

Skjermbilder skrevet ut med tillatelse fra Google Inc. Google^TM, Blogger^TM og BlogSpot^TM er enten registrerte varemerker eller varemerker for Google Inc. i USA og / eller andre land.

Video Instruksjoner: Introducing the Blogger Template Designer (Kan 2024).

Tilpass Header-delen av Blogger.com-bloggen din, HTML, endre tittel og beskrivelse av Blogger-bloggen din, endre skrifttypen for Blogger-malen, legg til en farget bakgrunn i Blogger-malen, endre CSS-koden for Blogger-malen, legg til CSS-kode til Blogger-malen , Blogger mal font, Blogger mal font-familie, CSS stil koder

Forrige Artikkel

Neste Artikkel

Relaterte Artikler

datamaskiner

Sony Playstation 3 80 spill

Kan 2024

For det første er jeg spillanmelder og har vært i mange år. Vi stresstester systemene våre veldig tungt. Vi spiller på alle tre (PS3, XBox 360 og Wii) ganske mye konstant. Hvis du leter etter mine...

datamaskiner

Naruto Clash of Ninja 2

Kan 2024

Naruto Clash of Ninja 2 har de samme stemmeskuespillerne som i tegneserie-showet dub. Du kan fordype deg i Naruto-verdenen i dette kampspillet. Grafikken er storslått og 3D, og integreres godt i...