Come inserire automaticamente in Blogger gli articoli espandibili con il sommario in Homepage di lunghezza prestabilita.

Mi sono già occupato di come inserire gli articoli sintetici in Blogger. Quel metodo ha comunque delle controindicazioni che si possono così riassumere

1. Questa possibilità valeva solo per gli articoli futuri e non per quelli passati
2. Non venivano create automaticamente delle miniature degli articoli
3. Non venivano creati i Riassunti automaticamente e dovevamo inserire nel post in modalità HTML il seguente codice Scrivi il riassunto
   <span id="fullpost">
   Scrivi il resto del post
   </span>

Adesso è possibile inserire gli articoli sintetici automaticamente con miniature in Homepage.
Andare su Layout > HTML e dopo aver scaricato il modello completo cercare la riga di codice

</head>

Immediatamente sopra  questo codice inserire il seguente script

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 150; img_thumb_width = 200; </SCRIPT> <SCRIPT src=’http://parsifal32.altervista.org/articoli-espandibili.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/THMup' target='_blank'><span style='font-size: x-small;'>Automatic Thumbnail</span></a></noscript>

come mostrato nello screenshot. Salva il modello.
Adesso cerca quest’altro codice

<data:post.body/> oppure <p><data:post.body/></p>

e rimpiazzalo completamente con quest’altro

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style='clear: both;'/> <div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'><img src=’http://tinyurl.com/ou439a’/></a></span></div>
</b:if>

Come mostrato nello screenshot seguente

Salva il modello nuovamente. Adesso passiamo alle personalizzazioni
summary_noimg = 500 ; – Sono il numero di caratteri che devono essere mostrati se l’articolo non contiene immagini
summary_img = 400 ; – Sono il numero di caratteri mostrati nel riassunto se sono presenti immagini
img_thumb_height = 150; – Rappresenta l’altezza della miniatura in pixel
img_thumb_width = 200 ; – Rappresenta la larghezza in pixel della miniatura
http://tinyurl.com/ou439a – E’ l’URL dell’immagine con la scritta Leggi Tutto. Ovviamente può essere rimpiazzata con una fatta da voi che sarà sicuramente migliore di quella che ho fatto io.
Se non volete inserire un’immagine potete sostituire il secondo codice con quest’altro

<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/><DIV expr:id='"summary" + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</SCRIPT> <div style='clear: both;'/><div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'>Leggi tutto l’articolo</a></span></div>
</b:if>

Dove al posto di Leggi tutto l’articolo potete inserire una qualsiasi altra espressione.
Adesso quando posterete un articolo in modo automatico in Homepage sarà visibile solo un riassunto con il numero di caratteri che hai scelto di mostrare. Coloro che vorranno leggere tutto il post dovranno cliccare sull’immagine Leggi Tutto se hai scelto la prima opzione di codice oppure sulla scritta Leggi tutto l’articolo se hai scelto la seconda opzione.
Accortezze – Siccome questo codice va ad incidere nella stessa zona degli annunci pubblicitari di Adsense per inserirlo bisogna

1. Togliere la pubblicità dal modello.
2. Inserire questo codice degli articoli espandibili.
3. Rimettere nuovamente la pubblicità

Per vedere e testare il funzionamento di questo codice ho creato un blog apposito

• Blog degli articoli espandibili -

Cliccando su Leggi Tutto potete rendervi conto del suo funzionamento che è automatico. Se si inserisce un’immagine nella prima parte del post bisogna mantenere le proporzioni con i dati che si sono inseriti cioè 200 pixel di larghezza e 150 pixel di altezza altrimenti l’immagine risulterà distorta. Ovviamente ripeto di nuovo che questi numeri possono essere cambiati ed adattati al modello del blog.
Come potete notare nel primo articolo sono state mantenute le proporzioni perfettamente cosa che non è avvenuta nel secondo. Ovviamente eventuali distorsioni sono visibili solo in Homepage.
Visto che il bottone da me creato, che si trova qui, non si può dire sia un’opera d’arte se c’è qualche grafico tra i lettori che lo realizza e me lo recapita in qualche modo, oltre a fare un gesto caritatevole, gli metto il link del suo blog nell’articolo. Le misure sono pressappoco 80-90 pixel di larghezza e 15-25 di altezza. I colori sono a piacere.
Aggiornamento importante: E' ora possibile inserire il Read More direttamente dall'editor di Blogger.