sunnuntai 8. lokakuuta 2017

206. Blogikoodeja 2.0



Miten ja miksi lisätään koodit blogiin?

Koodeja käytetään blogissa, ulkoasun muokkaamiseen. Erilaisella erilainen lopputulos. Koodeilla pystyt muokkaamaan blogia laajemmin, mitä pystyisit Bloggerin suunnittelutyökalulla.

Postauksen kaikki koodit ovat CSS-koodeja, mikä tarkoittaa että kaikki postauksen koodit voi lisätä blogiin, alla olevan ohjeitten mukaan. Kun pääset bloggeriin, vasemmasta sivupalkista löytyy kohta missä lukee "Teema". Painaessa "Teemaa" sinulle aukeaa uusi aukeama, painaessa oranssia mukauta-nappia pääset blogisi "suunnittelutyökaluun". Painaessa lisäasetuksia ja sen jälkeen "lisää CSS" sinulle aukeaa valkoinen kenttä mihin sinun kuuluu lisätä haluamasi koodit. 
Teema -> Mukauta -> Lisäasetukset -> Lisää CSS

Postauksen otsikon ja bannerin välin muuttaminen
Jos olet esimerkiksi poistanut blogistasi toiminnon, millä päivämäärä näkyy postauksen otsikon yläpuolella, jää tekstin otsikon ja bannerin väliin suuri tyhjä aukko. Tällä koodilla saat muutettua sitä väliä, muuttamalla tuota punaista lukua. Vaihtamalla miinuksen (-) plussaan (+) väli suurenee tai pienenee, riippuen mihin suuntaan väliä haluat muuttaa. Vaikka sinulla olisi päivämäärä blogissasi käytössä, saat silti väliä pienennettyä, otsikko nousee päivämäärää kohti.
h3.post-title{
margin-top: -30px;
}


Blogiarkiston ja gadgetin keskittäminen
Jos haluat keskittää blogiarkiston sisällön sekä ylipäätään gadgetit, lisää CSS:ään tämä koodi. Koodin pitäisi toimia aivan kaikkien gadgettien keskittämiseen.


.sidebar {
text-align: center;
}
#ArchiveList{
text-align: center;
}

Blogin alaosasta pallot pois
Havainnollistava kuva tilanteesta.
Jos joskus satut selaamaan blogia niin alas kun pystyy, saatat huomata että yhdellä rivillä tekstien välissä on harmaita “palloja”. Jos jostain syystä nämä haluat blogistasi pois, tätä koodia käytettäessä se onnistuu!
.blog-pager {
 background: none;
}
Harmaan katkoviivan poistaminen
Havainnollistava kuva tilanteesta.
Jos blogia selaa vielä alemmas, harmaitten pallojen alapuolelle löytyy sieltä “katkoviiva”. Jos tämän haluaa poistaa lisäät tämän koodin CSS:ään.

.footer-outer {
 border-top: 0px;
}
Blogin alaosan tyhjän tilan poistaminen
Jos taas selataan blogin alaosaan saakka, näet että etusivu tekstin alle jää hyvin paljon tyhjää tilaa. Jos tämän tyhjän tilan haluat pois, lisää tämä koodi CSS:ään.
.footer-outer {
 border-top: none;
 margin-top: -100px;
}
Postauksen alatunnisteen keskittäminen
Havainnollistava kuva alatunnisteesta.
Postauksen loputtua, ilmestyy näkyviin niin sanottu alatunniste. Jos haluat keskittää alatunnisteen lisää blogiisi tämä koodi.
.post-footer {
text-align: center;
}  





Harmaa tausta pois kommentin vastaajalta
Havainnollistava kuva harmaasta kentästä.
Kun vastaat henkilön kommenttiin, ilmestyy vastauksen alle harmaa kenttä. Jos tämän kentän haluat pois blogistasi, lisää CSS:ään seuraava koodi.
.comments .comment-thread.inline-thread {
background-color: transparent;
}



Viivat pois kommentista
Kommentin alapuolelle ilmestyy automaattisesti ärsyttävä katkoviiva, jos tämän viivan haluat pois, lisää seuraava koodi. (Viime koodissa havainnollistava kuva viivasta, ennen "vastaa" tekstiä.)
.comments .continue {
border: transparent;
}

Linkkien kursivoituminen siirtäessä hiiren linkin päälle
Jos haluat että linkki muuttuu normaalista kursivoituneeksi siirtämällä hiiren sen päälle, lisää kyseinen koodi CSS:ään.
a:hover{
font-style: italic;
} 
Päivämäärän poistaminen postauksesta
.date-header {display :none !important;}




8 kommenttia:

  1. Hyödyllisiä koodeja ja hyvä postaus, kiitos näistä. Varmasti tulee jossain vaiheessa tarpeeseen, kun ulkoasua muokkaa :)

    http://hevostytonelamaax.blogspot.fi

    VastaaPoista
  2. Hyödyllisiä vinkkejä!

    www.millat.fi

    VastaaPoista
  3. Todella hyödyllinen postaus, taidokkaasti kirjoitettu! Jatka ehdottomasti postaamista :)

    VastaaPoista
  4. Todella hyvin kirjoitettu postaus ja hyviä koodeja oot laittanu tähän! Tää oli kyl varmasti monelle hyödyllinen!

    elaimetsydammessa.blogspot.com

    VastaaPoista