Pubblicato il 29/12/11e aggiornato il

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
riassunto-post-miniatura
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




50 commenti :

  1. Sono passata per lasciarti gli Auguri per un Felicissimo 2012.
    Grazie per i bellissimi consigli che ci dai.
    A presto.
    Erika

    RispondiElimina
  2. Ernesto buongiorno, mi sa che questi read more con miniature non funzionano più. Ho provato a mettere anche quello senza script, ma nn mi visualizza la prima immagine. Uff.

    RispondiElimina
    Risposte
    1. @SoffioDiDea
      SE hai già provato a caricare lo script su DropBox o Google Code, allora c'è poco da fare. Forse dipende dalle modifiche del codice di Blogger.

      Elimina
    2. sì infatti, come se avessero bloccato codici esterni ai loro -.-'

      Elimina
  3. Ciao Parsifal, volevo chiederti un pò di aiuto per il mio blog. non sapendo modificare bene il codice non riesco a capire come strutturare alcune cose, spero tu possa aiutarmi. Grazie in anticipo. allora:
    Ho eseguito la tua procedura con i due pezzi di codice da incollare ed ha funzionato, solo che ci sono alcune cose che non mi piacciono molto.

    - Vorrei che non fosse presente il bottoncino rosa a sx ma soltanto la scritta "leggi tutto" o simili a destra, di un colore che sceglierò in un secondo tempo;
    - Vorrei che il testo venisse messo subito di fianco all'immagine e non sotto;
    - Vorrei impostare una lunghezza alla quale troncare il testo ma non capisco bene dove modificare. Per quanto riguarda immagini e miature varie ne posso fare a meno perché metto immagini piccole;

    spero tu possa aiutarmi, grazie parsifal..;)

    RispondiElimina
    Risposte
    1. @TravelFree
      Nel codice ci sono già indicati i parametri che possono essere personalizzati.
      Per eliminare il colore di sfondo a Leggi tutto sostituisci le righe
      background:#FDBCB7; /* Colore dello sfondo del read more */
      color:#ffffff; /* Colore del testo del read more */
      inserendo due codici di colori diversi da quelli proposti
      Il testo è già a fianco dell'immagine come si vede dallo screenshot.
      Per le altre possibili modifiche scaricati questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/riassunto-post.js
      modificalo a piacere e ricaricalo su Google Sites o Dropbox. Per la lunghezza del riassunto non c'è però un parametro apposito.

      Elimina
    2. Grazie tante parsifal, provo dmn e se mai ti scoccio di nuovo, gentilissimo..:)

      Elimina
  4. Ernesto sto provando da stamattina ad adattare il codice ma non ci riesco. Come posso sostituire Leggi tutto con un'immagine (tipo bottone)? Questo è l'unico readmore con miniatura che funziona sul mio blog.

    RispondiElimina
    Risposte
    1. mi auto-rispondo... alla fine ce l'ho fatta :) grazie ugualmente, kiss

      Elimina
    2. @Soffiodidea
      Non so come hai fatto ma sarebbe stato sufficiente sostituire questa riga
      background:#FDBCB7;
      con
      background:url(URL DELLA IMMAGINE);

      Elimina
    3. sì ci avevo pensato... ma il bottone in realtà è creato da più immagini (per dare l'effetto illuminato quando si pigia) e non mi funzionava... così ho aggiunto il codice al posto di "leggi tutto"

      Elimina
    4. @SoffioDiDea
      Poi forse con questo sistema forse si doveva inserire anche no-repeat
      background:url(URL_immagine) no-repeat;

      Elimina
    5. ah ecco, grazie mille magari vedo se funge meglio così, kiss

      Elimina
  5. Domande forse banali: ma tutte le opzioni che proponi per inserire i riassunti dei post con miniatura non funzionano se uno ha già messo il read more all'interno dei propri articoli? Cioè, va tolto il read more affinchè funzionino, ho capito bene?
    E poi, la differenza rispetto al read more è solo che le foto e i riassunti appaiono più piccini, giusto?
    Perdonami, oggi sono un po' intontita (sarà il tempo o sarà che ultimamente spremo un po' troppo i miei neuroni)
    Un bacione :)

    RispondiElimina
    Risposte
    1. @giulianamosetti
      Il read more e' relativo a un singolo post. Puoi metterlo in un post e non metterlo in un altro. Penso quindi che questo modo di generare i riassunti funzioni ugualmente.

      Elimina
  6. Una domanda: c'è modo di togliere il read more? Perchè a me compare già il "Continua a leggere", e così mi risulta una doppia scritta. Non funziona mettendo il testo in bianco, perchè essendo un link mi appare in blu come tutti gli altri links.
    Altra domanda: è possibile usare questa funzionalità dei riassunti con miniature anche nelle pagine delle etichette oltre che nella homepage?
    Un bacione

    RispondiElimina
    Risposte
    1. Ad una domanda mi sono già risposta da sola, perchè ho visto che la funzionalità appare automaticamente in tutte le pagine, fantastico!
      Invece con il "Leggi tutto" non so come fare, anche togliendo il pezzetto di codice che lo riguarda continua ad apparire.
      O tolgo quello o per lo meno tolgo il "Continua a leggere", perchè è brutto visualizzare entrambi.

      Elimina
    2. @GiulianaMosetti
      Prova a incollare sopra alla riga che indica la fine dei CSS cioè
      ]]></b:skin>
      questo codice
      .jump-link {display:none;}

      Elimina
  7. Ciao e grazie per il post. Ho appena eseguito le tue istruzioni e funziona tutto benissimo con firefox, mi sono accorto però che non funziona con explorer e chrome. Cosa devo fare? E' un problema dei miei browser o è un problema del file javascript? Il mio è un dominio personalizzato, ma dopo aver salvato il file su dropbox funziona (sempre solo su firefox)!

    RispondiElimina
    Risposte
    1. @EmergencyRoom
      I problemi del browser sono sempre difficilmente risolvibili perché non si sa bene da cosa derivino :(

      Elimina
    2. Grazie comunque... farò delle prove, sperando di risolvere!

      Elimina
    3. Ok ho scoperto l'inghippo! Il codice su dropbox non era condiviso, quindi mi funzionava solamente perchè con firefox ero loggato su dropbox. Non essendo loggato sugli altri browser, il codice non veniva letto e quindi non funzionava. Ho risolto inserendo il file direttamente nel codice html della pagina su blogger.

      Elimina
    4. Ti chiedo solo un'ultima cosa: è possibile modificare il codice in qualche modo (e se si, quale?) per fare in modo che nella miniatura si visualizzi la foto rimpicciolita, e non solamente una parte della foto? Perchè a volte, nella miniatura viene ripresa una parte insignificante della foto, rendendola inutile!

      Elimina
    5. @EmergencyRoomIlBlog
      Le due righe di codice per estrarre una parte della immagine sono queste
      min-width:150px;
      min-height:150px;
      Si può provare a modificare la dimensione delle miniature ma con questo sistema non si può estrarre una immagine perfettamente identica all'originale.

      Elimina
  8. Domanda da rompiballe quale sono: è possibile dare alla miniatura l'effetto bianco e nero e a colori al passaggio del mouse? Ho cercato d'integrare il codice ma resta solo in bianco e nero (l'effetto completo funziona sulla prima immagine solo dopo aver esteso l'articolo)

    RispondiElimina
    Risposte
    1. @Soffiodidea
      Se non ci sei riuscita tu che sei un mostro per l?HTML e il CSS :)

      Elimina
    2. ah beh ma senza di te sarei stata un'incapace :)

      Elimina
  9. questi giorni sono il tuo incubo. spera che il blog prenda presto forma per la tua salvezza...
    detto questo, ho impostato questa funzione ma la miniatura mi compare anche quando vado ad aprire il post. è normale?

    RispondiElimina
    Risposte
    1. @ littlefive
      Il codice era un po' datato. Prova adesso se funziona

      Elimina
    2. no, ora non mi compare nemmeno la miniatura ed è tutto fuori asse e mi compaiono contemporaneamente il tuo "leggi tutto" e il read more personalizzato da blogger.

      Elimina
    3. @ littlefive
      Allora forse c'è una incompatibilità con il tuo modello

      Elimina
    4. grazie. avevo avuto questo sentore. ricomincio la ricerca.

      Elimina
  10. salve. volevo sapere se, avendo impostato un termine dell'anteprima direttamente dal post, è possibile andare a "pescare" l'immagine anche se oltre quel limite. così mi lascia uno spazio bianco (mentre se l'immagine è prima del taglio del riassunto viene visualizzata).
    è inoltre possibile selezionare quale porzione dell'immagine vedere nell'anteprima (cioè la porzione centrale ad esempio)?
    grazie

    RispondiElimina
    Risposte
    1. @ pallapalla
      La risposta è no in entrambi i casi o almeno se fosse possibile non so come si faccia

      Elimina
  11. Un aggiornamento, scoperto per caso giocando coi codici :D
    Allora, se volete "proporzionare" l'immagine con l'anteprima trovate questa porzione di codice "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 */" e incollatevi appena sotto (senza saltare la parentesi graffa di chiusura) quest'altro codice "max-width:150px; /* Larghezza massima della immagine altrimenti si vedrà lo spazio bianco */
    max-height:150px; /* Altezza massima della immagine altrimenti si vedrà lo spazio bianco */"
    praticamente ho pensato "e se impostassimo anche la larghezza massima si riesce a proporzionare l'immagine all'anteprima?" e magicamente ha funzionato... ora vi chiedo scusa per come mi esprimo ma per me questo linguaggio html è tutto nuovo, spero che il grande Ernesto di questa piccola chicca possa aggiornare il tutorial, con i termini tecnici propri :) (sul mio blog ha funzionato)
    PS. inoltre per rimuovere "leggi tutto" è sufficiente sostituire il contenuto di ".readmore-jump" presente nella parentesi graffa (sempre del codice su esposto) con questo tag "display:none;"

    RispondiElimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  13. Salve.. ho seguito alla lettera il procedimento purtroppo, non funziona, nel senso che nel codice html del post compare class="fullpost"> e il resto...
    Però anche se io compilo.. quando pubblico il post la scritta continua a leggere mi appare alla fine.. senza tagliare in due il post.. Che faccio??

    RispondiElimina
  14. Aspetto con ansia la tua risposta !

    RispondiElimina
  15. @ Blogger
    Questo metodo è vecchio di anni, non si usa più. Ora è tutto molto più semplice. C'è il Read More
    http://www.ideepercomputeredinternet.com/2010/03/read-more-articoli-sintetici-blogger.html
    Si può dividere in due un post direttamente dall'Editor di Blogger cliccando sulla icona "inserisci un intervallo" che ha la forma di pagina strappata.

    RispondiElimina
  16. Ciao Ernesto, scusa il disturbo, io ho applicato alla lettera ed è riuscito tutto, ovviamente eliminando il read more vecchio. La mia domanda molto semplice è se conosci un metodo per rendere cliccabile la miniatura!?
    Grazie in anticipo per la risposta..

    RispondiElimina
  17. Si può ridurre una immagine in modo che si vede più chiara perché in ho-me page non si vede nulla a volte solo un angolo del foto.
    Seconda domanda se io ho caricato solo un video perché non si vede nulla...
    Come si può che filmato video sarà visibile in ho-me page senza cliccare su leggi tutto.

    RispondiElimina
    Risposte
    1. Funziona solo con mozilla e con altri non funziona cosa devo fare ce qualche modo che funziona con tutti anche con internet esp.

      Elimina
    2. @# Questo widget si basa sulle miniature ufficiali di Blogger quindi capita che le immagini non vengano catturate perfettamente. IL video è visto nel post non nel riassunto. Puoi provare a inserirlo prima di "Inserisci Intervallo".
      Per visualizzare non solo questo ma anche altri widget con tutti i browser prova questo sistema
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

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

    RispondiElimina
  19. Ho fatto tutto quello che era scritto, ma il mio blog è esattamente come prima.
    Dove potrei aver sbagliato? Forse devo cancellare qualche parte di codice prima di inserire questo?

    RispondiElimina
    Risposte
    1. Ogni modello fa storia a sé. Se sei sicura di non aver sbagliato prova a seguire il tutorial originale
      http://www.bloggerplugins.org/2009/06/automatic-post-summaries-for-blogger.html
      @#

      Elimina
    2. Prova anche questa alternativa
      http://www.ideepercomputeredinternet.com/2013/09/blogger-automatic-read-more.html
      @#

      Elimina

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.