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