Riassunto dei post con miniatura da mostrare in homepage di Blogger.

Come creare automaticamente dei riassunti degli articoli nella homepage e nelle pagine delle etichette nei blog su Blogger.

Vediamo come mostrare in homepage di un blog su Blogger solo un breve riassunto del post corredato da una miniatura della prima immagine presente nell'articolo che può essere posizionata a piacere a sinistra o destra del layout. La particolarità risiede nel fatto che la miniatura non distorce l'immagine ma ne cattura solo una porzione. Questo script può essere utilizzato da chi per esempio all'inizio del post è solito inserire una immagine sempre delle stesse dimensioni che fa da anteprima al resto del contenuto. L'aspetto dei post in homepage sarà simile a questo

In questo caso la miniatura della immagine è stata posta a sinistra, il riassunto del post sulla destra insieme al bottone per aprire tutto l'articolo. Vediamo come procedere per l'installazione di questo metodo per presentare l'homepage che si differenzia da quello solito con il Read More essenzialmente per la presenza di miniatura e riassunto affiancati uno accanto all'altra.

Si va su Design > Layout > Backup/Ripristino e si salva il template per un eventuale ripristino di sicurezza. Quindi si torna su Layout > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la classica riga </head> e, subito sopra, si incolla questo codice

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 500;
summary_img = 340;
</script>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/riassunto-post.js' type='text/javascript'/>
<style>
#imm-post {
width:150px; /* Larghezza miniatura*/
height:150px;  /* Altezza miniatura*/
overflow:hidden; /* Nasconde immagine quando mancano immagini */
float:left; /* Miniatura sulla sinistra, right per averla a destra */
border:2px solid #ffffff;  /* Stile del bordo */
box-shadow: 0 0 1px #222222; /* Ombreggiatura del bordo */
}
#imm-post img { /* Valori per la visualizzazione della immagine */
min-width:150px; /* Larghezza minima della immagine altrimenti si vedrà lo spazio bianco */
min-height:150px; /* Altezza minima della immagine altrimenti si vedrà lo spazio bianco */
}
#incipit-post {
float:right; /* Sostituire right con left per allineare il riassunto a sinistra */
width:340px; /* Larghezza del riassunto */
}
.readmore-jump {
background:#FDBCB7; /* Colore dello sfondo del read more */
color:#ffffff; /* Colore del testo del read more */
padding:5px;
border-radius:5px; /* Raggio bordi arrotondati */
float:right; /* Posizione del read more sostituire left con right per averlo a sinistra */
}
</style>

dove alcuni parametri da personalizzare sono stati colorati di rosso e il loro significato è illustrato in un commento a lato colorato di verde. Adesso dobbiamo cercare questa linea
<div class='post-body entry-content'>
nei vecchi template, mentre in quelli più recenti cercheremo quest'altra riga
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Subito sopra a questa riga, o a un'altra simile che contenga comunque l'espressione post-body entry-content, si incolla quest'altro codice

<!-- riassunto inizio -->
<b:if cond='data:blog.pageType == &quot;index&quot;'><style>.post-body {display:none;} .riassunto {display:block;} </style></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><style>.post-body {display:block;} .riassunto , .readmore-jump {display:none;} </style></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <style>.post-body {display:block;} .riassunto, .readmore-jump {display:none;} </style></b:if>
<div class='riassunto' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<a class='readmore-jump' expr:href='data:post.url' rel='bookmark'>Leggi tutto</a>
<!--  riassunto fine -->

Non resta che salvare il modello e vedere l'effetto che fa. Questo articolo è stato ispirato dal celebre post Automatic Post Summaries for Blogger with Thumbnails scritto da Aneesh di Blogger Plugins. Chi ha un dominio personalizzato e ha problemi di malfunzionamento può scaricarsi il file javascript  https://sites.google.com/site/scriptperilblog/javascript-2/riassunto-post.js e caricarlo su DropBox.