keskiviikko 11. syyskuuta 2013

Kuvat vierekkäin Bloggerissa

Laitatko sinäkin postauksiisi kuvat aina allekkain? Onko mielessäsi ehkä joskus käynyt laittaa muutama kuva ihan vieretysten? Ehkä olet jo yrittänytkin sitä, sillä kuvien vierekkäin laittaminen voi tuntua helpolta hommalta: Blogger itse ehdottaa kuvaa klikatessa siirtoa oikealla, keskelle, vasemmalle, ja ties minne. Jos klikkaat yhden kuvan vasemmalle ja toisen oikealle, ja koitat raahata niitä vierekkäin, lopputuloksena luulisi olevan kaksi kuvaa vierekkäin. Mutta mutta... Ehkä oletkin jo takonut näitä nappeja ja huomannut kuvien venkoilevan miten sattuu. Ne eivät kuitenkaan ole (paitsi joskus vahingossa) menneet nätisti vierekkäin.

Kuvia saa vierekkäin vaikka tekemällä jollakin ohjelmalla hienon kollaasin, joka kyllä sekin on yksi iso kuva. Vierekkäisten kuvien lisääminen postaukseen on kuitenkin täysin mahdollista, mutta se vaatii pienen koodinpätkän. Vaikka luitkin sanan "koodi", älä pelkää, sillä tämä toimenpide on helpompi kuin mikään kuvien repiminen ja riuhtominen vieruspareiksi muilla keinoin. Sainkin jokin aika sitten toiveen aiheesta miten laittaa Bloggerissa kuvia vierekkäin, ja nyt sellaiseen kysymykseen olisi tarjolla vastausta.


Tarvitsemme siis palan HTML-koodia ja kuvat. Ensin olisi hyvä tehdä kuvista samankokoisia ja sellaisia, että ne mahtuvat sivulle vierekkäin. Ei siis mitään jättikokoisia kuvia. Minä pienensin yllä olevat kissakuvat 250x250 kokoon.

Katsotaan ensin mitä tehdään, kun käytät Bloggerin omaa kuvien latausohjelmaa. Suosittelen laittamaan kuvat postaukseen ennen kuin alat kirjoittamaan juttua muuten. Kuvien asettelu on silloin helpompaa, jos ei kauheasti ymmärrä koodien päälle. Eli Bloggerista ladattaessa lataa kuvat normaalisti ja siirry Luo -tilasta HTML -tilaan tuolta vasemmasta yläkulmasta. Lataa vaikka yksi kuva kerrallaan, jos sen on helpompaa. HTML-puolella saat eteesi kuvan koodin, esimerkiksi tässä minun toisen kissakuvani koodia:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8T22U9IQ99HqbqN8IcBPG3fS8f0DRFz-tOOtHpbAmQUg3mHi_TppXE8X4pHUIeqcNGVVZNhBNt8RIn5yvwWMfWo5nSrLNjsQKg_atwzrFVUaMACqSC8lTbzUZQ0adyyOnxr5xNbcJAk/s1600/cat1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8T22U9IQ99HqbqN8IcBPG3fS8f0DRFz-tOOtHpbAmQUg3mHi_TppXE8X4pHUIeqcNGVVZNhBNt8RIn5yvwWMfWo5nSrLNjsQKg_atwzrFVUaMACqSC8lTbzUZQ0adyyOnxr5xNbcJAk/s1600/cat1.jpg" /></a></div>

Sinun kuvasi koodi on omanlaisensa, mutta kopioi siitä tuo keltainen osuus, eli alkaen <a ja loppuen </a>. Kopio tämä osa molemmista kuvista ja laita ne vaikka Notepadiin, Wordiin, tai jonnekin muistiin hetkeksi.

Siirry takaisin Luo -tilaan ja poista kuvat, tai pyyhi niiden koodit pois siellä HTML -puolella. Seuraavaksi laitat HTML puolella sivulle seuraavan koodinpätkän:

<center><table border="0" width="150"><tbody><tr><td>Kuva1</td><td>Kuva2</td></tr></tbody></table></center>


Korvaa koodissa näkyvät Kuva1 ja Kuva2 niiden kahden kuvan koodeilla, jotka olet juuri laittanut jemmaan.  Kumpikin tulee siis omaan lokeroonsa. Siirry takaisin Luo -puolelle, ja sinulla pitäisi olla kaksi kuvaa kauniisti vierekkäin!

"En käytä Bloggerin kuvanlatausohjelmaa...!"
Jos lataat kuvasi ensin jonnekkin nettiin ja sitä kautta blogiisi, valitse suoran URL:in sijasta kuvasi HTML-koodi. Esimerkiksi Photobucket tarjoaa näppärästi tätä vaihtoehtoa. Syötä tämä koodi Kuva1 ja Kuva2 kohtaan, niin homma toimii ihan samalla tavoin, kuin yllä on kuvattu. 

"Haluan ainakin kolme kuvaa vierekkäin!"
Ennen kuin joku hihkaisee tämän, niin kerrottakoon, että voit muuttaa vierekkäin laitettavien kuvien määrää lisäämällä aina uuden <td>Kuvan koodi</td> -pätkän ennen tuota lopun </tr> sulkua. Muista, että kuvien tulee olla tarpeeksi pieniä, että ne mahtuvat vierekkäin! Eli kolmen kuvan sarja olisi <td>Kuva1</td><td>Kuva2</td><td>Kuva3</td> 



Photo credit 1: DomiKetu / Foter / CC BY-NC-ND
Photo credit 2: swanky / Foter / CC BY-NC-SA

43 kommenttia:

  1. Kiitos tästä! "Muutaman" kerran tuskastellut Bloggerin ehkä paskimman kuvasysteemin kanssa. Kuvat todellakin liikkuvat minne halajavat. Voitko samalla neuvoa, että miten kuvan saa joko oikeaan tai vasempaan reunaan? Sekin nimittäin joskus on hankalaa. Käytän kuvien asettelua myös reunoille silloin, kun postaus sisältää runsaasti kuvia, kuten esim. tässä kesäisessä Saarenmaa -merkinnässä.

    VastaaPoista
    Vastaukset
    1. Bloggerissa on ihmeellisiä puutteita välillä, kuten tämä kuvien asettelun vaikeus. Minulla on ainakin toiminut tuo kuvien siirty yksinkertaisesti oikeaan tai vasempaa reunaan ihan hyvin. Jos se ei ihan haluamallesi kohdalle asetu, niin HTML-puolelta kannattaa varmaan lopuksi katsoa mihin kohtaan kuva siellä tulee ja muuttaa koodin paikkaa. Mitään samanlaista kikkaa, kuin tuo vierekkäin laittaminen minulla ei tähän ole antaa -ainakaan vielä.

      Poista
  2. Kiitos tästä!!:) iso apua varmaan jatkossa:)

    VastaaPoista
  3. Mulla oli toi kuvien venkoilu ongelma oman blogin alkuaikoina kun halusin niitä kuvia vierekkäin, mut nyt kun lataan se flickristä 800 levyisinä eli sinänsä melko suurina, niin laitan ne ihan vain niiden koodit sinne html:n ja niinpä ne tulee ihan vain normisti allekkain. Yleensä kanssa teen sen kuvankäsittelyohjelmalla jos haluan kuvia vierekkäin. Mut tää on varmaan hyödyllinen vinkki niille joita nyppii bloggerin temppuilu kuvien vierekkäin laittamisessa!

    VastaaPoista
    Vastaukset
    1. Allekkain laittaminen ei tosiaan ole ongelma Bloggerin kuvatyökalullakaan. Sehän on se oletus. Millä kuvankäsittelyohjelmalla teet ja saat kaksi kuvaa vierekkäin postaukseen niin, että ne on kaksi erillistä kuvaa? Vai onko se siis yksi iso kuva?

      Poista
    2. Yhteen isoon kuvaan laitan ihan. Ipiccyllä ja picmonkeyllä muokkaan kuvia jne. mut voihan siinä muokkaillessa vaikkapa tehdä niin ison välin niille kuville että ne näyttävät erillisiltä. Oli miten oli, isoon kuvaan kuitenkin laitan kaksi kuvaa aina vierekkäin.

      Poista
    3. All right, eli kollaasimeiningistä oli kyse. Minä jo mietin, että millä saa kaksi erillistä kuvaa laitettua :)

      Poista
  4. Jes, loistavaa! Suuri kiitos tästä vinkistä! Olen ennenkin tuskaillut tämän asian kanssa ja nyt toivon mukaan sain ongelmaan ratkaisun, täytyykin heti testata :D

    VastaaPoista
  5. Eipä tässä taas muuta kuin iso KIITOS :) Tästä oli apua! Ehkäpä munkin blogin historiassa nähdään ensimmäistä kertaa kaksi kuvaa vierekkäin.

    VastaaPoista
  6. Hei onpa hyvä, että kirjoitit tästä, samaa olen itekin tuskaillu aina ajoittain :) Pitääpä ens kerrolla kokeilla, kiitoskiitos! :)

    VastaaPoista
    Vastaukset
    1. Kuvat voi tosiaan aiheuttaa tuskaa :) Kiva että auttoi!

      Poista
  7. Suuret kiitokset! Tää on mua jo kauan kismittänyt. Mut miten saa kuvan ja tekstiä rinnakkain?

    VastaaPoista
    Vastaukset
    1. Selvittelin tätä asiaa ja ehdotinkin jo tuolla ekassa kommentissa ihan perinteistä taktiikkaa, mutta ilmeisesti sillä ei saa tarkasti määriteltyä mikä osa tekstistä tulee kuvan viereen ja mikä sitten kuvan alle jatkuen normaalisti. Tekstit voi vissiin pomppia julkaisuvaihessa mihin sattuu ja olla ihan eri paikassa, kuin luonnostekstin perusteella olisi luullut.

      Oisikohan tästä siis apua: jos etsii HTML puolelta sen kohdan, jonka haluaa jtakuvan kuvan alta (esim. ctrl+f:llä etsii lauseen alun) ja laittaa heti sen eteen div class="separator" style="clear: both;"> /div -koodin (laita < koodin alkuun ja < > loppuun /d ympärille! En pysty julkaisemaan kommenttia, jos kirjoitan koodin kokonaisuudessaan:)). Silloin jaottelun pitäisi toimia haluamallasi tavalla.

      Poista
    2. Siis loppuun /div ympärille :)

      Poista
    3. Kiitos! Tätä täytyy harjoitella. Noi koodit on vähän pelottavia, mut sun ansiostas oon alkanu tottua niihin. :-)

      Poista
    4. Yh. Mitenhän saisi kuvia tekstien väliin (tasauksen yhteydessä) ettei tulisi reikiä/millin mittaisia aukkoja?

      Poista
    5. En tuohon tiedä ratkaisua! En ole muutenkaan kauheasti leikkinyt noiden kuvasommittelujen kanssa.

      Poista
  8. Suuri kiitos tästä! ♥
    Olen vähän haeskellut netistä tietoa juuri tästä, eli miten saa kuvat vierekkäin bloggeriin.
    Aika sekavia juttuja tullut vastaan, mutta tämä on selvästi ja hyvin selitetty, että tälläinen mummokin kohta kun on, osaa!
    Kokeilin ja onnistuin, jeeeee!
    Raahailin tuskastuneena yhteen postaukseeni kahta kuvaa ja teksti tuli miten sattuu...hehhee.
    Nyt onnistuu, luulen!
    Vähän isommaksi jätin kuvat kuin tuossa sinulla, hyvin onnistuu.
    Kaunista syksyä :D

    VastaaPoista
    Vastaukset
    1. Yritin tosiaan tehdä mahdollisimman selkeän ohjeen, joten mukava kuulla jos onnistuu. Samoin kiitos, hyvää syksyä!

      Poista
  9. Hei. Mua kiinnostaisi blogien mainostulojen verotus - miten se käytännössä toimii? Vai uskaltaako siitä puhua, ettei niitä aleta valvomaan tarkemmin? :) Pitääkö siis ilmoittaa jonnekin, jos joku ostaa mainostilaa blogistani... Olisi kiva jos kirjoittaisit aiheesta.

    VastaaPoista
    Vastaukset
    1. Tämä on hyvä aihe ja siitä on parasta puhua :) Tulen kyllä paneutumaan näihin verojuttuihin.

      Poista
  10. Jes! Kiitos vastauksesta, nyt osaan :)

    VastaaPoista
    Vastaukset
    1. Hyvä, että juttuni löysi perille ja sait ohjeen :)

      Poista
  11. Suuri kiitos selkeästä ohjeesta, uskoisin näillä ohjeilla selviäväni :)
    Lisäksi olen nähnyt joissakin blogeissa että teksti on siellä kuvien välissä, miten tämä onnistuu, osaatko sanoa?

    VastaaPoista
    Vastaukset
    1. Tuohon minulla ei valitettavasti ole ainakaan nopeasti vastausta. Voinko kyllä tutkia asiaa, että onnistuuko tuo Bloggerissa vai meneekö kauheaksi väännöksi.

      Poista
  12. Tästä on ollut hyötyä useita kertoja. Mutta jos on laittamassa esim. kahdeksan kahden sarjan kuvaa niin, miten tekstin saisi alle niin ettei se karkaa reilusti oikealle?

    VastaaPoista
    Vastaukset
    1. Siis ihan perusteksti meinaa karata oikealle sen setin jälkeen? Hmmm.. en tiedä. Kannattaa tutkia postauksen koodipuoli ettei siellä ole mitään align righttia tai muuta jäänyt kuvien jälkeen sulkematta.

      Poista
  13. Heips! Kiitos tästä vinkistä, olen rypenyt tämän kimurantin ongelman kanssa jo pitkään. Ja koska olen niin perfektionisti, eteeni tuli uusi kompastuskivi. Sain kuvat vierekkäin, kiitos sinun hyvien ohjeiden, mutta esikatselussa huomasin, että pystysuuntaisten kuvien väli on suuri. Olen siis muokannut allekkaisten kuvien kuvaväliä koodilla pienemmäsi. Etsiskelin tietoa tästä, kuinka saada pystykuvien väliä pienemmäksi, ja eräästä toisesta blogista luin, että se on työlästä, inhottavaa eikä siihen löydy ns. valmista koodia. Ajattelinkin kysyä sinulta, että eikö tosissaan ole mitään helppoa tapaa tai koodia kyseiseen ongelmaan, vai olenko tuomittu pystysuuntaisten kuvien suureen väliin?
    Toivottavasti osasin selittää, niin että ymmärsit. Kiitos etukäteen! :)

    VastaaPoista
    Vastaukset
    1. Heippa ja ole hyvä! Tämänkin koodin löytyminen oli aika kiven alla, joten en ihmettele, että tuon välin saaminen pienemmäksi on suuri operaatio. Bloggeria ei ole luotoa tällaiseen kuvien laittamiseen vierekkäin :) en siis valitettavasti tiedä tuohon kikkaa mutta jos joskus törmään sellaiseen, niin ilmoittelen!

      Poista
  14. Tätä piti kokeilla nyt ja hyvin toimii, kiitos! Kerrottakoon myös että lisäsin tämän postauksen kirjanmerkkeihin, että voin jatkossakin helposti tarkistaa, miten tuo koodi menikään :)

    VastaaPoista
    Vastaukset
    1. Ole hyvä :) Tämä onkin hyvä laittaa muistiin, niin ei tarvitse aina googlata.

      Poista
  15. KIITOS! Pink Bubble on kullan arvoinen paikka, varsinkin näin aloittelevalle bloggaajalle! :)

    VastaaPoista
  16. Hei kiitos hyvästä vinkistä! todellakin toimii. Kysyisin sellaista, että huomasin kun laitan kuvat vierekkäin antamallasi koodilla, ne näkyvät mobiiliversiossa venytettyinä, elleivät ole alkuperäisessä koossa (eli todella suuressa). Onko sinulla mitään vinkkiä tähän? Eli koneella näkyvät oikein hyvin, mutta mobiilissa aivan liian venytettyinä.

    VastaaPoista
    Vastaukset
    1. Jaa! Hyvä tietää. Eipä ole mitään vinkkiä tähän. Mobiilijutut ovat (vielä) vieraita.

      Poista
  17. Kiitos tosi paljon tästä! Sain taistella aika lailla kuvien kanssa, ennen kuin löysin näin yksinkertaisen ratkaisun ongelmaani. Kiitos vielä kerran! Tästä oli suuri apu. :)

    VastaaPoista