Anpassa rubrikavsnittet i din Blogger.com-blogg

Maj 4, 2024

I den sista handledningen anpassade vi avsnittet Länkar för din Blogger^TM webblogg. Nu anpassar vi Header-avsnittet högst upp i bloggen. Rubriken innehåller titeln och beskrivningen på din blogg. Vi kommer att ändra typsnitt eller typsnitt för texten och lägga till en färgad bakgrund.

Som i den sista handledning kommer vi att göra dessa förbättringar genom att ändra några rader i mallens HTML-kod. Klicka på fliken Mall i menyn högst upp på sidan som tar dig till avsnittet Redigera aktuell mall. Du hittar HTML-koden för mallen i rutan nedan. Vi kommer att göra några ändringar i CSS-stilkoden. (För att lära dig mer om Cascading Style Sheets, följ länken nedan.) Rulla ner koden tills du kommer till Header-avsnittet i CSS-stil-taggen. Som ni kan se är stiltaggen väldigt lång och rubrikdelen i stilkoden har sex delar.

@media alla
@media handhållen
#Bloggtitel
# blogg-titel a
# bloggtitel a: hover
#beskrivning

Den första delen av koden (@media all) styr egenskaperna hos Header inklusive bredd, marginal och kantstorlek. Den andra delen (@media handhållen) ärver dessa egenskaper från den första delen och ändrar också bredden på Header till 90 procent för handhållna bildskärmar. Eftersom vi vill ha den nya bakgrundsfärgen till den som används i båda fallen lägger vi till en kodrad för bakgrundsfärgen i den första delen (@media all). Denna nya kodrad är med fet stil nedan. I exemplet nedan har vi använt en ljusgrå färg men känn dig fri att använda vilken färg du vill.

@media alla {
#header {
bakgrundsfärg: # EFE3EF;
...
Därefter kommer vi att ändra typsnittet för titeln till det populära, avslappnade stilformat som heter Comic Sans MS. Naturligtvis är du fri att använda alla typsnitt du gillar. De nästa tre delarna av mallens CSS-kod (# blogg-titel, # bloggtitel a, # bloggtitel a: hover) styr egenskaperna för bloggens titel. Den första delen styr de allmänna egenskaperna och de andra två delarna kontrollerar utseendet på texten när den fungerar som en hyperlänk. För att ställa in titelns typsnitt, eller teckensnitt, för alla instanser, lägger vi till CSS-koden för teckensnittfamiljen till den första delen (# blogtitel). Eftersom vårt teckensnittsnamn innehåller mellanslag, måste det också placeras i citattecken ("komiska sans ms").

#Bloggtitel {
font-family: "comic sans ms";
...
Slutligen kommer vi att arbeta med CSS-koden för beskrivningen av din blogg (#beskrivning). Detta är den sista delen av de ursprungliga sex. Som ni kan se nedan listas all CSS-kod som styr typsnittets egenskaper för beskrivningstexten tillsammans på en rad. Allt vi behöver göra är att lägga till "comic sans ms" framför listan med teckensnitt som gör Comic Sans MS till standardteckensnitt för beskrivningstexten.

#beskrivning {
...
font: 78% / 1.4em "komiska sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
...
}

När du är klar klickar du på knappen Förhandsgranska för att förhandsgranska dina ändringar och stänger sedan webbläsarfönstret för att återgå till föregående webbsida. Klicka på knappen Spara malländringar. När du ser bekräftelsemeddelandet som indikerar att ändringarna har sparats klickar du på knappen Publicera. För att verifiera att din blogg har uppdaterats klickar du på fliken Visa blogg i menyn högst upp på sidan. Du kan behöva uppdatera din bloggsida för att se ändringarna.

Skärmbilder tryckta med tillstånd från Google Inc. Google^TM, Blogger^TM och BlogSpot^TM är antingen registrerade varumärken eller varumärken som tillhör Google Inc. i USA och / eller andra länder.

Anpassa rubrikavsnittet i din Blogger.com-blogg, HTML, ändra titel och beskrivning av din Blogger-blogg, ändra typsnittet för Blogger-mallen, lägg till en färgad bakgrund till Blogger-mallen, ändra CSS-kod för Blogger-mallen, lägg till CSS-kod till Blogger-mallen , Blogger mallteckensnitt, Blogger mall fontfamilj, CSS stil taggar

Tidigare Artikel

Nästa Artikel

Relaterade Artiklar

datorer

Den stora muren: brandväggen

Maj 2024

Om du använder DSL, kabelmodem eller en "alltid" -anslutning är det en bra idé att du skyddar ditt system med en personlig brandvägg. Detta är avgörande eftersom din dator alltid är live och liksom...

datorer

Fairy-tema Clipart

Maj 2024

"Fairy-tema clipart som passar för barnets barnkammare ..." var den begäran jag hade i forumet för en stund tillbaka. Jag tänkte, "Nu är jag säker på att hon inte är den enda som skulle vara...