Tekstit

Näytetään blogitekstit, joiden ajankohta on toukokuu, 2019.

Miten tehdä blogikuvista samanlevyisiä?

Kuva
Ärsyttääkö, kun blogikuvat eivät ole keskenään yhtä leveitä? Tässä helpot ohjeet siihen, miten saisit niistä yhtä leveät. :) 1. Mene blogisi hallintasivulle ja valitse vasemmalta kohta "Teema" 2. Valitse seuraavaksi kohta "Muokkaa" 3. Valitse vasemmalta kohta "Lisäasetukset" 4. Tämän jälkeen kelaa avautuva luettelo ihan alas, ja valitse kohta "Lisää CSS" 5. Eteesi avautuu CSS laatikko, johon kopioi seuraava koodinpätkä: .post-body img { width:680px; height:auto;} Huom! Blogikuviesi tulee olla asetuksessa "Alkuperäinen koko" jotta koodi toimii! Huom! Voit muuttaa arvoa "width:680px" siihen leveyteen jonka itse tahdot (Esim width:500px) Älä unohda kommentoida koodiasi! Katso myös: Miten kommentoida koodia blogissa?

Miten laittaa banneri blogiin?

Kuva
Banneri eli kansikuva on kiva luova lisä blogiin! Tässä helpot ohjeet bannerin asettamiseen 1. Tee kuva jollain ohjelmalla (Esimerkiksi photoshop, illustrator...) tehden kuvasta yhtä leveä kuin kuin blogisi on. Pääset katsomaan blogisi leveyden seuraavasti: ✩ Mene hallintasivultasi kohtaan "Teema" ✩ Jatka painamalla "Muokkaa" ✩ Etsi tämän jälkeen vasemmasta sivusarakkeesta leveyteen viittaava kohta (Vaihtelee blogeittain) Esimerkki 1 Esimerkki 2 ✩ Seuraavaksi näet blogisi leveyden (Ympyröity arvo on se joka meitä kiinnostaa) 2. Kun kuva on valmis ja exportattu, mene blogisi hallintasivulle ja valitse kohta "Ulkoasu" 3. Etsi kohta "Otsikko" ja jatka painamalla kynää "Otsikko" -kohdan oikeasta reunasta 4. Seuraavaksi eteesi avautuu luukku johon banneri laitetaan. Valitse kuva (Choose file) koneeltasi ja varmista että "mainospaikkana" on 'Otsikon ja kuvaukse

Miten tehdä blogitekstien kuville mouseover?

Kuva
Mouseover kuville siis tarkoittaa efektiä kuvien päälle, kuten oman blogini mustavalkoiseksi muuttuvat kuvat. 1. Mene hallintasivusi kautta "Teema" -osioon 2. Tämän jälkeen valitse kohta "Muokkaa" 3. Valitse vasemmasta sarakkeesta kohta "Lisäasetukset" 4. Tämän jälkeen kelaa lista alas ja valitse kohta "Lisää CSS" 5. Eteesi avautuu CSS laatikko, johon valitset jonkun alla olevista koodeista (Vain yksi!) Huom. Efekti tulee ainoastaan blogipostaustesi kuviin!  mustavalkoinen liukuvärjäys (Omassa blogissani on tämä + tässä kuvaesimerkki, vie hiiri päälle) .post-body img:hover { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } Vaalea liukuvärjäys .post-body img:hover { opacity:0.2;

Miten tehdä dropbar -menu blogiin?

Kuva
Ohjeet dropbar -menun tekemiseen alapuolella :) Dropbar -menulla tarkoitetaan siis avautuvaa valikkoa, josta päästään muille sivuille linkkien avulla. HUOM! Koodia täytyy itse osata käsitellä enkä suosittele tätä ihan aloittelijoille! Oman blogin säädöt on tunnettava hyvin jotta koodin saa toimimaan! 1. Mene blogisi hallintasivulle ja valitse vasemmalta kohta "Ulkoasu"   2. Valitse otsikon alapuolella olevasta sarakkeesta "Lisää gadget" (Vaihtelee teemoittain) 3. Valitse listasta "Html/JavaScript" 4. Eteesi aukeaa tyhjä Html/JavaScrpt laatikko Liitä siihen alla oleva koodi ( Huom. Olen itse customoinut koodin tehden siitä mahdollisimman yksinkertaisen, koodiin täytyy kuitenkin itse kirjoittaa linkkejä ja otsikoita. Olen capslockannut kaikki itse kirjoitettavat kohdat. Olen myös kappalejaoittanut dropbarin osat joten jos haluat enemmän kohtia, kopioit vain edellisen kappaleen viimeiseksi ) <ul id='cssnav

Miten keskittää blogitekstien otsikot?

Kuva
Blogitekstin otsikon keskittäminen blogin etusivulla on kiva pieni lisä blogin ulkoasuun :) 1. Aloita menemällä blogisi hallintasivulle ja valitse vasemmalla olevasta listasta "Teema" 2. Jatka valitsemalla kohta "Muokkaa" 3. Valitse listasta kohta "Lisäasetukset" 4. Tämän jälkeen eteesi avautuu lista, kelaa se ihan alas ja valitse kohta "Lisää CSS" 5. Eteesi avautuu CSS laatikko, liitä siihen alla oleva koodi:  h3.post-title, .post-title { text-align: center; } Älä unohda koodin kommentointia selkeyden ylläpitämiseksi! Katso myös: Miten kommentoida koodia blogissa? 6. Älä unohda painaa "Käytä blogissa" -painiketta 7. Blogitekstiesi otsikot pitäisi nyt olla keskitettyinä blogissasi

Miten kommentoida koodia blogissa?

Kuva
Mikäli et halua elää kaaoksessa ja tuskastella miettien mikä koodi viittaa mihinkin toimintoon, suosittelen käyttämään kommentteja koodia kirjoittaessa. Kommentin tekemiseen löytyy useita eri tapoja, mutta tässä niistä muutama: <!-- Tähän voit kirjoittaa kommentin --> Eli siis lisäät <!-- --> merkit johonkin kohtaan koodia mihin haluat kommentin jättää Toinen tapa kommentoida olisi näin: /* Tähän voit kirjoittaa kommentin */ Eli siis lisäät /* */ merkit johonkin kohtaan koodia mihin haluat kommentin jättää Huom! Kommentti näkyy vain sinulle, tai sivuston lähdekoodeissa! Kommentin tarkoitus on helpottaa sinua muistamaan mitä mikäkin koodi tekee. Kuvaesimerkki Ajatellaan, että haluan vielä kuukauden päästä muistaa, mihin kyseinen koodinpätkä viittaa (rivi 17 ->) joten lisään riville 16 kommentin. Kommentti tulee näkymään vain minulle ja nyt tiedän aina mihin koodilla viitataan. Älä unohda tallentaa kommenttiasi! Kommentteja voi

Miten muuttaa profiilikuva pyöreäksi blogissa?

Kuva
Oletko kyllästynyt neliön muotoiseen profiilikuvakkeeseen, joka näkyy blogissasi? Sopisiko pyöreä kuvake paremmin blogisi teemaan, ja ennenkaikkea, olisiko se enemmän sinua? Ei hätää! Olen koonnut alle yksinkertaiset ohjeet kuvakkeen muodon vaihtamiseen. :) 1. Mene hallintasivullesi ja valitse vasemmalta kohta "Teema" 2. Jatka valitsemalla kohta "Muokkaa" 3. Valitse vasemmalta lisäasetukset 4. Tämän jälkeen eteesi avautuu lista, kelaa se ihan alas ja valitse kohta "Lisää CSS" 5. Eteesi avautuu CSS laatikko, liitä siihen seuraava koodinpätkä:  .profile-img {     float: left;     border-radius: 50px 50px 50px 50px;     opacity: 1;     transition: opacity .25s ease-in-out;     -moz-transition: opacity .25s ease-in-out;     -webkit-transition: opacity .25s ease-in-out; } .profile-img:hover { opacity: 0.5; } (HUOM. Olen itse customoinut yllä olevan koodin yksinkertaisempaan muotoon) Älä unohda