Post espandibili su Blogger: versione automatica della modifica che non richiede intervento nei post

Molti hanno apprezzato e usato la possibilità di visualizzare i post di Blogger in forma sintetica nella pagina principale del blog per poi leggerli per intero tramite il pulsante “Leggi tutto…”, modifica che io stesso ho sempre usato per la comodità data a chi entra di poter scorrere velocemente gli ultimi articoli pubblicati e scegliere quale leggere nel dettaglio.

Il punto debole dell’intervento però è sempre stato dover inserire il codice HTML necessario in ogni singolo post, cosa che tra l’altro crea non pochi problemi quando si usa l’editor di Blogger piuttosto che Windows Live Writer.

Con questa modifica sarà possibile attivare in automatico la visualizzazione sintetica dei post (passati, presenti e futuri) senza dover intervenire nel codice di ogni singolo post.

Differenze rispetto alla precedente versione

Rispetto alla precedente versione dell’intervento, si avrà meno controllo su quale parte comporrà il sommario e quale il resto dell’articolo e si perderà parte della formattazione del testo. In più però verrà visualizzato un riquadro con l’anteprima della prima immagine usata nel post e non ci sarà bisogno (come già detto) di intervenire  nel suo codice.

Modifichiamo il template di Blogger

Da Layout->Modifica HTML, selezioniamo Espandi i modelli widget e cerchiamo questa riga di codice:

<data:post.body/>

Cancelliamola e al suo posto incolliamo:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript' >createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leggi tutto... </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Adesso cerchiamo:

</head>

E subito sopra incolliamo:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://tinyurl.com/ybuoz55' type='text/javascript'/>

AGGIORNAMENTO: a causa dei problemi avuti, ho modificato la parte in rosso nel codice sopra. Dovrete aggiornarlo nei vostri template altrimenti questa modifica non funzionerà più.

A questo punto possiamo salvare il template.

Personalizzare la visualizzazione dell’anteprima

Nell’ultima porzione di codice incollata, è possibile cambiare i valori delle variabili evidenziate in verde per personalizzare la visualizzazione dell’anteprima, ed esattamente:

• summary_noimg: indica il numero di caratteri da visualizzare del post se non è presente nessuna immagine (proposti 430 caratteri)
• summary_img: indica il numero di caratteri da visualizzare del post quando è presente nessuna immagine (proposti 340 caratteri)
• img_thumb_height: l’altezza in pixel dell’immagine da visualizzare in anteprima (proposta 100 pixel)
• img_thumb_width: la larghezza in pixel dell’immagine da visualizzare in anteprima (proposta 120 pixel)

In conclusione

Personalmente continuo a preferire il primo metodo proposto, ma di sicuro questa nuova modifica farà la felicità di chi ha avuto problemi con l’inserimento del codice nei post o chi ha già tanti post scritti in passato e non ha intenzione di aprirli tutti e modificarli per farli visualizzare in modo sintetico.

La modifica inoltre si presta molto bene per chi vuole dare un look decisamente più professionale al proprio spazio personale.

L’idea originale è presa da Vietwebguide.

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!