Visualizzare gli articoli in forma sintentica su Blogger

Blogger adesso supporta nativamente la possibilità di creare post espandibili. Per maggiori informazioni leggi questo post.

Se gli articoli che pubblichiamo sono troppo lunghi può essere utile, come ho fatto io, visualizzarne solo una parte nella pagina principale del blog e poi visualizzarne il resto tramite il link "Leggi tutto...".
Purtroppo Blogger non da nativamente questa possibilità, ma con un po' di pazienza e modificando il template possiamo ottenere lo stesso il risultato. Esistono un'infinità di modi per farlo, ma ho trovato quello proposto da Hackosphere il più semplice e col risultato migliore.

Prima di tutto è importante eseguire il backup del nostro template: se dovessero verificarsi dei problemi potremo sempre tornare indietro.
Dopo aver effettuato il backup, da Layout->Modifica HTML selezionate l'opzione "Espandi i modelli widget":

e seguite i seguenti passi:

 1. Cercate il tag </head> e prima di esso incollate tutto il codice che trovate a questa pagina (tasto destro del mouse/seleziona tutto/copia/incolla).

 2. Cercate il div che rappresenta il corpo dell'articolo che inizia con la seguente riga:
 <div class='post-body'
e aggiungete il codice scritto in rosso inserendolo tra quello scritto in nero così come lo vedete:
 <div class='post-body' expr:id='"post-" + data:post.id' >
  <b:if cond='data:blog.pageType == "item"'>
    <style>#fullpost{display:inline;}</style>
    <p><data:post.body/></p>
  <b:else/>
    <style>#fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
      <a expr:href='data:post.url'>Leggi tutto...</a>
    </span>
    <script type='text/javascript'>
      checkFull("post-" + "<data:post.id/>");
    </script>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

3. Andate in Impostazioni->Formattazione e in fondo troverete la casella di testo identificata da "Modello post":

Inserite il seguente codice (fate copia e incolla):

Inserisci il sommario qui
<span id="fullpost">
Inserisci il resto del post qui
</span>
Salvate le impostazioni e provate a inserire un nuovo post. ecco quello che vedrete:

A questo punto, quando scrivete il vostro post, la parte introduttiva la inserirete al posto di "Inserisci il sommario qui", e il resto dell'articolo lo scriverete al posto di "Inserisci il resto del post qui". Pubblicando il vostro post, e andando sul blog, vedrete l'effetto desiderato.
Personalmente preferisco non seguire il punto 3, cioè non inserire automaticamente il codice nel modello del post, ma piuttosto, prima di pubblicare l'articolo, vado in "Modifica HTML" del post e inserisco i due tag manualmente:
<span id="fullpost"> all'inizio dell'area che non vogliamo visualizzare nella pagina principale del blog
</span> alla fine del post
Dopodichè lo pubblico. Preferisco fare così perchè mi è capitato che il post si visualizzasse male e andando poi a visualizzare il codice HTML ho scoperto che era stato riempito erroneamente di <span id="fullpost">.
Se avete problemi o avete bisogno di chiarimenti, lasciatemi un commento.
AGGIORNAMENTO: mi ero dimenticato a evidenziare in rosso una riga del codice, cosa che ha provocato un po' di confusione tra alcuni lettori. Ho visto inoltre che molti template come prima riga hanno:
<div class='post-body entry-content'>
In questo caso le porzioni in rosso vanno semplicemente aggiunte, per cui la prima riga (modificata) diventa:
 <div class='post-body entry-content' expr:id='"post-" + data:post.id' >

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!