Etusivu uusiksi postausten lyhennelmillä osa 2

Silmäsi lepäävät parhaillaan lupaamani Etusivu uusiksi osa kakkosen alkusanoissa. Laitamme siis blogin etusivun ulkoasun uuteen kuosiin postausten lyhennelmillä: postauksistasi näkyy siellä vain lyhyt pätkä postauksen alusta ja tietenkin kuva sekä linkki, jossa kehotetaan lukemaan lisää. Ensimmäisessä osassa kerroin, milloin postausten lyhennelmien näyttämistä koko jutun sijasta etusivulla kannattaa hyödyntää. Lyhyesti sanottuna, lyhennelmien avulla kävijä saa paremman kuvan blogisi juttutarjonnasta, varsinkin jos sinulla on tapana julkaista pitkiä juttuja. Jos osa yksi meni ohitse, kurkista sinne tästä.

Ensimmäisessä osassa opeteltiin tapa, jolla saat lyhennelmät etusivulle haluamistasi postauksista. Sinun ei tarvitse sorkkia koodia ja lyhennystä voi käyttää vain osassa postauksissa. Sillä tavalla et saa siis aikaisemmin julkaisemiesi postausten lyhennelmiä näkyviin, jos et käy niitä erikseen laittamassa. Tällainen voi ärsyttää etenkin niitä, jotka haluavat blogin yleisilmeen olevan suht harmoninen.

Tämä kakkososan ohje eroaa ykkösestä mm. näin:

• Saat etusivulle lyhennelmät kuvien kanssa kaikista postauksistasi ihan ensimmäisestä jutusta viimeisinpään.
• Lyhennelmän lisäksi etusivulla näkyy kuva ja linkki valitsemallasi tekstillä, joka kehoittaa lukemaan koko postauksen. 
• Saat lisätä/joudut lisäämään koodia blogiisi kerran mutta tulevien postausten kohdalla sinun ei tarvitse enää miettiä lyhennelmiä ollenkaan, vaan kaikki sujuu automaattisesti. 
• Tältä se näyttää:
  

Muista tehdä varmuuskopio blogistasi, jos lähdet koodailemaan kanssani! Googlailin ja kokeilin testiblogissani aika paljon erilaisia ohjeita tätä varten, ja päädyin yhteen, joka toimi minulla ainakin täysin moitteettomasti. Paras ohje löytyi täältä ja suosittelen tutustumaan ko. blogiin muutenkin, sillä sieltä löytyy hyviä koodeja joka lähtöön, tosin englanniksi (eikä blogi todellakaan ole mikään nörttipoikien kyhäelmä!).

Nyt alkaa koodaus: 
Löydät tarvittavat koodit siis tuolta edellä mainitun linkin takaa. Ne ovat sen verran pitkät, että turha niitä tähän kopsata kokonaisuudessaa. Autan kuitenkin muuten homman viemisessä loppuun:

1. Varmuuskopioinnin jälkeen menet Bloggerin hallintapaneelissa Malli -> Muokkaa HTML-koodia. Saat näkyviin blogisi ihanan koodiviidakon, jonka kentän yläreunasta klikkaat vielä muotoile mallia, jolloin voit helpommin hakea koodista oikeaa kohtaa esim. ctrl+f:llä tai mikä se nyt macissa onkaan. Sinun tulisi löytää koodista kohta </head>

2. Juuri ennen tuota </head> -kohtaa syötä täällä annettu ihan ensimmäinen koodi, joka on siis aika pitkä.

3. Seuraavaksi etsi samalla taktiikalla koodista <data:post.body/> Se löytyy about 2-3 kertaa koodista. Anna <data:post.body/> -koodinpätkän ensimmäisen ilmentymän olla ihan rauhassa, eli älä tee sille mitään. Mutta yksi tai kaksi seuraavaa koodinpätkää sinun tulisi korvata täällä 2. kohdassa annetulla toisella koodilla. Eli maalaa vaikka  korvattava <data:post.body/> siniseksi ja syötä tasan sen tilalle tuo tarjottu koodi. (Huomaa, että tuossa ohjeessa 2. kohdassa on kaksi koodia, joista ylempi vain demonstroi sinulle millaisesta ympäristöstä todennäköisesti löydät tuon <data:post.body/> -koodinpätkän. Älä siis syötä sitä 2. kohdan ekaa koodia mihinkään).

4. Kun koodi tai koodit ovat syötetty, korvaa niissä näkyvä read more haluamallasi ilmauksella, esim. lue lisää.

5. Tallenna ja tadaa, olet valmis!

Tässä vielä muutamat oleelliset loppuhuomatukset:

• Suosittelen laittamaan muistiin jonnekin, mitä poistit mistäkin kohtaa ja mitä lisäsit tilalle, jos haluat joskus eroon näistä lyhennelmistä.

• Jos jostain syystä kuvista tulee etusivulla jotenkin omituisen mallisia, muuta ensimmäisen koodin alussa olevia summary_noimg, summary_img, img_thumb_height, img_thumb_width -numeroita ja katso, mitä tapahtuu. 

• Jos käytit tuota ykkösosassa esiteltyä lyhennelmää ja haluat sittenkin vaihtaa tähän, sinun tulee poistaa manuaalisesti laittamasi välit teksteistä. Eli kun menet editoimaan sellaista manuaalisesti lyhenneltyä postausta, et saa oikein deletoitua sitä välistä kertovaa harmaata viivaa muutoin kuin vaihtamalla ko. tekstin HTML-puolelle. Sieltä etsit tekstistä koodin <!--more--> ja poistat sen. Tämä on hyvä tehdä, sillä muutoin sinulla lukee etusivulla lyhennelmissä tuplana "Lue lisää" tai mitä ikinä sinne laitoitkin.

Antoisaa koodailua!