Come visualizzare in Blogger i riassunti del post con miniature senza usare Javascript.

Da diverso tempo Blogger ha dato la possibilità ai propri utenti di tagliare l'articolo in due parti attraverso il Read More in modo da mostrare in Homepage e nelle pagine delle etichette solo il riassunto del post con il link per aprirlo nella sua interezza. Attraverso l'editor di Blogger si può usare l'icona che introduce automaticamente il commento <!-- more --> che ha questa funzione. Un simile pulsante esiste anche in Windows Live Writer ma solo nella sua ultima versione.

Vediamo una alternativa automatica a questo metodo. La cosa interessante è che si introduce solo un codice XML nel modello senza utilizzare javascript che appesantisce il caricamento delle pagine. Andate su Design > Modifica HTML e salvate il modello completo in previsione di un eventuale backup per il ripristino. Espandete i modelli widget e cercate la riga <data:post.body/>. Cancellatela e sostituitela con questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Salvate il modello. Volendo potete prima cliccare su Anteprima per vedere l'aspetto del blog che mostrerà i post in un modo simile a questo

Si vedrà cioè una miniatura del post, nel caso sia presente una immagine, insieme all'incipit del testo dell'articolo con il link per la sua apertura. La miniatura appare sulla sinistra ma si può creare una classe di stile per visualizzarla per esempio a destra con margini diversi rispetto al testo. In questo caso bisogna andare su Design > Modifica HTML e cercare la riga </b:skin>. Subito sopra si può incollare questo codice

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

per visualizzare la miniatura a sinistra e il testo distante 10 pixel dall'immagine. Oppure quest'altro

.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}

per mostrare la miniatura a destra. I margini possono essere modificati a piacimento. Le caratteristiche di questa personalizzazione sono le seguenti:

1. Questo riassunto automatico non avrà effetto sulle pagine statiche che saranno pubblicate come al solito senza riassunto
2. Si potrà aprire il post cliccando sul titolo o sul link Continua a leggere (o analogo che può essere personalizzato andando su Design > Elementi pagina > Post sul blog >Modifica)
3. Ho pubblicato dei post di prova nel blog Sidebar Multitab dopo avere inserito nel modello il codice precedente. Sulla destra c'è il link a una pagina statica (Pagina Menù) su cui potete cliccare per testare la sua corretta apertura
4. Come vedete ci sono molti tag condizionali che permettono di mostrare il riassunto con miniatura solo in homepage, nelle pagine di archivio e in quelle delle etichette. C'è anche una condizione che rileva la presenza o meno del tag <!-- more --> nell'articolo pubblicato.
5. Le immagini pubblicate tramite WLW non vengono acquisite come miniatura.

Aggiornamento: E' stato risolto il problema del doppio link nei post pubblicati con il Read More.