Yritän kertoa käsiteltävät asiat mahdollisimman helposti ja lyhyesti, joten päätin jättää johdannon (jonka vain murto-osa tuppaa lukemaan) kokonaan väliin. Mennään siis suoraan asiaan.
Bloggerin blogeissa ulkoasua voi muokata kolmessa paikassa:
- Ulkoasussa
- Mallin suunnittelutyökalussa
- HTML-koodissa
Näistä suosittelen käyttämään Ulkoasua ja Mallin suunnittelutyökalua. Ulkoasussa kannattaa muokata gadgetien paikka, blogin nimi, faviconin liittäminen yms. perusjutut, mutta lähes kaikki koodit suosittelen lisäämään Mallin suunnittelutyökaluun.
Tietysti on olemassa runsas joukko koodeja, joita Mallin suunnittelutyökaluunkaan ei voi lisätä, mutta peruskoodit se lukee sujuvasti. Niihin tapauksiin on tarkoitettu käyttää HTML-koodia. Alla onkin lista, miksen suosittele käyttämään sitä.
Miksi koodeja ei kannata lisätä blogin HTML-koodiin?
- Mallin suunnittelutyökalua käyttämällä pystytään minimoimaan mahdolliset riskit, joita HTML-koodiin sekaantuminen voi aiheuttaa. Pienikin väärä kirjain/numero väärässä kohdassa voi aiheuttaa suuren katastrofin, pahimmassa tapauksessa blogiisi ei enää pääse, vaan sivu näyttää kaikille varmasti tuttua tekstiä Error.
Kokemuksella voin sanoa, ettei HTML-koodiin kannata kajota ellei ole 101% varma, mitä on tekemässä. Kokeneena koodajaana HTML-koodausta voi tietysti kokeilla. Lisäksi Mallin suunnittelutyökalussa muokkaukset näkee hetkessä, toisin kuin HTML-koodissa. Ja vielä vika juttu: HTML-koodia käyttämällä koodit eivät todennäköisesti toimi enää, jos lisäät ne Mallin suunnittelutyökalun CSS-osioon. Kuten aiemmin mainitsinkin, on olemassa paljon koodeja, jotka eivät kuitenkaan käy CSS-osioon Mallin suunnittelutyökalussa. Ne käyvät vain HTML-koodiin. Jos olet vasta aloittelija, suosittelen jättämään HTML-koodauksen tulevaisuuteen.
KOODIEN LIITTÄMINEN BLOGIIN
Suurin osa tämän apublogin koodeista laitetaan Mallin suunnittelutyökaluun. Alla on kuvasarjaohje, mihin ja miten koodit liitetään sekä varmuuden vuoksi vielä sanallinen selitys.
Hallintapaneeli -> Blogin nimi -> Malli -> Mukauta -> Lisäasetukset -> CSS
Koodit liitetään kenttään, joka on ympyröity punaisella.
Koodin jälkeen on hyvä painaa entteriä. Itse painan sitä aina kahdesti koodin jälkeen, jotta erilliset koodit erottuvat hyvin.
KOODIEN RAKENTEESTA
Koodeja on erilaisia, ja osaa niistä käytetään CSS:ään. Käydäänpä yleisten CSS-koodien rakenne läpi ja se, millaiset rakenteet kuuluvat HTML-koodin ja millaiset CSS:ään.
Yllä oleva kaappaus on HTML-koodista. HTML-koodissa suurin osa koodeista on < > -merkkien väliin laitettuja tekstikoodeja. Nämä koodit eivät toimi CSS:ään laitettuna. Jotkut < > -merkkien väliin laitetut koodit toimivat, jos ne laitetaan JavaScriptinä Ulkoasun kautta. Muistakaa siis, että < > -rakenteiset koodit kuuluvat lähinnä vain HTML:ään. Itse en ole perehtynyt HTML-koodeihin, joten niiden rakenteesta en osaakaan muuta kertoa kuin vain sen, että ne alkavat <-merkillä ja päättyvät >-merkkiin.
CSS-koodien rakenne on yksinkertaisempi. Ainoa hankaluus on, että halutuille määreille tarvitaan koodikielelliset määreet. Se saattaa olla välillä pidempikin projekti. Itse tuskailin monta kuukautta yhden määreen kanssa, koska en tiennyt, mikä määre vastaa kyseistä määrettä koodikielellä. Koodailu onkin kuin uuden kielen opettelua.
Alla oleva koodi on navigaatiopalkin värin muuttamiseen kehitelty.
#navbar-iframe {
background:#ffffff;
}
CSS-koodeissa on kolme tärkeää kohtaa:
1. Valitsin
2. Ominaisuus
3. Arvo
Näiden lisäksi tärkeässä osassa ovat myös aaltosulkeet { ja }.
Valitsin kertoo asian blogista, jota halutaan muuttaa / johon halutaan lisätä jotain. Valitsimen jälkeen tulee {-sulku. Navigaatiopalkin koodissa valitsin on navigaatiopalkki.
Valitsin voi olla myös muodossa .date-header eli valitsimessa on kiinni piste. Yhdyssanat erotetaan usein viivalla.
Ominaisuus kertoo kyseisestä blogin osasta asian, joka halutaan lisätä / jota halutaan muuttaa. Navigaatiopalkin koodissa Ominaisuus on background eli navigaatiopalkin väri. CSS-koodien koodikielellisiä vastineita juurikin Ominaisuus-osassa voi päätellä englanninkielisistä sanoista. Ominaisuuksia voi olla koodissa paljon! Ominaisuuden jälkeen tulee kaksoispiste :
Arvo voi kertoa värin, Ominaisuuden koon jne. Se siis kertoo jotain Ominaisuudesta. Arvon jälkeen tulee puolipiste ;
Kun koodi on valmis, painetaan kerran enteriä ja loppuun lisätään }-sulku.
JOS KOODI EI TOIMI... [ENSIAPUA]
1. Tarkista, että olet kopioinut koodin alusta loppuun.
2. Kokeile muuttaa koodissa olleita arvoja. Jos arvo on esimerkiksi 10px, kokeile muuttaa arvo esimerkiksi -50px:iin ja katso, huomaatko muutosta.
3. Ethän ole poistanut esim. arvoa muuttaessasi kaksoispistettä jne.?
4. Kokeile, toimiiko blogissasi mikään koodi. Bloggerin bugit voivat aiheuttaa häiriöitä Mallin suunnittelutyökalussa. Lisäksi jos olet kajoontunut blogisi HTML-koodiin, Mallin suunnittelutyökaluun lisätyt koodit eivät enää välttämättä toimi.
5. Tarkista, sopiiko koodi blogisi mallille. Tämän blogin koodit ovat Simplelle, joten en takaa niiden toimivuutta muissa malleissa. Yleensä tämä ei kuitenkaan ole syypää, miksei koodi toimi.
6. Lisäämäsi koodi voi olla myös ristiriidassa toisen koodin kanssa = toinen koodi kumoaa toisen toimivuuden.
Ikävä kyllä kaikki koodit eivät toimi kaikissa blogeissa. Blogitkin ovat yksilöitä.
MUUTA MAHDOLLISESTI TÄRKEÄÄ
Jos haluttua määrettä ei osaa muuttaa koodikieleksi, kannattaa hyödyntää muita koodeja. Esimerkiksi tässä blogissa on iso liuta koodeja, joissa on paljon erilaisia Valitsimia ja Ominaisuuksia. Koodikieltä oppii vain harjoittelemalla, kuten vaikkapa englantia tai mandariinikiinaa. Kukaan ei ole seppä syntyessään, ja Harjoittelu tekee mestarin -sanontaan on oikeasti uskominen. Googlettaminen on suotavaa, jos apua kaipaa. Nykyään googlessa on lähes kaikki. Google Kääntäjäkin voi olla avain hakusessa olleeseen määreeseen, nimimerkillä kokemusta on :-D
Toivottavasti tämä postaus avasi edes vähän koodikielestä!
Jos jokin jäi askarruttamaan, kysykää ihmeessä.
xoxo, iltsu