Tilpas overskriftssektionen på din Blogger.com-blog
I den sidste tutorial tilpassede vi afsnittet Links til din BloggerTM weblog. Nu tilpasser vi Header-sektionen øverst på bloggen. Overskriften indeholder titlen og beskrivelsen af ​​din blog. Vi vil ændre skrifttypen eller skrifttypen for teksten og tilføje en farvet baggrund.

Som i den sidste tutorial vil vi foretage disse forbedringer ved at ændre et par linjer i skabelonens HTML-kode. Klik på fanen Skabelon i menuen øverst på siden, der fører dig til afsnittet Rediger aktuel skabelon. Du finder HTML-koden til skabelonen i boksen nedenfor. Vi foretager et par ændringer i CSS-stilkoden. (Følg nedenstående link for at finde ud af mere om Cascading Style Sheets.) Rul ned koden, indtil du kommer til overskriften i CSS-stilmærket. Som du kan se, er stilmærket meget langt, og Header-sektionen i stilmærket har seks dele.

  1. @media alle
  2. @media håndholdt
  3. # Blog-titel
  4. # blog-titel a
  5. # blog-titel a: hover
  6. #beskrivelse

  • Den første del af koden (@media alle) kontrollerer egenskaberne for overskriften inklusive bredde, margin og kantstørrelse. Den anden del (@media-håndholdt) arver disse egenskaber fra den første del og ændrer også bredden på Header til 90 procent for håndholdte skærme. Da vi vil have den nye baggrundsfarve til den, der bruges i begge tilfælde, tilføjer vi en kodelinie for baggrundsfarven i den første del (@media all). Denne nye kodelinje er med fed skrift nedenfor. I eksemplet nedenfor har vi brugt en lysegrå farve, men vi er velkomne til at bruge enhver farve, du ønsker.

    @media alle {
    #header {
    baggrundsfarve: # EFE3EF;
    ...

  • Dernæst ændrer vi skrifttypen for titlen til den populære, afslappet stil font kaldet Comic Sans MS. Selvfølgelig er du fri til at bruge enhver skrifttype, du kan lide. De næste tre dele af skabelonens CSS-kode (# blog-titel, # blog-titel a, # blog-titel a: hover) styrer egenskaberne for blogens titel. Den første del styrer de generelle egenskaber, og de to andre dele kontrollerer udseendet på teksten, når den fungerer som et hyperlink. For at indstille titlens skrifttype eller font til alle tilfælde tilføjer vi CSS-koden for fontfamilien til den første del (# blog-titel). Da vores fontnavn indeholder mellemrum, skal det også placeres inden i anførselstegn ("tegneserier sans ms").

    # blog-titel {
    font-family: "comic sans ms";
    ...

  • Endelig vil vi arbejde på CSS-koden til beskrivelsen af ​​din blog (#beskrivelse). Dette er den sidste del af de originale seks. Som du kan se nedenfor, er alle CSS-koder, der kontrollerer skrifttegenskaberne for beskrivelsesteksten, samlet på en linje. Alt, hvad vi skal gøre, er at tilføje “comic sans ms” foran på listen over skrifter, der vil gøre Comic Sans MS til standard skrifttype til beskrivelsesteksten.

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

Når du er færdig, skal du klikke på knappen Preview for at få vist dine ændringer og derefter lukke browservinduet for at vende tilbage til den forrige webside. Klik på knappen Gem skabelonændringer. Når du ser en bekræftelsesmeddelelse, der viser, at ændringerne blev gemt, skal du klikke på knappen Forny. For at kontrollere, at din blog er blevet opdateret, skal du klikke på fanen Vis blog i menuen øverst på siden. Det kan være nødvendigt at du opdaterer din blogside for at se ændringerne.





Skærmbilleder, der er genudtrykt med tilladelse fra Google Inc. GoogleTM, BloggerTM og BlogSpotTM er enten registrerede varemærker eller varemærker tilhørende Google Inc. i USA og / eller andre lande.


Video Instruktioner: The Rules for Rulers (Kan 2024).