Piristystä blogillesi

Oman huoneensa ilmettä voi uudistaa ja piristää vaihtamalla tekstiilejä. Esimerkiksi kun hankkii uuden pirteän päiväpeiton, niin sänkykin alkaa jollakin mystisellä tavalla tuntumaan uudelta. Uusia huonekaluja ei tarvita. Samaa kikkaa voi kokeilla omaan blogiinsa.

Heksakoodit ovat kuusinumeroisia värikoodeja, joiden edessä on risuaita (#). Kaksi ensimmäistä merkkiä kertovat punaisen määrän kyseisessä sävyssä, kaksi keskimmäistä vihreän ja kaksi viimeistä sinisen. Merkkeinä käytetään numeroita 0-9 ja kirjaimia a-f. 0 on tummin ja f vaalein mahdollinen sävy. Esimerkiksi #ffffff on valkoinen ja #000000 musta.

Tämä kuulostaa monimutkaiselta, mutta on käytännössä yllättävän helppo toteuttaa. Netistä löytyy monia värikarttoja, jotka poimivat heksakoodit automaattisesti. Voit googlettaa värikarttoja esimerkiksi hakusanoilla "hex", "väri" ja "koodi".

Kuvassa on esimerkki osoitteesta http://koti.mbnet.fi/winuus/varikartat.php.

Ja kuinka näillä värikoodeilla sitten voi muuttaa blogin ilmettä?

Bloggerissa tämä tapahtuu muokkaamalla blogin templatea. Tämä ohje on tarkoitettu ensisijaisesti niille, joilla on käytössä classic template (uudessa template versiossa on vain muutama näkyvä heksakoodi, voit muuttaa halutessasi templatesi classiciksi). Selaillessasi koodia ylös ja alas, huomaat varmasti nopeasti sen sisältävän paljon erilaisia heksakoodeja.

Jos haluat tietää minkä värisiä koodit templatessasi ovat, voit syöttää koodin esimerkiksi yllämainittujen kaltaisiin värikarttoihin, tai melkein mihin tahansa kuvankäsittelyohjelmaan. Kuvankäsittelyohjelmat ovat myös helppo keino saada jonkun tietyn värin koodi. Tuo kuva ohjelmaan ja sen jälkeen valitse haluamasi väri pipettityökalulla (dropper tool). Joissakin ohjelmissa heksakoodi ei näy suoraan, mutta esimerkiksi värin päältä klikattaessa se tulee näkyviin.



Ylläoleva kuva on napattu Paint Shop Pro 9 -ohjelmasta. Klikkaamalla kuvaa saat sen suuremmaksi. Kuvassa pipettityökalulla on otettu violetti väri. Pipetti ei näy kuvassa, mutta se aiheuttaa keltaisen boksin, jossa on RGB-arvoja. Alhaalla kuvassa on valkoinen laatikko, jossa heksakoodi on kerrottu.

Aloittelijan on hiukan hankala tietää, mikä koodi muuttaa mitäkin ulkoasussa, mutta kokeilemalla oppii nopeasti. Olen ottanut muutamia esimerkkejä sekä bloggerin omista templateista, että muutamista muista.

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: #000000; Tämä esimerkiksi muuttaa blogin pääfontin väriä
font: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
}/

a:link, a:visited {
font-weight : bold;
text-decoration : none;
color: #c28; Tämä muuttaa linkkien värejä
background: transparent;
}

#container {
line-height: 150%;
position: absolute;
left: 10px;
width: 800px;
background-image: url("xxx");
background-repeat: no-repeat;
background-color: #ffffff; Tämä vaihtaa taustavärin


.title {
font-size: xx-large;
font-family: 'Georgia', Verdana, Times, sans-serif;
color: #000000; Tämä vaihtaa blogin otsikon väriä
margin: 20px 250px 0px 110px;
padding: 5px;
text-align: left;

HUOM: Heksakoodi voi olla lyhennetty kolmeen merkkiin, tai se saattaa olla vain värin nimi, esimerkiksi #white. Jotkin värit toimivat myös noin. Eri ihmisten kirjoittamat koodit näyttävät vähän erilaisilta, joten siksi ei voi antaa yhtä pätevää ohjetta. Kokeileminen ei maksa mitään, eikä satuta ketään.

Kuinka helpoiten leikin templateni kanssa?

Aivan ensimmäiseksi sinun kannattaa kopioida koko templatekoodi ja tallentaa se esimerkiksi muistiolla tai wordilla. Tämä varmuuden vuoksi. Sen jälkeen muuta haluamaasi heksakoodia ja tarkista tulos esikatselemalla se (preview). Voit tehdä useampiakin muutoksia ja esikatsella ne. Jos haluat tallentaa kokeilusi, sitä kannattaa tehdä usein. On melkein suositeltavaa, että alussa tallentaa aina jokaisen onnistuneen koodailun jälkeen. Jos tulos ei tyydytäkään et menetä kaikkia onnistuneita samalla. Kumoaminenhan tapahtuu tietenkin painamalla "Clear Edits". Se poistaa kaikki muutokset edellisen tallennuksen jälkeen.

VINKKI: Voit valita jonkun erittäin huomiota herättävän värin ja kokeilla sitä vuorotellen jokaisen heksakoodin paikalle. Näin näet nopeasti esikatselusta mihin se vaikuttaa. Joskus muutos ei näy suoraan esikatselussa, esimerkiksi se voi vaikuttaa kommentteihin tai kuviin.