Purkkaratkaisuja Bloggeriin - Vierekkäiset kuvat ja sisäinen linkitys

En ole koskaan kokeillut WordPress-julkaisujärjestelmää, vaan käyttänyt Bloggeria jo noin 8 vuotta. Tuon ikäinen tämä sivusto nyt nimittäin on. Aika huimaa, että sivustollani alkaa kohta murrosikä :) Vaikka en ole koskaan WordPressiin koskenut, niin tästäkin huolimatta uskallan olla sitä mieltä, että WordPress on paljon parempi. Blogger on vain oikeasti niin turhauttava ja suppea. Perusjutut, kuten blogitekstin kirjoittamisen sillä saa tehtyä, mutta kaikki muu menee aina taisteluksi. Kuvan lisääminen menee yleensä hyvin, mutta joskus se vain saattaa pomppia mihin sattuu ja tekisi mieli heittää läppäri jorpakkoon. Kahta kuvaa et saa järkevästi vierekkäin ja taulukon luonti pitää vain tietää. Luulisi näihin kaikkiin olevan pikakuvake, mutta ei. Kaikki tämä on sinällään outoa, koska Google omistaa Bloggerin. Googlella on lähestulkoon rajattomat resurssit ja luulisi mainostuloista ja informaatiosta elävän firman juurikin panostavan myös siihen, että näitä saisi tuotettua, markkinoitua ja myytyä tehokkaimmalla mahdollisella tavalla. Valitettavasti kuitenkin jokainen Bloggerin "päivitys" on mennyt vain pahempaan suuntaan. Järkevintä olisi käyttää WordPressiä, mutta miksi itse käytän vielä Bloggeria? Olenko tyhmä ja laiska? Kyllä, mutta jokin masokisti puoleni tykkää ratkaista näitä ongelmia purkkavirityksillä kuten Ihmemies MacGyver. Vaikeimman kautta saattaa usein myös oppia parhaiten.

Aikaisemmat Blogger-vinkkini - Kannattaa tutustua

Jos et ole vielä lukenut sarjaani Blogger-vinkeistä, niin kannattaa lukaista ainakin artikkelini: Twitter kortit Bloggeriin - Toimi näin. Kun blogissasi on tämä ominaisuus, niin twiitatessa blogin artikkeleita Twitter näyttää artikkelista mahdollisen kuvan, otsikon ja lyhyen pätkän tekstiä twiitin yhteenvedossa. Ehkä selkeämmin sanottuna twiitti on paljon näkyvämpi ja myyvempi. Toinen hyvä artikkelini on: Hakukoneoptimointi ja linkkien merkitys sekä Blogger ja evästeilmoitus - Pakollisen viestikentän muokkaaminen, jos olet kertakaikkisen turhautunut noihin tylsiin evästeilmoituksiin ja haluat muokata niitä järkevämmäksi. Sulkana hattuun sitten artikkelini: Millainen on toiminnallisesti hyvä blogi - Omat top 10 -muokkaukseni. Tämän pohjalta olen oman blogini lay-outin suunnitellut ja sama toteutus on toiminut nyt viimeiset 5 vuotta. Ehkä olen jäävi toteamaan, mutta mielestäni todella toimiva. 

Tämän nyt lukemisen alla olevan artikkelin tarkoitus on puolestaan auttaa niitä henkilöitä, jotka käyttävät vielä Bloggeria ja tuskailevat tiettyjen asioiden parissa. Tässä artikkelissa tullaankin käsittelemään kuinka tehdään taulukko, miten saadaan kuvat vierekkäin ja miten tehdään sisäinen linkitys, jolla sivuston sisällysluettelosta voidaan hypätä suoraan itse otsikon kappaleeseen. Kirjoitan nämä vinkit myös tähän itseäni varten, koska kuukausittain tarvitsen näitä neuvoja. Nyt voin vain avata tämän artikkelin, eikä tarvitse penkoa samoja juttuja joka kerta Googlen syöväreistä.

Taulukon luonti

Aika usein lukuja ja muuta tietoa kannattaa esittää taulukon muodossa, koska se on niin paljon selkeämpää. Tässä esimerkkinä artikkelini: Kaupankäyntikuluni ja niiden osuus salkusta. Aloitetaan siis taulukon luomisesta, koska esimerkiksi vierekkäiset kuvat perustuvat taulukon hyödyntämiseen. Blogger ei anna pikakuvaketta taulukolle, joten joudumme osaamaan vähän HTML kielen perusteita. Yksinkertainen taulukko on kuitenkin äärimmäisen simppeli. Rakenne on seuraava:

<table>

<caption style="caption-side: bottom;">Tähän kuvateksti</caption>

<tbody>

<tr>

<th>rivi1 sarake1 otsikko</th>

<th>rivi1 sarake2 otsikko</th></tr>

<tr>

<td>rivi2 sarake1 arvo</td>

<td>rivi2 sarake2 arvo</td>

</tr>

</tbody>

</table>

Tuossa esimerkkikoodissa siis tehtiin taulukko, jonka koko olisi kaksi saraketta leveä ja korkeus kaksi riviä. Käytännössä siis otsikkorivin alla on vain yksi rivi tietoa. Koko taulukko rakennetaan <table> ja </table> tagien väliin. <caption> tagi määrää kuvatekstin. <th> määrittää taulukon otsikot (ensimmäinen rivi). Ne ovat oletuksena tuolla tagilla paksunnettu ja keskitetty. Jokainen taulukon solun data erotetaan sitten <td> ja </td> tagilla. Erittäin helppoa ja onnistuu Bloggerissa valitsemalla vaemmasta yläkulmasta kirjoitusnäkymän sijaan HTML-näkymän.

Kuvat vierekkäin

Joskus on vain pakko saada kaksi vertailtavaa kuvaa vierekkäin. Esimerkiksi ennen ja jälkeen jonkin operaation. Vasemmalla esimerkki artikkelista: Polkupyörän säilytys ja huolto kerrostalossa. Ensimmäisessä kuvassa ovat pyörät normaalisti pyörätangossa ja toisessa joulun alla koristeltuna. Bloggerissahan yhden kuvan voi tasata oikealla, vasemmalle ja keskelle, sekä säätää kuvan kokoa pienestä alkuperäiseen. Auta armias, jos haluat ne vierekkäin. Se ei vain onnistu millään.

Ratkaisuna on luoda taulukko, johon kuvat sijoitetaan. Valitaan siis HTML näkymä ja kopioidaan seuraava koodi. Kuvan a ja b kohdalla vaihdetaan takaisin kirjoitusnäkymään ja klikataan bloggerin "Lisää kuva"-pikakuvaketta, josta kuvat haetaan. Muokkaa normaalisti halutun kokoisiksi.

<br>

<table><caption style="caption-side: bottom;">Tähän kuvateksti</caption>

<tbody>

<tr><td>kuvan a osoite</td>

<td>kuvan b osoite</td></tr>

</tbody>

</table>

<br>

Periaatteessahan tuon olisi voinut hoitaa myös siten, että olisi tehnyt erillisellä kuvankäsittelyohjelmalla kollaasin, jolla molemmat kuvat olisi laittanut vierekkäin ja vienyt Bloggeriin yhtenä kuvana. Tässä on kuitenkin se ongelma, että tällöin kuvia ei saisi klikattaessa zoomattua niin paljon, kuin tällä ratkaisulla.

Sisäinen linkitys - Sisällysluettelosta suoraan otsikkoon

Joskus sitä innostuu kirjoittamaan todella pitkästi ja kattavasti jostain itselle tärkeästä aiheesta. Käytän tässä esimerkkinä artikkeliani: Muoviroskan erilliskeräys - Onko muovin kierrätys oikeasti järkevää. Siinä on tekstiä jo sen verran, että lukuaika on varmaan noin 45 min. Hyvällä otsikoinnilla sitä on pyritty selkiyttämään ja alkuun olen laittanutkin sisällysluettelon, josta pääsee hyppäämään itse kappaleeseen. Miten se tehdään?

Sisällysluettelo näyttäisi tältä:

<a href="#hyvät puolet"><li>Muovin hyvät puolet</li></a>

.

.
<a href="#video"><li>Aiheeseen liittyvä video</li></a>

Itse kappaleet sitten tältä:

<a name="hyvät puolet"><h3><b>Muovin hyvät puolet</b></h3></a>

.

.
<a name="video"><h3><b>Aiheeseen liittyvä video</b></h3></a>

Käytännössä siis heittomerkkien ja risuaidan sisään laitetaan jokin itselle selkeä viite. Sisällysluettelon voi kirjoittaa normaalisti numeroimattomana luettelona. Jokainen otsikko on kuitenkin sisäinen linkki <a href="#viite">Otsikko</a> ja vie tuohon heittomerkkien määräämään kohtaan. Halutussa kappaleessa johon linkki vie pitää olla luonnollisesti tämä sama viite, jotta se toimii. Eli <a name="viite">Otsikko</a> Huomaa että tässä ei enää käytetä risuaitaa viitteessä. Koska viitteiden hallintaa ei ole, niin kannattaa miettiä jokin selkeä logiikka tuolle, eli vaikka otsikon kolme ekaa sanaa yms. Muutama viite ei ole ongelma muistaa, mutta jos niitä on kymmeniä, niin jossain kohtaa muisti pettää.

Bonus - Ota varmuuskopio talteen

Tämä juttu ei kyllä kuuluisi tähän artikkeliin oikein mitenkään, mutta haluan sen silti mainita, koska se toimii hyvänä aasinsiltana. RikasErakko -bloggaaja lopetti taannoin blogin kirjoittamisen. Hän antoi domainin vanhentua ja poisti blogin Bloggerista. Joku kuitenkin osti domainin (ihan laillista) mutta kopio laittomasti kaiken sisällön internetin syöväreistä ansaitakseen ehkä mainosrahoja, tai mainostaakseen uhkapelisivustoja. Tiedä logiikasta sitten, mutta ei tuo kivalta näytä. En tiedä onko rikosilmoitusta tehty, tai miten homma muuten etenee.

Tämän ansiosta aloin kuitenkin pohtimaan sitä, mitä tapahtuisi jos en jostain syystä enää hallitsisi omaa blogiani. Jos vaikka Google antaisi ikuisen bannin, tai jotain muuta mustan joutsenen tapaista sattuisikin tapahtumaan. Onko minulla edes kirjoitukset jossain tallessa? No eipä taida olla. Noin 250 kpl enemmän tai vähemmän hyviä tekstejä voisi kadota bittiavaruuteen. Vitutus olisi varmaan väärä sana kuvaamaan sitä tunnetta, jos 8 vuotta kirjoittelua valuisi viemäristä alas. 

Otinkin siis Bloggerista varmuuskopion: Asetukset ->Blogin ylläpito -> Varmuuskipioitu sisältö. Tämä on .xml muotoinen tekstitiedosto, jossa on kaikki kirjoitukset kommentteineen. Omani on noin 8 Mt kokoinen.

Onko jollain vielä hyviä vinkkejä Bloggerin käyttöön, jotka nopeuttaisivat juttujen tekoa ja joita tulee itse käytettyä vähintään kerran kuukaudessa? Sellaisia joihin Blogger ei tarjoa työkalupalkissa pikakuvaketta, mutta joita todellisuudessa tarvitsee yllättävän paljon ja ohjeen näihin joutuu aina kaivamaan jostain netin syöväreistä. Olisin kiitollinen näistä vinkeistä.