Pubblicato il 18/09/13e aggiornato il

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

read-more-blogger

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,

read-more-automatico

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

cercare-codice-blogger
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.




15 commenti :

  1. Era proprio quello che cercavo, grazie!
    Ho una domanda da farti però: se volessi mettere la miniatura sulla sinistra e il testo di fianco (in modo da avere tutto sullo stesso livello invece di miniatura sopra e testo sotto), come potrei fare?
    Grazie ancora per tutti i consigli che ci dai!
    Ciao

    RispondiElimina
    Risposte
    1. Al posto del primo codice prova a mettere questo qui sotto nello stesso punto del modello

      .readmore_thumb img {float: left; margin: 1px 10px 10px 1px;}
      .readmore_thumb span{font-size:22px; font-weight:bold; color:#036;}

      Il secondo codice invece lascialo com'è. Ci potrebbero essere degli inestetismi nei post senza immagini. Fai un test.
      @#

      Elimina
    2. perfetto!
      ho aggiunto max-width:96%;max-height:90px per ridimensionare le immagini e ora è proprio come intendevo io!
      peccato che il testo riportato sia molto più breve rispetto alla grandezza della miniatura, quindi rimane un bel pò di spazio vuoto.
      ma così è già molto simile a quello del mio template!
      grazie mille!

      Elimina
    3. Se io volessi mettere più righe di testo nell'anteprima, come si fa?

      Elimina
    4. Non si fa. La lunghezza dello snippet è determinata automaticamente da Blogger
      @#

      Elimina
  2. E se si volesse permettere la lettura del seguito soltanto ad un particolare elenco di lettori piuttosto che a tutti? Ho già letto che su blogger non è possibile, al contrario di WP. Come posso risolvere questo problema? Grazie

    RispondiElimina
    Risposte
    1. Con Blogger non si può risolvere. Non c'è un sistema di login che permetta di leggere parte dei contenuti solo a chi si registra e accede
      @#

      Elimina
  3. ok, io ho provato e riprovato da ieri.... ma non riesco a farlo, per favore puoi dirmi come fare?? perchè se poi provo a fare l'anteprima ho rimane tutto invariato o mi scrive Impossibile caricare l'anteprima del modello: Errore di analisi XML, riga 2324, colonna 5: The element type "b:if" must be terminated by the matching end-tag "" Grazie mille

    RispondiElimina
    Risposte
    1. Se ti dice in quel modo significa che il codice non va bene e che manca il tag finale /b:if però nel codice ci sono quattro aperture di tag e quattro chiusure quindi non me lo so spiegare a meno che tu non lasci un segno di maggiore o di minore inavvertitamente quando copi il codice
      @#

      Elimina
  4. ciao Ernesto, ho copiato e incollato i codici dove descritto ma sul blog non è cambiato nulla! :/ www.vitazerotre.com

    RispondiElimina
  5. @Vitaazero-tre
    Il codice non funziona in tutti i modelli specialmente in quelli scaricati da internet
    @#

    RispondiElimina
  6. Ciao Ernesto, ho applicato questo read more al mio blog, modificando solo leggermente i colori dei bordi, ma ho notato che fa sparire automaticamente le etiche alla fine del post ... si può risolvere?

    RispondiElimina
    Risposte
    1. Non te lo so dire con certezza ma probabilmente queste impostazioni lasciano solo immagine, titolo e snippet
      @#

      Elimina
    2. ok grazie lo stesso! vedrò se toglierlo o rimanere così

      Elimina
  7. Questo commento è stato eliminato dall'autore.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.