9. kesäkuuta 2021

Koodinurkka 2: Mitä ovat välilehdet ja miten ne lisätään

Linkki koodattavaan blogiin!

Lähdetään heti alkuun välilehtien kimppuun. Eli välilehdet muodostavat ns. navigaation, kuten taisin edellisessä postauksessa kertoa. Itsestä tuntuu hassulta, että bloggerissa näiden muokkaaminen teeman suunnittelutyökalussa tapahtuu nimellä välilehdet, kun varsinaisesti välilehtien sisältö luodaan kuitenkin kohdassa Sivut ja yleisesti ottaen ammattikielessä (ainakin oman kokemukseni mukaan) puhutaan navigaatiosta. Valitaan siis vasemmasta sivupalkista oletusnäkymässä Sivut.

Yllä olevassa kuvassa näkyy vasemmassa sivupalkissa ylhäällä + UUSI POSTAUS. Tämän kohdalla pitäisi nyt lukea + UUSI SIVU. Klikataan sitä ja sivulle pitäisi aueta samanlainen näkymä kuin postausta tehdessä. Tehdään tälle sivulle kuvitteellinen esitelmä itsestä ja laitetaan otsikoksi "Kirjoittaja". Käytän itse esittelyn teossa apuna jälleen lorem ipsumia.

Vinkki! Otsikko-palkin oikealla puolella on Esikatselu -nappula. Sitä kautta pystyt katsomaan, miltä sivu näyttäisi blogissa.

Kun olet valmis esittelyn kanssa, löydät oikeasta reunasta kohdan Asetukset, klikkaa se auki. Tästä pystyt määrittämään, voiko tälle sivulle laittaa kommentteja. Itse olen aiemmin näitä erillisiä sivuja käyttäessä tehnyt pääsääntöisesti niin, että vain postauksiin voi kommentoida, joten valitsen päälle Älä salli, piilota nykyiset ja julkaisen sivun. Tee vielä toinen sivu, voit laittaa sinne mitä haluat. Itse teen yhteystiedot -sivun, jolle sallin myös kommentoinnin.

Vinkki! Mikäli jaat netissä sähköpostiosoitteesi, korvaa @-merkki aina (a) merkein. Tämä siksi, että useimmat botit eivät osaa lukea tekstiä tuolloin sähköpostiksi ja vältyt täten isolta määrältä roskapostia.

Kun olet tehnyt vähintään kaksi sivua (voit tehdä useammankin), siirry vasemmassa sivupalkissa kohtaan Ulkoasu.

Otsikko ja Ensisijainen laatikoiden välissä on Kaikki sarakkeet laatikko. Klikkaa tästä laatikosta + Lisää gadget ja etsi Sivut. Aukeavassa valikossa voit nimetä tämän laatikon, mutta itse otan otsikosta tekstin pois, koska en koe että navigaatiolla tarvitsisi erikseen olla otsikkoa. Valikossa voit myös ruksia laatikoista, mitkä sivut haluat näkyvän navigaatiossa. Laita ruksi jokaisen tekemäsi sivun kohdalle. Etusivu -linkin nimen voi halutessaan muuttaa, esimerkiksi nimeen Blogi. Muiden navigaatiossa olevien linkkien nimi määräytyy tekemäsi sivun otsikon mukaan. Voit vaihtaa linkkien järjestystä navigaatiossa klikkaa ja raahaa menetelmällä.

Tallenna tekemäsi muutokset ja tarkasta miltä testiblogisi nyt näyttää.

Siirrytään sitten teeman suunnittelutyökaluun laatikoiden yläpuolelta ja siellä siirrymme suoraan kohtaan Lisäasetukset. Lisäasetuksissa etsi pikkuvalikosta (klikkaa linkkiä Sivun teksti) ja etsi Välilehtien teksti. Kuten muidenkin tekstimuokkausten kohdalla, voit muuttaa tässä navigaation tekstin fontin ja värin. Omat valintani: Courier, 16px ja #ba67c8. Valitun kohteen väri tarkoittaa sen välilehden tekstin väriä, jolla olet parhaillaan. Oli se sitten blogi, kirjoittaja tai yhteystiedot. Sen asetan värillä #333333. Huom! Valitun kohteen väri on samalla myös välilehden linkin osoitusväri!

Valitaan seuraavaksi pikkuvalikosta Välilehtien tausta, jossa voit muuttaa navigaation linkkien taustavärin. Itse valitsen molempiin kohtiin läpinäkyvän, jotta saan linkit muistuttamaan enemmän perusnavigaatiota. Voit halutessasi lisätä näihin toki värin. Tämän jälkeen valitaan pikkuvalikosta Aksentit. Muista tallentaa välillä!

Erottavan viivan väri tarkoittaa oikean sivupalkin vieressä olevaa viivaa. Välilehtien reunusväri taasen tekemiemme linkkien reunavärejä. Voit määrittää jälleen viivan värin miten itse haluat, mutta asetan itse tässäkin kohtaa välilehtien reunusvärin läpinäkyväksi. Navigaatiolle jää "tilaa hengittää" ja koen itse navigaation silloin helpommin muokattavaksi myöhemmässä vaiheessa. Lopputuloksen näillä säädöillä näet alla.

Lupasin tässä postauksessa kertoilla myös fonttien ja taustojen muokkaamisesta, mutta jotta vältytään liian pitkiltä teksteiltä, päätetään tämänkertainen editointi tähän. Ja kuten aina, kerro kommenteissa jos jokin jäi epäselväksi tai sinulla on aihe mitä haluaisit täällä blogissa myöhemmin käsiteltävän!

Ei kommentteja:

Lähetä kommentti