Sivut/välilehdet banneriin

*Postauksessa oletetaan, että olet lisännyt blogiisi ylävälilehdet eli sivut bannerin alle

Tähän ei tarvita HTML-koodin muokkausta, vaan homma hoituu näppärästi tutun ja turvallisen CSS:n avulla. Eli välilehdillä bannerissa tarkoitan tätä:

MITEN OMAAN BLOGIIN?

1. Tee bannerikuva, eli siis banneri, johon haluat "linkkipalkin" eli välilehdet. Minä tein esimerkkibanneriin valkoisen suorakulmion eli palkin, johon halusin laittaa välilehdet. Tältä tässä vaiheessa bannerini näytti:

2. Lisää banneri blogiisi. Jos et osaa lisätä banneria, lue tämä postaus.

3. Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit (violetilla):

.PageList {text-align:center !important;}
.PageList {text-shadow: 0px 0px 3px black  !important;}
.PageList {letter-spacing: 2px; !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList {margin-top: -347px !important;}
.PageList {margin-right: 70px !important;}
.PageList {text-transform: uppercase; !important;}

Jos haluat välilehtien tekstien taakse varjostukset, pidä koodin toisella rivillä oleva 3 ja black (voit muuttaa sen väriä esim. pink, grey, blue...) paikoillaan. Jos et halua varjostuksia, poista koko toinen rivi (.PageList {text-shadow: 0px 0px 3px black  !important;}) koodista. 

Tässä kuvat, miltä teksti näyttää ilman varjostuksia ja varjostuksilla:

(// pahoittelut, kuvat ovat jostain syystä erittäin epäselviä)

Kolmas rivi (.PageList {letter-spacing: 2px; !important;}) tarkoittaa letter-spacingia eli k i r j a i n t e n   v ä l i ä  toisistaan. Jos et halua väliä, laita numeron 2 paikalle numero 0. Jos haluat välin, voit katsoa, minkä numeron välistä tykkäät eniten. Kokeile esim. lukuja 1-5.

Neljäs rivi (.PageList {margin-top: -347px !important;}) kertoo välilehtien korkeuden eli sen, miten ylhäällä ne ovat blogissa, mille korkeudelle ne bannerissasi sijoittuvat. Voit muuttaa lukua -347 mieleiseksesi.

Viides rivi (.PageList {margin-right: 70px !important;}) kertoo sen, missä suhteessa välilehdet ovat reunoihin verrattuna, mutta samalla rivillä. Esim. ovatko välilehdet lähes keskellä vai täysin oikeassa reunassa. Lukua 70 voi taas siis muuttaa mieleisekseen.

Kuudes rivi (.PageList {text-transform: uppercase; !important;}) kertoo, että välilehtien teksti on CAPS LOCKILLA kirjoitettu. Jos haluat tekstin olevan "normaali", vaihda sanan uppercase tilalle none.

Lisäksi lisää CSS-boksiin seuraavat koodit:

.tabs-inner .section:first-child {
border:none;
}

.tabs-inner .section:first-child ul {
border:none;
}
 

.tabs-inner .widget ul {
background: none;
_background-image: none;
border:none;
}

.tabs-inner .widget li a {
display: inline-block;
font: 11px verdana;
color: #000000;
border:none; 

}

 11px tarkoittaa fontin kokoa - voit muuttaa kyseistä lukua. Verdana taas on fontin nimi, jonka voit muuttaa haluamaksesi esim. corsiva tai arial. Kuusi 0-numeroa taas kertovat fontin värin, joka on tässä tapauksessa musta. Voit muuttaa sitä haluamaksesi joko heksakoodeilla tai engl. kielisillä numeroilla. Blogin väreistä löydät postauksen täältä.

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: grey;
background-color: transparent;
text-decoration: none;
font-style: none;
}

Boldattu grey taas kertoo fontin värin, kun hiiri viedään tekstin päälle. Voit muuttaa sitä. 

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:active {
background-color: transparent;
text-decoration: none;
font-style: none; 

}

***

Toivottavasti tästä oli apua! :)

Sivut/välilehdet blogiin

1.  Jos haluat luoda esimerkiksi sivun, jossa kerrot itsestäsi, mene: Hallintapaneeli > Sivut > Uusi sivu.

2. Kun olet luonut haluamasi sivut, mene Ulkoasu > Lisää gadget

3.  Valitse sivut

4. Voit päättää sivuille otsikon ja valita blogissasi näytettävät sivut. Voit myös vaihtaa sivujen paikkaa ja luoda sivut-gadgetiin ns. ulkoisen linkin, jota klikkaamalla pääsee esim. Instagramiisi.

5. Kun olet valmis, tallenna.

Voit lisätä sivut/välilehdet joko blogisi sivupalkkiin tai bannerin alapuolelle. Voit vaihtaa sivujen paikkaa blogin Ulkoasussa siirtämällä Sivut-gadgettia. Alla olevat kuvat kertovat, miltä sivut näyttävät sivupalkissa ja bannerin alapuolella:

Lue myös, 

miten välilehdet keskitetään

miten välilehdistä saadaan taustaväri pois

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;}

Välilehtien taustaväri + muut härpäkkeet pois

Kuvat kertoo enemmän kuin tuhat sanaa:

Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit:

.tabs-inner .widget ul {
background: none;
border: none;
}
.tabs-inner .widget li {
border: none;
}

.tabs-inner .widget li a {
display: inline-block;
background: none;
border: none;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
background: none;
box-shadow:none;
}