perjantai 7. marraskuuta 2014

Blogin ulkoasun muokkaaminen: widgettien väli pienemmäksi tai suuremmaksi

Suurin osa kysymyksistä, joita saan kommenttiboksissa tai sähköpostilla, liittyy blogin ulkoasun muokkaamiseen. Moni teistä olisi halukas tekemään pientä blogin osien viilailua: yhden kohdan suurentamista, toisen pienentämistä ja tuon siirtämistä kauemmas muista ja tämän siirtämistä millin lähemmäksi. Nämä saattavat kuulostaa mikroskooppisen pieneltä yksityiskohdilta ja yksinkertaisilta jutuilta mutta kun kerran jonkun muutoksen on saanut päähänsä, sen usein haluaakin viedä loppuun asti. Silloin voi olla hermot kireällä, jos pikkuriikkisen muutoksen tekemiseen ei löydy ohjetta sitten millään.

Ajattelin julkaista nyt ja jatkossa myös täällä blogipostausten puolella näitä ulkoasun muokkaamiseen ja viilaamiseen liittyviä juttuja, joita olen siis käynyt läpi sähköpostissa ja kommenteissa. Kommenteista muiden halukkaiden on vaikea löytää näitä ohjeita ja sähköpostejahan nyt ei lue muut kuin asianomaiset. Näissä ulkoasun muokkaaminen -tagin alla olevista postauksista löytyy siis jokin ohje, yleensä koodi, jolla saat jonkin pikkujutun muokattua blogissa. 

Aloitetaan sarja vastauksella kaikista suosituimpaan kysymykseen:




Sivupalkin gadgetit lähemmäksi toisiaan tai kauemmaksi toisistaan

Jos haluat sivupalkin gadgettien (lukijat, arkistot ym.) väliin jäävän raon suuremmaksi tai pienemmäksi, se onnistuu seuraavasti:

1. Mene Malli -> Mukauta -> Lisäasetukset -> Lisää CSS
2. Lisää kenttään seuraava koodi. Huomaa, että luku 5 muuttaa välin kokoa. Muuta luku siis haluamaksesi. Näet esikatselusta samalla, mitä mikäkin lukema saa aikaan käytännössä. 


.widget {
margin: 5px 0 0 0;
}

3. Kun olet valmis, klikkaa oikeasta yläkulmasta Käytä blogissa.

Näin helppoa se on! Ohjeet ovat onneksi lyhyitä mutta ehkä juuri sen takia en ole niitä julkaissut. Mutta nyt on niitäkin luvassa, joten toivottavasti halukkaat löytävät tarpeellisia koodeja. Näihin juttuihin liittyy kuitenkin seuraava varoitusteksti:

Ennen kuin teet mitään, ota varmuuskopio. Älä poista mitään koodia niin, että et saisi sitä enää takaisin. Eli jos leikkaat joitain osia pois blogin alkuperäisestä koodista, säilytä se koodinpala vaikka jossain tiedostossa ja tietenkin kirjaa ylös myös se kohta, jossa koodi majaili ennen leikkelyjä. Ota vaikka screenshot, jos et muuta tee. Ohjeet olen testannut ja todennut toimiviksi omassa "testiblogissani", jossa on pohjana Bloggerin Simple, niin kuin hyvin monella teistäkin on. Blogeissa on kuitenkin yksilöllisiä eroja, joten ohjeet eivät ole pomminvarmoja. Nämä erot voivat johtua mm. kaikesta siitä muusta, mitä olet blogillesi tehnyt (muut koodit, widgetit, ym.). 

15 kommenttia:

  1. Näitä postauksia varmasti kaivataan! Taidan tätäkin kokeilla omassa blogissani, kiitos :)

    VastaaPoista
  2. Tätä olenkin miettinyt, suurkiitos taas kerran!

    VastaaPoista
  3. Kiitos taas vinkistä, täytyy joskus kokeilla. Mulla olis yksi postaustoive tai saa siitä varmaan aika montakin postausta :) nimittäin WordPress. On jo pidempään tehnyt mieli aloittaa toinen blogi ja mietin että kannattaisiko se aloittaa WordPressillä.

    VastaaPoista
    Vastaukset
    1. Hyvä toive ;) Laitan ylös tämän. Kyllä tuosta aiheesta jotakin tulee.

      Poista
  4. Meidän blogi aloitettiin eilen ja sun blogista ollaan tultu vinkkejä paljon etsimään(: tosin löysin blogisi vasta eilen mutta kaikki vinkit on ollut tosi hyödyllisiä, kiitos! Liityin lukijaksikin, käytkö katsomassa meidän blogia? xx

    VastaaPoista
  5. Heippa taas ja kiitos aina toimivista ohjeista. Saako noita sivupalkin tekstejä ja kuvia ja muita härpäkkeitä saman levyisiksi? Tai lähinnä toisen reunan tasaiseksi?

    VastaaPoista
    Vastaukset
    1. Hmm. En ole ihan varma, mitä meinaat. Siis että teksti olisi molemmista reunoista tasattuko?

      Poista
  6. Ah, rakastan sun blogia! Mulle tulee ihan nörtti olo näitä tehdessä! Osaatko neuvoa, et mikä voi olla vikana, kun tä ei vaikuttanut mitenkään välien kokoon, vaikka kokeilin tehdä isommaksi ja pienemmäksi?

    VastaaPoista
    Vastaukset
    1. Heh, kiva kuulla :)

      Onko sinulla koodi precis samalla tavalla, kuin tuossa esimerkissä? Ja CSS laittaessa kannattaa jättää yksi rivi väliä, ettei mene edellisen perään. Saattapi joskus vaikuttaa. Sitten jos sinulla on jotain muuta koodia/muokkauksia, tämä ei ehkä toimi.

      Poista
    2. Höh, ei onnistunut. No, ehkä tähän ei maailma kaadu :) muut jutut on kyllä onnistunut eli kiitos niistä!

      Poista
  7. Tiedätkö miten jostain tietystä sivupalkin gadgetista saan "reunat" pois kun mulla on niinkun hevosblogi ja siinä on sillein että kun niistä niiden kuviata painaa sivupalkissa, pääaee sen hevosen tietoihin. Mutta se näyttää hassulle kun ympärille jää valkoset neliöreunat vaikka kuva on pyöreä.. :D

    VastaaPoista
    Vastaukset
    1. Hmm.. Sinun täytyy tehdä kuvan taustasta läpinäkyvä. Kuvat ovat aina kuitenkin suorakulmaisia. Eli läpinäkyvä tausta, jonka keskellä on sitten se itse kuva pyöreänä. Ja sen tallennat blogiisi.

      Poista