Koodivinkkejä osa 1: Keskitys

Moi! Tänään ollaan vähän erikoisemman postauksen, eli koodivinkkien parissa! Kerron siis tässä blogisarjassa perus blogikoodeja jotka ovat hyödyllisiä varmaankin jokaiselle bloggaajalle. Ensimmäisessä osassa kerron eri palkkien ja muiden juttujen keskitykseen koodeja.

Koodivinkkejä

osa 1: keskitys

Mitä tarkoittaa keskitys?

Kuten sanasta keskitys jo arvata saattaa, keskitys tarkoittaa blogissa eri palkkien ynnä muiden juttujen siirtämistä keskelle. Seuraavat koodit toimivat ainakin simple-malleilla blogeissa.

Miten saan lisättyä kyseisen koodin?

Koodit ovat kaikki CSS-koodeja, ja ne lisätään seuraavalla tavalla:

Teema > Mukauta > Lisäasetukset > (rullaa alas päin) > Lisää CSS > Lisää kopioitu koodi tekstikenttään

Muista, että kun lisäät toisen koodin, älä lisää sitä heti toisen perään, vaan jätä esim. yksi tyhjä rivi väliä tai laita heti seuraavalle riville, mutta älä samalle riville edellisen koodin kanssa, muuten ne eivät toimi!

1. Koodi: Bannerin keskittäminen

  

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

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

  

Punaista lukua voi muuttaa haluamakseen.

Voit käyttää myös tätä koodia, mutta älä muuta siitä mitään. Sinun ei tarvitse lisätä näitä molempia koodeja CSS:ään, vain toinen riittää.

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

2. Koodi: Alatunnisteen keskittäminen

Alatunniste on siis lokerikko ihan postauksen lopussa. Se on aina vasemmassa reunassa, mutta keskittämällä sen saa keskelle. Kopioi alla oleva koodi ja lisää se CSS:ään äläkä muuta siitä mitään:

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



alatunniste minun blogissani

3. Koodi: Päivämäärän ja otsikon keskittäminen

Kopioi alla oleva koodi kokonaisuudessaan ja lisää se CSS:ään:

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

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

päivämäärä ja otsikko postauksissa blogissani

4. Koodi: Sivujen/ylävälilehtien keskittäminen

Jos sinulla ei ole vielä sivuja, mutta haluat ne, tee näin:

Sivut > Uusi sivu > Kirjoita otsikko ja haluamasi teksti > julkaise

Noin saa tehtyä sivut, ja tässä ohje sivujen lisäämiseen:

ulkoasu > kaikki sarakkeet & lisää gadget > lisää "sivut"> lisää painamalla tekemistäsi sivuista haluamasi > tallenna > tallenna asettelu

Mutta itse keskittämiseen. Lisää CSS:ään alla oleva koodi, niin saat ne keskelle.

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

sivut/ylävälilehdet minun blogssani

5. Koodi: Gadgettien, niiden otsikoiden ja blogiarkiston keskittäminen

Gadgettien otsikot saat keskelle tällä CSS koodilla:

.sidebar h2{
text-align: center;
}

Gadgetit saat keskelle lisäämällä tämän koodin CSS:ään:

.sidebar {
text-align: center;
}

yksi gadgetti blogissani

Kaikki gadgetit eivät keskity tuolla koodilla. Jos haluat keskittää myös blogiarkiston sisällön, joka ei siis ylemmällä koodilla keskity, lisää alla oleva koodi CSS:ään:

#ArchiveList{
text-align: center;
}

Ja lopuksi, muistakaa ehdottomasti tallentaa muutokset painamalla "käytä blogissa" napista!

Toivottavasti tykkäsitte tällaisesta blogikoodi postauksesta ja siitä oli hyötyä! yritin selittää kaiken mahdollisimman selkeästi, toivottavasti ymmärsitte. Voitte ehdottaa kommentteihin minkä tyylisiä koodeja seurasta koodipostauksesta olisi kiva löytyä?

Tänään koulukin lähti käyntiin pääsiäisloman jälkeen. En malttanut olla julkaisematta tätä postausta jo tänään, joten saatte nauttia postaustäyteisestä viikosta! Illalla olen menossa katsomaan Sirkus Finlandia esitystä. Katsotaan saanko napattua yhtään kuvaa, jos saan, niin voin ehdottomasti julkaista ne blogissakin!

Kivaa alkuviikkoa! -Pihla

Kertokaa ihmeessä mielipide postauksesta ja ovatko blogikoodi-postaukset teille hyödyllisiä?