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.

Comments

  1. miten olet saanut blogiarkiston palstoitettua?

    ReplyDelete
    Replies
    1. http://koodikielella.blogspot.fi/2013/07/kahden-sarakkeen-gadget.html < no tuolta nyt ainaki näyttäis löytyvän :D en muista millä ohjeilla ite oon tehny mut tolla luulis onnistuva :)

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. miten otsikon voi keskittää? :o ku sulla on se ja päivämäärä keskitettynä, ni ajattelin et voisit auttaa :)
    rakastan muuten sun blogia! sun kuvat on aina niin tarkkoja ja hienoja ja ää :D


    >> http://outsidethebounds.blogspot.fi/

    ReplyDelete
    Replies
    1. Tohon h3.post-titlen alapuolelle lisäät text-align:center; niin menee postauksen otsikko keskelle ja saman lisäät päivämääränotsikon kanssa mutta lisätään .date-header { alle.

      Delete
  4. Osaatko kertoa miten kaikki kirjaimet tekstin otsikossa sais isommaks, paitsi tolla small-capsilla :)

    ReplyDelete
  5. Tossa alimmassa kohdassa on selitetty :) Eli text-transform: uppercase;

    ReplyDelete
  6. Miten voi saada tosi pitkän alleviivauksen otsikolle? :)

    ReplyDelete
    Replies
    1. Lisäät tohon h3.post-title { alapuolelle border-bottom: 2px solid #000000; ja toi 2px muuttamalla muutetaan sen viivan paksuutta ja #000000 kertoo sen värin :)

      Delete
  7. Miten tollasen "sivupalkin" saa joka on tuolla yläkulmassa. Ja miten noi saa aukeemaan tolleen vetämällä hiiren päälle? :)

    ReplyDelete
    Replies
    1. Se on tosi vaikee selittää ja vaatii taitoa. joten en ala tässä kommenteissa sitä kertomaan :)

      Delete
  8. miten ihmeessä mä muokkasin tätä eilen eilen ja tänään se on palautunu takasin samanlaiseks, mut muokkaukset on pysyny samana?

    ReplyDelete
    Replies
    1. Aika outoo :D En yhtää tiiä

      Delete
    2. Miten siis saan yliviivatun otsikkoon? :D

      Delete
    3. Lisää html koodiin head tagien väliin koodi

      h3.post-title {
      text-decoration: line-through;
      }

      Delete
  9. voisitko tehä myös tohon päivämääräotsikkoon ton koodijutun, ku ite en sitä osannu tehä :Dd

    ReplyDelete
    Replies
    1. Muuten sama juttu, mutta muokataan kohtaa date-header :)

      Delete
  10. Miksiköhän ei mulla toimi? :)

    http://tia-smilinglife.blogspot.fi :)

    Ja miten saa tollaset sivupalkit kun http://saijis.blogspot.fi ?

    ReplyDelete
    Replies
    1. Etsi sun koodista seuraavat kohdat ja poista ne:
      1.
      h3.post-title {font-family: 'Quattrocento', serif;}

      2.
      h3.post-title {
      font-variant: normal;
      letter-spacing: 1px;
      text-transform: UPPERCASE

      En tiedä :)

      Delete
  11. Heips. Osaisitko sanoa, miksi mun tekstin otsikon fontti (Jokerman) ei näy muille kuin minulle? http://minna1994.blogspot.fi/

    ReplyDelete

Post a Comment