keskiviikko 18. helmikuuta 2015

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!

10 kommenttia:

  1. Kiitos vinkistäsi! En löytänyt sivuiltasi ohjetta, mutta osaisitko näin äkkiseltään neuvoa, millä css koodilla saisi yhtenäisen viivan välilehtien alle? Tekisi mieli kokeilla sopisiko sellainen omaan blogiini ja tässä hetken olen googlaillut ohjeita, mutta tuloksetta :)

    www.essiesophie.blogspot.com

    VastaaPoista
    Vastaukset
    1. Hmmm.. ei ole tosiaan sellaiseen ohjetta ja näin nopeasti en osaa sanoa, miten onnistuu. Mutta laitan tämän toiveen muistiin ja jos ohjeen löydän tai keksin, niin julkaisen sen tietty!

      Poista
  2. Osaatko sanoa miten blogin sivut/välilehdet saa liitettyä esim. kuvaan ilman, että ne on kuitenkaan blogin yläosassa? niinkuin tässä blogissa sivuja on laitettu tekstin "päälle" : http://herttakoiruus.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Nyt en kyllä ihan ymmärtänyt, mistä on kyse. En nähnyt ko. blogissa välilehtiä ollenkaan.

      Poista
    2. Oikealla sivussa, 'Tervetuloa' takstin alla on mm. 'Hertta' 'Kerttu' jne. ja niitä klikkaamalla pääsee koirien sivulle, mikä on vähän niin kuin välilehti, muttei kuitenkaan ole ylhäällä tai sivussa silleen tietyllä tavalla, mika tulee kun siirtää Sivut gadgetin reunaan. En tiiä selkeyttikö

      Poista
    3. No nyt bongasin. En tiedä, miten hän on ne tehnyt mutta ihan samanlaista jälkeä saa, kun lisää HTML-gadgetin ja laittaa sinne seuraavaa koodia:


      <center><a href="http://osoite">Välilehti | </a><a href="http://osoite">Välilehti | </a><a href="http://osoite">Välilehti | </a><a href="http://osoite">Välilehti | </a>
      <a href="http://osoite">Välilehti | </a></center>

      Poista
  3. Kiitän blogistasi,kullanarvoinen!

    VastaaPoista
  4. Kiitos Susanna jälleen hienoista ohjeistasi <3 Kun sinun ohjeita noudattaa, eikä poikkea omille teilleen, onnistuu aina. Tämän sinun postauksen myötä meni blogissani ulkoasu aikalailla uusiksi. Pelkistin entisestä ja tein sen oikeastaan vain fonttien yhtenäistämisellä. Oikein olen tyytyväinen. Yksi aamupäivä siinä meni, mutta kannatti. Nukun yöni nyt rauhallisemmin ;D
    Ihana olet, kun jaksat hyviä ja hyödyllisiä ohjeita julkaista. Kiitos ja halaus!

    VastaaPoista
    Vastaukset
    1. Kiitos Pirjo, tosi kiva kuulla! Ja hyvältä näyttää myös blogisi!

      Poista