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.