Blogiotsikosta hienompi?

Jos haluat blogisi otsikon jollakin hienommalla fontilla, pitää teksti liittää itse otsikkoon eli suoraan kuvaan, joka tuossa yläreunassa banner-nimellä jököttää. Tähän tarvitaan kuvankäsittelyohjelmaa. (Windowsin mukanahan tulee Paint-ohjelma, mutta se on hiukan liian alkeellinen tähän puuhaan.)

Jos sinulla ei ole esimerkiksi Photoshoppia, voit downloadata itsellesi GIMP-nimisen ohjelman täältä. Itse en ole kyseistä ohjelmaa käyttänyt, mutta sain siihen paljon suosituksia kysellessäni tähän puuhaan sopivaa ohjelmaa.

Ja sitten itse ohjeisiin. Jos näistä tuntuu uupuvan jotain, tai selitän jonkun asian liian vaikeasti, nakkaa ihmeessä taas sähköpostilla tai kommentilla tuonne itse merkintöihin (mieluiten viimeisimpään niin huomaan sen varmasti). Sama juttu, jos huomaat jotain lisättävää tai jos jokin asia on tässä tehty liian vaikeasti ja tiedät helpomman konstin. Näin kuitenkin itse toimin, ja muutaman kerran jälkeen homma on jo luonnistunut sen kummempia miettimättä.

KUINKA TEHDÄ OMA OTSIKKO BLOGIIN?
  1. Tallenna nykyinen otsikkokuvasi. Se onnistuu surffaamalla blogisi etusivulle ja klikkaamalla hiiren oikeaa nappia otsikkokuvan päällä (mallikuva) ja tallentamalla otsikon "taustakuva" omalle koneellesi - luonnollisesti paikkaan, josta sen myös myöhemmin löydät.
  2. Avaa kuva kuvankäsittelyohjelmassa.
  3. Valitse kirjoitustyökalu (ainakin Photoshopissa työkalu on merkitty symbolilla "T" työkaluvalikossa) ja aseta kursori otsikon päälle hiirtä klikkaamalla. Tämän jälkeen kirjoita kuvan päälle blogisi nimi eli teksti, jonka haluat otsikkokuvassasi näkyvän. Kun teksti on kirjoitettu, sitä voi käsitellä maalaamalla sen ja valitsemalla erilaisia fontteja fonttivalikosta tai värejä väripaletista. Myös tekstin kokoa voi muuttaa. Jos et löydä mieleistäsi fonttia, voit helposti valita mieleisesi netistä, tuhansien ilmaisten fonttien joukosta. Laitan tuonne loppuun vielä ohjeet, kuinka fontteja voi koneelle asentaa.
  4. HUOM! Vuodatuksen blogeissa on otettava tuo Vuodatuksen oma ylälaita huomioon, eli kuvaan kannattaa jättää pieni suikale tyhjää tilaa yläreunaan. Ota tämä huomioon tekstiä sommitellessasi.
  5. Kun olet saanut tekstin oikean kokoiseksi, väriseksi ja muutenkin mieleiseksi, tallenna kuva vaikkapa nimellä oma_banneri.jpg. Näin et kadota alkuperäistä otsikkokuvaa, ja voit halutessasi muutella sitä myöhemminkin.
  6. Nyt tekemäsi otsikkokuva ja uusi teksti pitäisi saada internettiin. Se onnistuu vaikkapa lisäämällä kuva Vuodatuksen kuvagalleriaan tai esimerkiksi rekisteröitymällä Photobucket-palveluun. Photobucketista saat kuvan sijainnin (mallia http://osoite.com/oma_banneri.jpg) tietoosi heti kuvan sinne ladattuasi, Vuodatuksessa auttaa vaikkapa seuraava kikka: lataa kuva kuvagalleriaan, avaa galleria. Klikkaa otsikkokuvasi kohdalla suurennuslasia, jolloin näet kuvan oikeassa koossaan.
    - Explorerin käyttäjät: klikkaa oikeaa nappia, valitse Properties / Ominaisuudet. Maalaa ja liitä kuvan (URL) talteen.
    - Firefoxin käyttäjät: klikkaa oikeaa nappia ja valitse Copy Image Location / mitä onkaan suomeksi ja  liitä osoite talteen.
  7. Nyt sinulla on tiedossasi siis tekemäsi otsikkokuvan osoite. Surffaa seuraavaksi blogisi asetuksissa kohtaan Ulkoasu-asetukset ja klikkaa käytössäsi olevan pohjan kohdalta "Muokkaa"-linkkiä.
  8. Etsi koodista kohta, jossa esiintyy loppupäätteenä sana "banner.jpg". Kopioi koko tämä osoite alkaen kirjaimista http: ja päättyen kirjaimiin .jpg ja tallenna tämä vuorostaan jonnekin (varmuuden vuoksi, jos joku meneekin pieleen oman otsikkosi kanssa.) Pistä tilalle oman kuvasi osoite.
  9. Nyt sinun pitää vielä poistaa blogistasi niillä peruskirjaimilla muodostuva otsikko, sillä nythän blogisi nimi on itse kuvassa, eikä sitä tarvita enää tekstimuodossa.
    - Ensin perustietoa koodin lukemisesta: koodissa esiintyvät sulkumerkit merkit { ja } toimivat ikäänkuin "lauseen" aloittavana ja lopettavana tekijänä. Ei yhtä ilman toista, joten ole tarkkana koodinpätkää poistaessasi.
    - Serenity-pohjassa sekä siitä muokatuissa muissakin pohjissa blogin nimi näkyy koodissa nimellä "blogname". Näin ollen koodista poistetaan pätkä alkaen sanasta .blogname aina seuraavaan sulkeutuvaan sulkumerkkiin asti (se sulkumerkki myös). Samoin tehdään kohdalle .blogname a
    <div class="blogname"><a href="/"><? bloginNimi ?></a><img src="http://vuodatus.net/images/spacer.gif" width="15" height="1" alt=""/></div>
    - Oletuspohjassa sekä siitä muokatuissa pohjissa (laatikot molemmin puolin blogimerkintää) otsikon nimi näyttäisi olevan "blognamen" sijasta "blogiotsikko". Tehdään siis kohdille .blogiotsikko sekä .blogiotsikko a samalla tavalla: poistetaan ne aina seuraavaan sulkeutuvaan sulkumerkkiin asti (se sulkumerkki myös). Lisäksi loppupuolelta koodia kokonaan pätkä
        <div class="blogiotsikko"><a href="/"><? bloginNimi ?></a></div> -kohdalle (pitäisi olla heti siinä perässä). Lisäksi poistetaan koodin loppupuolelta koko seuraava pätkä:
  10. Klikkaa Tallenna.
  11. Surffaa blogisi etusivulle, päivitä sivu ja varmista että kaikki on hyvin! Jos ei, voit vaihtaa tilalle vanhan otsikkokuvan ja ihmetellä rauhassa, mikä meni pieleen.
Koodin kanssa puuhastellessasi ole utelias, tutustu netistä löytyviin CSS-oppaisiin (googlella löytää monenmoista, suomeksikin useita) ja kokeile. Muista kuitenkin aina pitää tallessa myös alkuperäinen versio siltä varalta, että jokin menee pieleen!



Fonttien asentaminen koneelle?

No sehän on helppoa kuin heinänteko. Ota kädestä kiinni ja seuraa näitä ohjeita:

  1. Etsi fontteja. Surffaa googleen, pistä hakusanaksi "free fonts" ja ala klikkailla. Ensimmäiset esilletulevat fonttisivut ovat varmasti alkuun todella riittoisia, esimerkkinä nyt vaikka 1001freefonts, free-fonts.com sekä fontfreak.com.
  2. Kun olet löytänyt mieleisesi fontin (tai vaikkapa sata sellaista), tallenna ne koneelle omaan kansioonsa - voit esimerkiksi luoda "fontit"-kansion tätä varten. Fontit ovat yleisimmin zip-muodossa eli pakattuna tiivimpään "tilaan". 
  3. Seuraavaksi fontit pitää purkaa pakkauksistaan käyttöön. Se käy vaikkapa WinRAR-ohjelman avulla, jonka voit ottaa käyttöösi koeajaksi maksutta täällä. Avaa kansio, jonne olet fonttipaketit tallettanut, maalaa ne kaikki ja klikkaa hiiren oikeaa nappia.
  4. Valitse "Extract here", jolloin näet pakettien purkautuvan ja (ainakin Windowsissa) ilmestyvän kansioon ttf-päätteisinä.
  5. Nyt sinut tarvitsee nää kopioida tai siirtää nämä ttf-päätteiset tiedostot kansioon Ohjauspaneeli -> Fontit. Jätä netistä keräämäsi zip-paketit sinne missä ne ovat, ne voi poistaa vaikka kokonaan sitten, kun fontit on asennettu ja todettu toimiviksi.
  6. Kun seuraavan kerran käynnistät kuvankäsittelyohjelman, pitäisi fonttien toimia.
Toivottavasti homma toimii! Kysymyksiä saa esittää ja korjauksia tehdä, ehdottomasti :)