Postauksen otsikon muokkaaminen bloggerissa

Postauksen otsikon muokkaaminen Bloggerin mukautus toiminnossa antaa periaatteessa mahdollisuuden vaan sen fontin valitsemiseen. Päätin nyt kertoa teille miten siitä voi muokata just sellasen ku siitä haluu. Muokkaamista varten sun täytyy etsiä html-koodista kohta h3.post-title, .comments h4 {. Niiku ovelimmat osaa varmasti päätelläkin, tällä hetkellä kaikki sen alapuolella vaikuttaa postauksen otsikkoon mutta myös kommenttien otsikkoon. Jos se on ihan ok ni tän seuraavan vaiheen voi ignorata...

Jos haluut kuitenki muokata vaan sitä postauksen otsikkoa sun täytyy tehdä näin...
Leikkaa tosta h3.post-title, jollon siihen jää vaan .comments h4 {. Liitä se siihen yläpuolelle ja ota se pikku perästä pois ja lisää siihen {-merkki. Sen jälkeen paina enter ja lisää siihen seuraavalle riville }-merkki. Sen pitäis siis näyttää tältä...
h3.post-title {
}
.comments h4 {

Sen jälkeen päästäänkin sitte jo ite muokkaamiseen.
{-merkin jälkeen paina enter ja siihen väliin lisätään otsikon css-koodi. Selitän tän asian selittämällä mitä kaikkea voi esimerkiks muuttaa. Ensin kuitenki esimerkki miltä se koodi esimerkiks vois valmiina näyttää...

h3.post-title {
font-variant: small-caps;
font-family: verdana;
font-size: 20px;
color: #333333;
letter-spacing: 2px;
text-decoration: underline;
text-transform: lowercase;
text-align: center;
}

Tän saman voi myös tiivistää...

h3.post-title {
font: normal normal small-caps 20px verdana, sans-serif;
color: #333333;
letter-spacing: 2px;
text-decoration: underline;
text-transform: lowercase;
text-align: center;
}

Kohdat johon ei mitään muutoksia tee voi halutessaan ottaa pois.

Font-style
Tähän kohtaan vaihtoehdot on italic ja normal. Joskus saatetaan käyttää myös oblique, joka on periaatteessa sama asia kun italic.

Font-weight
Tähän kohtaan vaihtoehdot on bold, (bolder, lighter) normal tai 100-900 (sadan välein), joista 300 on normaali ja 700 paksunnettu. Kaikki noi ei kuitenkaan toimi kaikissa fonteissa, joten bold ja normal on varmimmat vaihtoehdot.

Font-variant
Vaihtoehdot small-caps tai normal. Small-caps muokkaa kaikki kirjaimet isoiks. Tässä on esimerkki small-caps:sta.

Font-family
Fontin "suku" eli siis sen fontin nimi mitä haluut siinä käyttää. Esimerkiks times tai verdana. Lisää vaihtoehtoja löytyy googlaamalla, mutta esimerkiks www.web.mit.edu/jmorzins/www/fonts.html.

Font-size
Fontin koon voi ilmottaa monella tavalla. Esim. 15px, 1.2em, tai 90%. Englanniksi myös xx-large - xx-small käytetään.

Font-color
Fontin väri voi olla esitetty joko esimerkiksi muodossa rgb(255,0,0), #000000 tai englannin kielisessä koodissa värin nimellä esim. black. Netistä löytyy paljon värin css:ällä muokkaamisessa auttavia sivuja. Esimerkiks www.w3schools.com/tags/ref_colorpicker.asp

Text-decoration
Mahdolliset vaihtoehdot on underline (alleviivattu), overline (yläpuolelta viivattu) ja line-through (yliviivattu).

Letter-spacing
Tän avulla muokataan kirjainten väliin jäävää tilaa.
Tässä tekstissä letterspacing on 1px. Tässä tekstissä letterspacing on 5px.

Text-align
Tähän kohtaan voi laittaa left, right, center tai justify. Eli tällä voi muokata tekstin esim asettumaan vasempaan tai oikeeseen reunaan, keskitetysti tai menemään reunasta reunaan.
Jos haluu saada tekstin otsikon keskelle tarvitaan tätä.

Text-transform
Tähä on kolme mahdollista: lowercase (kaikki pienellä), uppercase (kaikki isolla) ja capitalize (ensimmäinen kirjain isolla).

Nyt siis jos halutaan otsikon fontiks paksunnettu georgia koolla 20px harmaassa värissä sekä kaikki kirjaimet isolla ja asettumaan oikeeseen reunaan, tehdään näin...

h2.post-title {
font: bold 20px georgia;
color: #cccccc;
text-transform: uppercase;
text-align: right;
}

Tältä näyttää toi äsken muokattu käytännössä.

Aika suurpiirteisesti selitetty, mutta toivottavasti edes joku sai jotain tästä irti. Jos tulee jotain muuta kysyttävää ni mulle voi aina laittaa sähköpostia (julia.ehrnrooth@gmail.com) ja koitan vastata parhaani mukaan.

Näillä samoilla muunnellaan kaikkia tekstejä, joten nyt osaatte sitte muokata myös esim. päivämäärän otsikon.