Mouseover banneri / kun hiiren vie bannerin päälle, banneri muuttuu

Tämä onkin vähän monimutkaisempi juttu, joten tämän postauksen suunnittelussa ja tekemisessä kului vähän enemmänkin aikaa. Mutta hei, siirrytään suoraan asiaan.

Mouseover banneri? Mikä se on?
Jos ette tämän postauksen otsikosta saaneet punaisesta langasta kiinni, mouseover banneri on siis banneri (mikä on banneri ja miten se lisätään blogiin -postaus), josta tulee erilainen, kun hiiren vie sen päälle. Alla esimerkkikuva siitä - viekääs hiiri kuvan päälle!



MITEN SAAT MOUSEOVER BANNERIN BLOGIIN?

1. Sinulla pitää olla kaksi samankokoista kuvaa - toinen kuvista on se, joka näkyy, kun hiiri viedään bannerin päälle ja toinen on se kuva, miltä haluat bannerin näyttävän silloin, kun hiiri ei ole bannerin päällä.

2. Lataa nuo kaksi kuvaa nettiin, esim. Photobucketiin.

3. Mene malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi:

#header{
display:none;
{

Kyseinen koodi poistaa blogisi headerin eli Ulkoasusta käsin laittamasi alkuperäisen bannerin. Älä pelkää vanhan bannerin katoamista, nimittäin bannerittomuuden tilalle saat pian vähän eri tavalla laitetun bannerin!

4. Seuraavaksi mene ulkoasuun. Paina Ylätunnisteen alla olevaa kohtaa "lisää gadget". Jos blogisi Ulkoasussa ylätunnisteen alla ei ole palkkia, jossa lukee lisää gadget, valitse sitten blogitekstit-ruudun viereisestä palkista "lisää gadget" -kohta ja paina sitä.

5.  Rullaa alaspäin ja valitse "HTML/JavaScript".

Lisää sinisellä rengastettuun boksiin tämä koodi:

<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>

Laita tähän blogisi osoite -kohtaan blogisi osoite http-muodossa, eli kopioi se selaimesi yläreunassa olevasta linkkipalkista.

EI siis näin: www.blogikoodeja.blogspot.fi
VAAN NÄIN: http://blogikoodeja.blogspot.fi/

Muistathan, että jos latasit kuvat Photobucketin kautta, kopioit kuvien URL-osoitteet kohdasta Direct. Täällä lisää tästä asiasta.

6.  Jos lisäsit tuon äskeisen HTML/JavaScript-koodin sivupalkkiin etkä ylätunnisteen alle, siirrä se nyt ylätunnisteen alle vetämällä.

7. Valmista! Sitten vain painat "Tallenna".

MOUSEOVER BANNERIN KESKITTÄMINEN

Lisää kohdan 5 koodin alkuun <center> ja loppuun </center>. Koodi näyttää siis tältä:

<center>
<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>
</center>

Toivottavasti toimii! :)

Gadgetien (ja blogiarkiston) keskittäminen

Olin varma, että mulla on tästä jo postaus - mutta kun sellaista etsin linkattavaksi, en sellaista löytänyt. No, jos se joskus tulee vastaan, poistan sen, mutta jos sellaista ei kerran oikeasti ole, tämä olkoon pysyvä postaus siitä eli sivupalkin gadgetien keskittämisestä.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.sidebar {
text-align: center;
}

Kaikki gadgetit eivät kuitenkaan keskity tuolla koodilla. Jos haluat keskittää blogiarkiston sisällön (joka ei tuolla aiemmalla koodilla siirry keskelle), lisää alla oleva koodi CSS:ään:

#ArchiveList{
text-align: center;
}

Sivujen/ylävälilehtien keskittäminen

Jos sinulla on blogissasi sivuja joko ylävälilehtinä tai blogin sivupalkissa ja haluaisit keskittää ne, tämä alla oleva koodi on hommaan räätälöity (malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi):

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Gadgetien otsikoiden keskittäminen

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Lisää CSS-kenttään alla oleva koodi:

.sidebar h2{
text-align: center;
}

Sitten vain painat enteriä ja tadaa, pitäisi toimia!

Muista toki tallentaa.

xoxo iltsu

Postauksen alatunnisteen keskittäminen

Postauksen alatunnisteella tarkoiteaan alla olevassa kuvassa punaisella

rengastettua aluetta:

Alatunniste on siis postauksen alapuolella oleva "lokerikko" tai "tekstiryhmä".

 Alatunniste on normaalisti vasemmalla reunalla, ja jos sen haluaa keskittää,

tarvitaan koodia.

 Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Lisää CSS:ään alla oleva koodi:

.post-footer {
text-align: center;
}  

Esikatsele & tallenna, toimiiko. Huomioikaa, että koodi keskittää vain

alatunnisteen, ei esimerkiksi kommenttiboksia.

xoxo, iltsu

Bannerin keskittäminen

Lisää CSS:ään alla oleva koodin pätkä.

.header-outer {
margin-left:100px;
}

 Muuta punaiseksi värjättyä lukua eli pikselilukua niin, että saat bannerin keskelle. 
Huomaathan, ettet voi poistaa mitään muuta merkkiä kuin lilaksi värjättyä lukua.

TAI

.header-outer {
text-align: center;
}

xoxo, iltsu

Päivämäärän & otsikon keskittäminen

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Lisää yllä olevaan kenttään alla oleva koodi kokonaisuudessaan:

h3.post-title{
text-align:center;
}

.date-header {
text-align:center;
}
 

Ja that's it, pitäisi toimia. Muista tallentaa!

xoxo iltsu