Apupostaukset

Tänne siis laitan apupostauksia blogin muokkaamiseen. Voit pyytää multa apua jos on jotain mielessä ja laittaa ideoita postauksiin. En postaile tänne säännöllisesti vain sllon, kun mieli tekee.
Yritän selittää asiat mahdollisimman tarkasti, että tämän homman tajuaminen olisi teille mahdollisimman selkeää. En ole mikään ammattilainen, joten enitsekkään osaa kaikkia juttuja, mutta harjoittelen kokoajan :)

HUOM! Joka ohjeessa ne koodit pitää laittaa tänne, joten laitan tän nyt tähän ylös, ettei sitä tarvii joka eri ohjeeseen erikseen laittaa. Eli kun oot kirjautunu sun bloggeriin, ota sieltä sivuvalikosta tuo "Malli" ja sitten klikkaa kohtaa "Muokkaa HTML-koodia".

Sivujen keskitys

 1. Siihen sivulle tulee tuo koodilaatikko. Selaa niin kauan alaspäin että tulee tuo kohta "/* Tabs". Jos se ei näy, niin paina kaikista niistä vasemmalla reunalla olevista mustista nuolista, niin sen pitäis kyllä tulla näkyviin jossain vaiheessa.

2. Lisää tuon "border-top"-kohdan alle teksti "margin-left:106px;". (Mutta älä laita noita heittomerkkejä!) Tuota numeroa muuttamalla sitä saa siirrettyä, ja mitä pienempi numero, niin sitä enemmän se sivupalkki siirtyy vasempaan reunaan, ja isomman numeron pistämällä se siirtyy enemmän oikeelle.

 Mulla on siinä tuo 106px, mutta se riippuu esim. siitä sivupalkin tekstien koosta. Sen jälkeen vaan paina "Tallenna malli"-kohdasta koodilaatikon yläpuolelta, ja sen pitäis toimia :) 

Niiden sivujen linkkejä (eli kokoa, fonttia ja väriä) saa muutettua kun menee sinne Mallin suunnittelutyökaluun, painaa siellä kohdasta "Lisäasetukset", ja siitä valikosta kohdasta "Välilehtien teksti". Sen alla on sitten kans kohta "Välilehtien tausta", mistä saa vaihdettua sen taustavärin, jos siihen sellasen haluaa.

Otsikon keskitys

1. Kun se koodilaatikko aukeaa siihen (ja oot avannu ne kaikki mustat nuolet sieltä sivulta, että ne kaikki koodit näkyy) niin eti sellanen kohta ku "h3.post-title".

2. Lisää tuon "margin"-kohdan alle teksti "text-align:center;" (Mutta älä laita noita heittomerkkejä.)
 Tallenna ja sen otsikon pitäis olla siirtyny keskelle.

Päivämäärän keskitys

1. Kun se koodilaatikko aukee, eti sieltä kohta "/* Headings" ja siitä tuo kohta "h2".

2. Lisää tuon "font"-kohdan alapuolelle teksti "text-align:center;". Tallenna ja sitten sen pitäis toimia.

Gadgettien otsikoiden muuttaminen

Gadgettien otsikoilla tarkoitan niitä, jotka on mulla esim. "Rakkaat stalkkerini", "Blogiarkisto" jne siellä sivupalkissa. Jos meen ite muokkaamaan sitä gadgettien tyyliä sieltä mallin suunnittelutyökalusta gadgetit-kohasta, nii sillon se päivämääräotsikko pelkästää muuttuu. Näillä ohjeilla voi muuttaa niitä pelkkiä gadgetteja, esim. fonttia ja väriä :) Tätä oli aika vaikee selittää, mut toivottavasti tästä nyt jotai tajuaa!

1. Kun se koodilaatikko aukee siihen, selaa sinne aika alas. Siellä pitäis näkyä niitä gadgettien "nimiä", esim. "Blogiarkisto", "Lukijat" jne. Mulla se lukijat-kohta oli vähän ylempänä, mut kuitenki sieltä koodilaatikon loppupuolelta ne löytyy. Valihe ensin, minkä gadgetin otsikkoo haluat muuttaa. Tossa vasemmanpuoleisena on ympyröitynä sen gadgetin nimi, jota tarvitaan siinä koodissa, joten paina mieleen ne, joita haluat muuttaa! Blogiarkisto on "BlogArchive1", lukijat on "Followers1", ja sellanen kyselyjuttu (mikä mullakin on) on "Poll1". Oikeenpuolimmaisessa ympyrässä on se nimi, millä nimellä se gadget on blogissa. Esim. lukijakohassa mulla lukee se "Rakkaat stalkkerit".

2. Eti seuraavaks sieltä koodilaatikon aika yläosasta kohta, jossa lukee "/* Content". Mulla se on ainakin tossa rivillä 173 niin kuin näkyyki, eli aika alussa. Sen alapuolelle tulee ne koodit.

3. Tossa on nyt muokattu "Lukijat"-gadgetin otsikkoa, niinku tosta Followers-nimestä jo näkeeki. Punasen ympyrän sisällä on se koko koodijuttu, josta selitän kohta lisää. Vihreellä ympyröidyt kohat on niitä pakollisia, ja ilman niitä koko gadgettien muuttaminen ei onnistu. Ne kohat, joita ei oo ympyröity vihreellä, ei siis oo pakollisia, eli ei tarvii laittaa esim. fontin kokoa jos sitä ei halua muuttaa. 

Eli alkuun pitää laittaa (tässä tapauksessa ku muokataan lukijat-gadgettia) tuo "#Followers1 {" (Heittomerkkejä ei piä laittaa!) Koodin loppuun pitää sitte aina laittaa tuo "}"-merkki. Jos haluaa muokata esim. blogiarkistoo, pitää tietenki laittaa koodin alkuun "#BlogArchive1 }"-teksti tuon "#Followers1"-kohan tilalle.
Toi "color" on tietty se otsikon väri, ja sun pitää laittaa sen värin html-koodi tuohon. Mulla se on tuo "#daa0a0, mut jos haluaa esim. ihan normaalin punasen niin voi laittaa vaan että "color: red;". "Font-family" on fontti ja "Font-size" on sen otsikon koko.

 "Font-style" tarkottaa sen tekstin tyyliä, eli se voi olla kursivoitu (italic), lihavoitu (bold), alleviivattu (underline) tai yliviivattu (strike). Tuo viimenen kohta tarkottaa sitä, että se otsikko on keskitetty. Jos sen haluaa vasempaan reunaan, niin center-sanan tilalle left, ja jos oikeeseen reunaan niin right.






Bannerin keskitys

1. Eti sieltä koodilaatikosta kohta, jossa lukee "/* Header".

2. Lisää tuon "background-image"-kohdan alle teksti "margin-left:100px;" (Mutta ei heittomerkkejä!) Tuota numeroa voi taas ite muuttaa, ja mitä suurempi numero, sen kauemmas se siirtyy vasemmasta reunasta.

Kuvien haaleneminen/tummuminen-efekti

Tällä koodilla saa siis tehtyä blogin kuville sen, että kun hiiren vie kuvan päälle, se joko haalenee tai tummenee.


1. Etsi koodilaatikosta kohta "/* Content", ku tämä koodi tulee sen alle. En tiiä, et toimiiko koodit jos ne laittaa muualle kohtaan koodilaatikossa, joten kannattaa varmuuden varalta laittaa tuon otsikon alle, nii melko varmasti pitäs toimia.

2. Lisää sen Content-otsikon alle tämmönen koodi:

img { filter: alpha(opacity=100); opacity:1.0; -webkit-transition: all .3s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .3s ease-out;}
img:hover { filter: alpha(opacity=70); opacity:0.7; -webkit-transition: all .3s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .3s ease-out;}

Tällä koodilla ja noilla numeroilla kuvat siis haalistuu, ku hiiren laittaa niitten päälle. Tossa kuvassa vihreellä ympyröityinä on ne kohdat, joita voi muokata ja sillä tavalla vaikuttaa haalentumiseen.
 Koodissa ylempänä olevat "opacity"-kohdat tarkottaa, miten haalea kuva on jos hiiri ei oo siinä sen päällä.
 Nuo 100- ja 1.0-numerot tarkottaa sitä, että se ei oo sillon yhtään haalea, vaan yhtä tumma/vaalea millasena se on sinne blogiin ladattuki. Alemmat "opacity"-kohat (jotka on tuossa koodissa nuo numerot 70 ja 0,7) tarkottaa sitä, millaseksi kuvat haalistuu. Jos siihen laittaa esim. numerot 90 ja 0,9, kuvat haalistuu aika vähäsen. Sit jos taas laittaa vaikka molempiin numeron 0, kuvat haalistuu iha läpinäkyviksi.
Jos taas haluaa, että ne kuvat on haaleita ja tummenee kun hiiren laittaa päälle, tarvii nuo numerot vaan kääntää toisinpäin. Sillon koodi näyttää tältä:

img { filter: alpha(opacity=70); opacity:0.7; -webkit-transition: all .3s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .3s ease-out;}
img:hover { filter: alpha(opacity=100); opacity:1.0; -webkit-transition: all .3s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .3s ease-out;}

Eli tossa ne numerot on vaa vaihtanu paikkaa, ja ku hiiren laittaa päälle, nii se kuva tummenee sen tummuseksi, millasena se on sinne blogiin ladattu. Ja noita numeroita voi taas muuttaa riippuen miten haaleiksi ne haluu :)
HUOM! Sen haalistumisen voi poistaa laittamalla noihin kaikkiin opacity-kohtiin numeron 50! Sen jälkee ne ei muutu ollenkaa haaleemmiksi/tummemmiksi.

Lukijaksiliittymisnappi blogiin

  1. Valitse blogin sivuvalikosta kohta "Ulkoasu" ja sieltä "lisää gadget".

2. Selaa luetteloa niin kauan alaspäin, että näät kohan "Kuva".

3. Mee seuraavaksi omaan blogiisi ja paina kohasta "Liity lukijaksi". Sieltä saa sen lukijanappiin tarvittavan koodin.

4. Siihen sivulle aukeaa tuo ikkuna. Kopioi tosta osoteriviltä tuo linkki, joka on ympyröity punasella.

5. Mee nyt sinne äsken lisäämääsi uuteen gadgettiin ja lataa sinne se kuva, minkä haluat siihen liittymisnappiin. Linkki-kohtaan pitää liittää siltä äsköseltä osoiteriviltä kopioitu linkki. Sitten vaa pitää tallentaa, ja liittymisnappigadgetin voi siirtää haluamaan kohtaan blogissa. Jos lukijapalkkia ei halua näkyville, nii tällane liittymisnappi on iha hyvä vaihtoehto!

 Värillinen Youtube-palkki

1. Mee sun blogissa siihen postaukseen, mihin haluat laittaa sen palkin. Klikkaa postauksen vasemmasta ylänurkasta kohasta "HTML", koska se koodi pitää laittaa tälle "HTML-puolelle".

2. Mee Youtubeen ja eti sieltä haluamasi kappale. Eti sieltä alapuolelta kohta "Jaa" ja klikkaa siitä, ja sen jälkeen klikkaa kohasta "Upota". Ruksita alapuolelta kohta "Käytä vanhaa upotuskoodia" ja kopioi toi koodi (eli tuo vihreellä ympyröity) ja liitä sinne postauksen "HTML-puolelle".

3. Noi vaaleella merkityt kohat eli numerot määrittää sen palkin koon. Noitten "560"-numeroiden tilalle tulee se palkin leveys, et haluaako siitä sellasen pienen vai esim. postauksen kuvien levyisen. Sit noiden "315"-numeroiden tilalle tulee se palkin korkeus, ja siihe on hyvä laittaa numero 25, ku muuten sitä videota saattaa vähä näkyä siitä palkin yläreunasta.
 Noi molemmat turkoosilla merkityt kohat on niitä, jotka otetaan pois ja siihen tilalle tulee se uus värikoodi. Eli eti siitä koodista kaks tällasta kohtaa: hl=fi_FI&version=3 ja poista ne!
 On tärkeetä ettet poista tuon numeron 3 jälkeen olevaa heittomerkkiä, etkä tuon kirjaimen "h" edessä olevaa kysymysmerkkiä, sillä se uus koodi tulee niitten väliin.
 Jos ykskin merkki siitä koodista vahingossa poistuu, nii se ei luultavastikkaan toimi sillon. 
Tuo kohta joka pitää poistaa ei kaikkien videoiden upotuskoodissa oo välttämättä ihan samanlainen, vaa se saattaa olla myös tämän näkönen: version=3&hl=fi_FI Tärkeintä on kuitenki muistaa, ettei poista sitä heittomerkkiä (") tai kysymysmerkkiä (?)!

4. Lisää niiden kahden poistetun kohdan tilalle, heittomerkin ja kysymysmerkin väliin tällanen koodinpätkä (kuvassa merkattu turkoosilla):

version=2&loop=1&showinfo=0&showsearch=0&color=ffffff&color1=0xffffff&color2=0xffffff&color=ffffff

 5. Sitte ku se koodi on laitettu, on mahollista muokata sen palkin väriä. Tossa kuvassa on turkoosilla merkattuina kaikki ne kohat, joissa lukee se palkin väri, tässä tapauksessa valkonen. (Valkonen on html-koodina FFFFFF.) Ainakaa mä en saanu toimimaan, jos laitoin tuohon FFFFFF-kohtien tilalle jonku värin nimen, esim "green", vaa sen pitää olla se html-koodi. Netistä löytyy helposti paljo kaikkia värikoodeja, jos googlaa esim "värikoodeja", "värien html koodeja" jne. Ku kopioi värikoodin, nii sitä koodin eessä olevaa risuaitaa (#) ei pidä ottaa, vaa pelkkä tuo kirjain-numero-koodi. Sitte vaa laitetaan se tietty värikoodi jokaisen (eli niitähän on 8 kpl) FFFFFF-kohan tilalle ja tallennetaan.

We heart it -gadget blogiin

1. Kirjaudu sun We heart it:iin ja klikkaa yläkulmasta siitä sun avataren vieressä olevasta nuolesta. Paina sitten linkistä "Goodies". 

2. Selaa alas päin niin kauan, että tulee kohta "Live widget for your blog", ja kopioi laatikossa oleva koodi.

3. Mee sun blogiin kohtaan "Ulkoasu", sieltä "Lisää gadget" ja selaa valikkoo alaspäin, kunnes tulee toi "HTML/Javascript"-kohta. Sinne liität sen koodin ja gadgetin pitäs olla päivittynyt. Jos haluat keskittää sen, niin lisää koodin alkuosaan <center> koodin viimeiseksi </center>.

Kursori blogiin

1. Mee eka sivulle "www.cursors-4u.com/" ja valihe sieltä vasemmalla olevasta valikosta kursorin aihe ja sieltä löytyy niitä kursoreita. Esim. "Pointers" on sellanen normaalin kursorin näköinen mutta esim. eri värinen tai kokoinen.

2. Paina siitä kursorista ja eteen aukeaa sivu, jossa on se kursorin kuva ja 2 koodia. Kopioi alempi koodi, eli se jonka yläpuolella lukee "Option #2"

3. Mene bloggerin siihen etusivulle ja ota vasemmasta sivuvalikosta kohta "Ulkoasu" ja siltä uudelta sivulta yläreunasta kohta "Mallin suunnittelutyökalu".

4. Suunnittelutyökalussa paina kohdasta "Lisäasetukset" ja selaa se valikko alas, ja klikkaa kohdasta "Lisää CSS".

 5. Liitä siihen laatikkoon se äsken kopioimasi koodi ja poista kaikki välit koodista. Sitten koodin pitäs näyttää tolta ja sen voi tallentaa "Käytä blogissa"-kohasta.