Kerroin aiemmin täällä, että teen kokeeksi muutaman sivupohjan, joista voit vaihtaa itse kirjoitustilan väriä, jos ei valmis mallikuvan väri miellytä.

HUOM: väriä voi vaihtaa ainoastaan pohjista, jotka mainitsen selkeästi erikseen. Esimerkiksi noihin aiemmin tekemiini pohjiin (paitsi tähän) ei voi vaihtaa väriä.

Myös tähän pohjaan voit vaihtaa kirjoitustilan väriä. Koodin saat täältä ja nyt kerron, miten väri vaihdetaan.

Tekstialueen värin vaihtaminen:

1. Avaa sivupohjasi koodi.

2. Etsi koodista alla olevan näköinen kohta (se on koodin alussa - huomioi, että olen hiukan poistellut merkkejä koodista, koska Vuodatus menee sekaisin, jos kirjoituskenttään postaa koodia, joten älä häiriinny äläkä varsinkaan poista niitä koodistasi):

    font-family: Arial, Helvetica, sans-serif;
    background-image: url('http://mediaserver-2.vuodatus.net/g/8/82902/1247404661_img-d41d8cd98f00b204e9800998ecf8427e.png');
    background-repeat: repeat-y; repeat-x;
    background-position: center;
background-color: #EFE4CA;
    padding: 0px;
    margin: 10px;
color: #000000;

Koodin punaisella merkitty kohta tarkoittaa blogisi taustaväriä. Sitä vaihtamalla voit muuttaa blogisi kirjoitustilan väriä reunusten pysyessä ennallaan.

Tuota lukua sanotaan heksadesimaaliluvuksi. Esimerkiksi täällä on lueteltu joitakin heksadesimaalilukuja. Värikartta ei ole kovin kattava, mutta googlettamalla varmasti löytyy parempikin.

Koodiin sinisellä merkitsemäni kohta tarkoittaa sitä, minkä värinen kirjoitusteksti blogissasi on. Sitäkin voi olla tarpeen vaihtaa.

Jos esimerkiksi haluat mustan taustan, niin tässä koodissa teksti on määritelty mustaksi (mustan heksadesimaaliluku on #000000). Silloin tekstin väriä on muutettava, jos haluat että se erottuu taustasta.

Etsi haluamasi väri värikartasta tai jos haluat valkoisen, niin sen luku on #ffffff eli muuta nollien kohdalle nuo kuusi f-kirjainta. Ole tarkkana, ettet vahingossa poista luvun lopussa olevaa puolipistettä.

Laatikoiden tekstien värit vaihdetaan hieman eri paikasta. Täällä ovat ohjeet.

Tarkoitukseni on koota nämä ohjeet omalle sivulleen, josta löytää nopeasti ja helposti haluamansa ohjeen. Nythän näitä ohjeita on vähän siellä sun täällä, mutta selkiytän asiaa.

Kuvan vaihtaminen/liittäminen blogin otsikkokuvaksi:

Nyt kerron, miten voit vaihtaa/lisätä tällaiseen kaksipalstaiseen blogiin ylä- eli bannerikuvan. Käytän nyt tätä lehtipohjan koodia mallina. Sama logiikka tosin toimii muissakin eri pohjamalleissa.

Aivan ensin mene sivupohjakoodiisi ja avaa se.

Bannerikuva laitetaan kohdasta, joka on ihan koodin lopussa eli rullaa koodia alas ja etsi seuraavanlainen kohta (se on heti ”kommentointilaatikko textarean” alla):

Merkitsin kohdan, johon kuvan URL-osoite tulee ladata, punaisella.

HUOM: olen poistanut sakaria ja muita merkkejä koodista, koska Vuodatus menee sekaisin, jos niitä laittaa postaukseen. Eli älä sinä poista mitään koodista!

 body

  ? banner ?

  table border="0" width="740" align="center" cellpadding="0" cellspacing="0">

  tr

td colspan="2"

    table border="0" width="740" align="center" cellpadding="0" cellspacing="0" style="background-image: url('tähän laitat haluamasi kuvan URL-osoitteen')"

Saadaksesi kuvan URL-osoitteen sinun tulee ladata kuva ensin johonkin nettikuvapalveluun esim. Photobucketiin tai suoraan Vuodatuksen omaan galleriaan.

KUVAN KOKO:

Kuvan koolla on merkitystä. Tähän pohjamalliin sopii kuva, jonka koko on 750x280.

Jos kuvasi on suurempi, se ei mahdu kokonaan tuohon banneritilaan. Jos se taas on pienempi, se toistuu (näyttää rumalta).

Tuo 750px leveys sopii tähän pohjaan eli sitä lukua en lähtisi muuttamaan. Jos muutat width-lukua, koko blogisivu siirtyy, sillä se muuttaa myös palstaleveyttä ts. tekstit saattavat siirtyä reunusten päälle.

Sen sijaan voit muuttaa height-lukua, joka siis vaikuttaa kuvan näkymiseen banneritilassa pustysuunnassa.

OHJE:

Etsi koodista kohta seuraavanlainen kohta. Se on ihan koodin yläpäässä.

  .blogname

    font-size: 45pt;

    text-align: center;

       font-family: Palatino, serif;

font-style: italic;

font-weight: Bold;

    color: #000000;

 width: 750px;

    height: 100px;

    padding-top: 80px;

padding-bottom: 100px;

Eli, mitä suuremman luvun laitat punaisella merkittyyn kohtaan, sen enemmän banneritila laajentuu PYSTYSUUNNASSA.

Periaatteessa siis voit ladata minkä tahansa kokoisen kuvan banneritilaan, mutta width- ja height –luvuista riippuu, kuinka paljon siitä (kuvasta) näkyy.

Oliko nämä riittävän selkeät ohjeet? Saa kysyä, jos tuli jotain mieleen.

Tarkoitukseni on tehdä sen verran selkeitä ohjeita, että niistä on oikeasti jotain apua. Tyhmiä kysymyksiä ei ole!

***

Kun puhun bannerikuvasta tai -tilasta tarkoitan tuota otsikkokuvaa tai -tilaa. Bannerille varattu tila on siis määritelty blogin sivupohjakoodissa, joten vaikka siihen lataisi viiden megan kuvan (mikä ei tietenkään ole järkevää), niin siitä näkyy banneritilassa vain koodissa määritelty laajuus.

Ei ole kivaa, jos joku ottaa omia kuviaan omaan käyttöön. Jos asia huolettaa, niin kuvat voi merkitä omalla nimellä, vaikkapa tähän tyyliin.

Koska kaikilla ei ole Photaria käytössä, annan tässä ohjeet, miten "vesileimaat" kuvasi ilmaisessa picnik-kuvankäsittelyohjelmassa.

Eli ensin mene osoitteeseen http://www.picnik.com

Etusivulla voit suoraan ladata koneeltasi kuvan picnikkiin klikkaamalla "UPLOAD PHOTOS" (sivun vasemmalla puolella).

Kun olet ladannut kuvan, se ilmaantuu selaimeesi.

Kuvan yläpuolella on vaihtoehtoja, mitä voit sille tehdä. Klikkaa  "CREATE" (se on neljäs loota vasemmalta: ylärivillä on yhteensä viisi lootaa).

Valitse senjälkeen "TEXT" (alemman valikon toinen otsikko).

Katso loput ohjeet kuvasta (suurenee klikkaamalla).

Käytössäsi on fontit, jota ovat "FONT SHOP" -merkin yläpuolella.

Jos on kysyttävää, niin saa kysyä.

Vuodatuksessa kuvat jäävät usein aika pieniksi eikä niitä saa suoraan klikkaamalla isoksi.

Jos kuitenkin haluaisit, että blogisi vierailijat näkevät kuvasi isompana, niin tässä ohje, kuinka teet linkityksen kuvaan, jolloin sen saa klikattua suuremmaksi.

1. Mene ohjauspaneeliin ja valitse sieltä kohta "kuvat". Se löytyy siitä pitkästä palkista, joka on blogisi nimen perässä ts. siitä samasta palkista, josta lisäät myös kirjoituksen blogiisi.

2. Lataa haluamasi kuva sinne kaksi kertaa:

a) Lataa toinen kuva pienennettynä (siinä on se vetolaatikko, jossa oletuksena on "Pienennys 480x480 pikseliä"). Se on se kuva, jonka lataat postaukseesi normaaliin tapaan niin kuin muutenkin lataat kuvia.

b) Lataa sama kuva uudelleen, mutta valitse vetolaatikosta haluamasi koko tai vaihtoehto "Ei skaalausta", jolloin kuvasi ladataan galleriaan sen kokoisena kuin se oikeasti on.

3. Kun olet ladannut kuvat kaksi kertaa, mene kirjoitustilaan (eli valitse "Lisää uusi kirjoitus").

Lataa haluamasi kuva/kuvat siinä pienessä koossa (eli 480x480) kirjoituskenttään normaaliin tapaan.

Kun olet ladannut kuvan, mene hiirellä sen päälle ja klikkaa sitä vasemmanpuoleisella napilla. Kuva saa ikään kuin "raamit" eli se aktivoituu.

Samalla yläpalkkiin aktivoituu linkityskuva (Lisää/muuta linkki - tällainen teksti tulee siihen kuvakkeeseen, jos viet hiiren sen päälle).

Kun klikkaat linkin kuvaa, sinulle avautuu ikkuna. Laita nyt ensimmäiseen kohtaan (eli "linkin osoite") Vuodatuksen kuvagalleriaan lataamasi isomman kuvan linkki.

Linkin saat, kun menet sinne galleriaan ja klikkaat sen kuvan isommaksi. Näin se kuva aukenee sinulle näytölle ja linkin voit kopioida sieltä selaimen osoitekohdasta.

Kannattaa pitää vaikkapa kahta ikkunaa auki samanaikaisesti, niin pääset helposti hakemaan sen linkin sieltä galleriasta eikä sinun tarvitse poistua kirjoitustilasta.

Eikö olekin helppoa? Jos ei, niin kysy ihmeessä - neuvon mielelläni!

Tein jo jokin aika sitten toisen bloginapin. Se on samanlainen kuin edellinen, mutta sävyltään vihertävä. Jos ei siis vaaleanpunainen kiinnosta, niin tässä on koodi tälle vihertävälle napille.

<a href="http://eleque.vuodatus.net/"><img src="http://mediaserver-2.vuodatus.net/g/82902/1239458210_img-d41d8cd98f00b204e9800998ecf8427e.jpg" border="0" /></a>

Ohje:

1 Kopioi yllä oleva koodi.

2. Mene kojelaudallesi ja valitse "Sivulaatikot" ja "Lisää uusi sivulaatikko"

3. Valitse vaihtoehdoista "koodilaatikko"

4. Liitä koodi sinne ja tallenna.

***

Olen havainnut, että joskus nappi ei tule heti näkyviin, vaikka sen olisi laittanut tismalleen ohjeen mukaan.

Siihen auttaa yleensä se, että menee avaamaan kyseisen sivulaatikon ja sulkee sen sitten. Mitään muutoksia ei saa tehdä.

Jostain syystä laatikko  ei vain ilmeisesti osaa muuttaa koodia heti kuvaksi. Lienee joku Vuodatuksen ominaisuus.

***

Toinen tapa lisätä bloginappi blogiin:

Tallenna nappi koneellesi. Sen jälkeen lataa se tavalliseen sivulaatikkoon.

Kun kuva on ladattu, klikkaa sitä ja valitse linkin kuva kirjoituskentän yläpuolelta.

Sinulle avautuu pieni ikkuna. Heitä siihen blogini osoite http://eleque.vuodatus.net ja  sulje ikkuna valitsemalla "lisää".

Se on siinä!

Miksi pohja ei näy omassa blogissani niin kuin mallikuvassa?

Joskus saattaa käydä, niin että sivupohja ikään kuin leviää käsiin. Venymisen määrä ei ole vakio, vaan riippuu sisällöstä. Eli sama pohja ei veny kaikilla käyttäjillä.

Blogipohjat näkyvät oikein, jos oikeassa "karsinassa" on standardien mukaista (ts. mahtuu laatikkoon kokonsa puolesta) tavaraa. Tavaralla tarkoitan kuvia ja tekstejä.

Tämän malliesimerkin sivupohjan siis levittää alakuvassa näkyvä auto. Kun auto poistetaan, sivupohja palaa normaaliksi.

Lähes poikkeuksetta kaikki huomiot, jotka liittyvät sivupohjan leviämiseen, johtuvat yllä olevasta tapauksesta. En osaa korjata sitä ainakaan toistaiseksi ja tämä ongelma esiintyy myös Vuodatuksen valmiissa pohjassa.

Teen pohjat Mozilla Firefoxilla, mutta testaan ne myös IE:llä enkä päästä niitä esille, elleivät ne näy oikein myös IE-selaimella.

Parhaiten nämä pohjat toimivat kuitenkin Firefoxilla, joka muutenkin on parempi selain kuin IE.

(Subjektiivinen mielipide alkaa:

IE on vanhanaikainen selain eikä edes noudata kaikilta osin vallitsevia speksejä. IE on jämähtänyt, koska Microsoft on kuvitellut niin pitkään omaavansa monopolin markkinoilla, ettei ole viitsinyt panostaa selaimensa kehittämiseen.

Subjektiivinen mielipide päättyy.)

Ps. Jos jollain on ratkaisu tähän ongelmaan, niin saa toki kertoa! Mielelläni korjaisin sen, jos osaisin.

Sain aikaiseksi tehdä bloginapin. Laitathan sen blogiisi, jos otat pohjan täältä. Jos ei nappi miellytä silmää, niin toki voit laittaa pelkän linkinkin.

<a href="http://eleque.vuodatus.net/"><img src="http://i196.photobucket.com/albums/aa77/Meduusa/PuvustamoNappi.jpg" border="0" /></a>

Ohje:

1 Kopioi yllä oleva koodi.

2. Mene kojelaudallesi ja valitse "Sivulaatikot" ja "Lisää uusi sivulaatikko"

3. Valitse vaihtoehdoista "koodilaatikko"

4. Liitä koodi sinne ja tallenna.

Miten otan käyttööni blogipohjan?

1. Kopioi koodi (koodiin on linkki aina kunkin pohjamallin alla).

2. Mene Kojelautaasi ja valitse ”ulkoasu”.

3. Valitse ”luo uusi blogipohja”.

4. Liitä kopioimasi koodi sinne ja tallenna.

5. Sen jälkeen voit esikatsella pohjan tai ottaa sen suoraan käyttöösi valitsemalla ”ota käyttöön”.

Nyt sinulla on uusi pohja blogissasi!

Suosittelen, että jätät vanhan pohjasi talteen siltä varalta, että liittäminen epäonnistuu tai haluat myöhemmin vaihtaa pohjan takaisin vanhaan malliisi.

Vuodatuksessahan on se hyvä ominaisuus, että blogipohjia voi olla useita tallennettuna.

Jos on kysyttävää tai pohjan laittaminen ei onnistu, niin ota rohkeasti yhteyttä joko maililla tai heitä kommentti.

Autan mielelläni parhaani mukaan!