Riassunti automatici dei post con miniatura per Blogger.

Read More automatico per i post di Blogger in modo da visualizzare in Homepage solo la miniatura e gli incipit di ogni articolo.

Nell'Editor della piattaforma Blogger è presente l'icona della funzione Inserisci Intervallo che divide il post in due parti. La prima parte del post che potremmo definire Incipit viene mostrata nella Homepage, nelle pagine di Etichette e di Archivio mentre la seconda parte si potrà visualizzare solo aprendo tutto il post, cliccando sul Titolo oppure sul link Continua a leggere.

Questa funzione ha la sua utilità per mostrare in Homepage e nelle altre pagine multiple un numero di post molto più elevato del normale visto che se ne vedrà solo la prima parte. Il cosiddetto Read More può essere personalizzato non solo modificando l'espressione Continua a leggere ma anche nell'aspetto o inserendo una immagine al suo posto.

Se si ha l'esigenza di pubblicare automaticamente dei post che mostrino solo un breve incipit insieme alla miniatura della prima immagine, come mi è stato chiesto in un commento qualche tempo fa, si può seguire le istruzioni di questo articolo. Non verrà usato nessun javascript ma solo i tag di Blogger quindi questo metodo non influenzerà in alcun modo le prestazioni del sito. Gli inconvenienti di questo sistema sono che non può essere configurato il numero di caratteri dello snippet dell'incipit e neppure la dimensione della miniatura. Si tratta comunque di una buona scelta per chi per varie ragioni abbia bisogno di un Read More automatico che funzionerà anche per gli articoli già pubblicati.

L'aspetto del riassunto dei post sarà il seguente

a seconda che sia o non sia presente una immagine nell'articolo. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

/* Read More automatico */
.readmore_thumb{margin-bottom:15px; border:1px solid #036; box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #07E; padding:10px 0;width:100%;height:100px;text-align:center;}
.readmore_thumb img{border:0;padding:0;max-width:96%;max-height:90px}
.readmore_thumb span{font-size:26px;line-height:70px;font-weight:bold; color:#036;}

Si va quindi su Vai al widget > Blog1,



si cerca la sezione <b:includable id='post' var='post'> e si clicca sulla freccetta nera

per visualizzare tutto il codice contenuto. Si scorre e si cerca la nuova riga <data:post.body/>. Si cancella e si sostituisce con questo nuovo codice

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='readmore_thumb'>
   <b:if cond='data:post.firstImageUrl'>
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
   <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
    <b:else/>
     <span>Nessuna Immagine</span>
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>
<b:else/>
  <data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Si salva il modello. La riga sostituita rappresenta il contenuto del post. I vari tag condizionali inseriscono il vincolo che se non si tratta di un post o di una pagina statica allora viene applicata la regola della classe readmore_thumb definita dai CSS del primo codice che mostra la miniatura della prima immagine dell'articolo e il suo incipit definito dal tag di Blogger <data:post.snippet/>.

PERSONALIZZAZIONI

Nel rettangolo in cui viene inserito il riassunto del post può essere cambiato il colore e lo stile del bordo oltre alle dimensioni e al colore della scritta Nessuna Immagine quando non ce ne fossero. Nel secondo codice tale espressione può essere sostituita da un'altra a piacere.