Blogin ulkoasun muokkaaminen: Widgetin otsikon fontin muuttaminen

Olette olleet todella kiinnostuneita siitä, millä eri tavoin sivupalkin widgettien ulkoista olemusta voi oikein muuttaa. Nämä widgetit vaikuttavat paljon blogin ulkoasuun, joten niihin on syytäkin kiinnittää huomiota. Uudella fontilla saa paljon aikaan! Mutta liika on liikaa, joten ei kannata antaa näiden juttujen lähteä ihan lapasesta.

Tänään muutetaan widgettien otsikko joksikin ihan muuksi, mitä Bloggerilla itsellään on tarjota. Google Fonteista voit valita lukuisien eri fonttien väliltä juuri sinua innostavat tapaukset. Pidä kuitenkin mielessä, että blogissa ei kannata monella fontilla kirjoitella, sillä se ei ole enää hienoa, vaan sekavaa.

Tarvitset ensinnäkin varmuuskopion blogistasi. Sitten kun se on tehty, saat luvan edetä.

Widgetin fontin muuttaminen

1. Klikkaile pikku kätösilläsi Googlen fonteista kertovaan postaukseen ja seuraa ohjeita aina sinne asti, kunnes puhutaan kohdasta 4 ja CSS-koodin lisäämisestä. Siinä vaiheessa palaa tämän postauksen puolelle ja seuraa ohje täällä loppuuun.

2. Nyt suuntaa Malli -> Mukauta -> Lisäasetukset -> Lisää CSS ja syötä kenttään seuraava koodi, johon olet "kohta 4" tilalle kopioinut täysin saman koodin, joka siellä Google Fonttien kohdassa 4 on.

.sidebar h2 {kohta 4}

4. Katso esikatselusta, miltä vaikuttaa. Jos fontti on liian pieni, suurenna sitä. Jos olet tehnyt jo aikaisemmin widgetin otsikon koon muokkaamisesta kertovan postaukseni perusteella CSS:n, jolla olet muokannut fontin kokoa, niin luonnollisesti muokkaat tätä lukua nyt haluamaksesi. Jos et ole kyseistä koodia vielä lisännyt, voit lisätä juuri äsken laittamaasi CSS:än seuravaan lisukkeen:

.sidebar h2 {kohta 4 font-size: 30px;}

Muutat sitten tuon luvun 30 haluamaksesi.

Esimerkiksi minun kuvassa oleva widgettien otsikon CSS-koodi, joka pitää sisällään niin fontin kuin sen koonkin, näyttää tältä:

.sidebar h2 {font-family: 'Ravi Prakash', cursive; font-size: 30px;}

Katso, että kaikki pilkut, puolipisteet, välit sun muut tulevat kohdilleen.

5. Sitten tallennat ja olet valmis!

Näin näppärästi onnistui sekin. Toivottavasti ohje oli mieleenne!