Pubblicato il 08/03/11 - aggiornato il  | 64 commenti :

Come visualizzare in Blogger i riassunti del post con miniature senza usare Javascript.

Da diverso tempo Blogger ha dato la possibilità ai propri utenti di tagliare l'articolo in due parti attraverso il Read More in modo da mostrare in Homepage e nelle pagine delle etichette solo il riassunto del post con il link per aprirlo nella sua interezza. Attraverso l'editor di Blogger si può usare l'icona che introduce automaticamente il commento <!-- more --> che ha questa funzione. Un simile pulsante esiste anche in Windows Live Writer ma solo nella sua ultima versione.
Vediamo una alternativa automatica a questo metodo. La cosa interessante è che si introduce solo un codice XML nel modello senza utilizzare javascript che appesantisce il caricamento delle pagine. Andate su Design > Modifica HTML e salvate il modello completo in previsione di un eventuale backup per il ripristino. Espandete i modelli widget e cercate la riga <data:post.body/>. Cancellatela e sostituitela con questo codice
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>
Salvate il modello. Volendo potete prima cliccare su Anteprima per vedere l'aspetto del blog che mostrerà i post in un modo simile a questo
post riassunto automatico blogger
Si vedrà cioè una miniatura del post, nel caso sia presente una immagine, insieme all'incipit del testo dell'articolo con il link per la sua apertura. La miniatura appare sulla sinistra ma si può creare una classe di stile per visualizzarla per esempio a destra con margini diversi rispetto al testo. In questo caso bisogna andare su Design > Modifica HTML e cercare la riga </b:skin>. Subito sopra si può incollare questo codice
.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}
per visualizzare la miniatura a sinistra e il testo distante 10 pixel dall'immagine. Oppure quest'altro
.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}
per mostrare la miniatura a destra. I margini possono essere modificati a piacimento. Le caratteristiche di questa personalizzazione sono le seguenti:
  1. Questo riassunto automatico non avrà effetto sulle pagine statiche che saranno pubblicate come al solito senza riassunto
  2. Si potrà aprire il post cliccando sul titolo o sul link Continua a leggere (o analogo che può essere personalizzato andando su Design > Elementi pagina > Post sul blog >Modifica)
  3. Ho pubblicato dei post di prova nel blog Sidebar Multitab dopo avere inserito nel modello il codice precedente. Sulla destra c'è il link a una pagina statica (Pagina Menù) su cui potete cliccare per testare la sua corretta apertura
  4. Come vedete ci sono molti tag condizionali che permettono di mostrare il riassunto con miniatura solo in homepage, nelle pagine di archivio e in quelle delle etichette. C'è anche una condizione che rileva la presenza o meno del tag <!-- more --> nell'articolo pubblicato.
  5. Le immagini pubblicate tramite WLW non vengono acquisite come miniatura.
Aggiornamento: E' stato risolto il problema del doppio link nei post pubblicati con il Read More.




64 commenti :

  1. Molto utile come sempre questo suggerimento di grafica. L'ho già appliccato e gli unici problemi riscontrati sono: l'uscita doppia del tag more, nel mio caso continua a leggere..; e l'immagine in miniatura mi esce solo al post più recente. Vorrei sapere appunto, se questi problemi si risolvono in automatico alla pubblicazione del prossimo post.

    RispondiElimina
  2. L'ho provato su un blog di servizio. Funziona anche sui vecchi post. Ma il testo non compare accanto all'immagine, ma sotto.

    RispondiElimina
  3. Ah, non è possibile anche disabilitare il bordo predefinito per le immagini?

    RispondiElimina
  4. Ok, inserendo sopra b:/skin il codice per le thumb a sinistra, il testo torna a posto.
    Ma succede una cosa strana: nella home il carattere appare diverso che nei post (verdana 16, ad occhio, in home, e arial 14 nel post).

    Inoltre: non si può allungare il numero di caratteri dello snippet?

    RispondiElimina
  5. @Affari Nostri
    @Christian
    Le miniature appaiono anche per i vecchi post. Le immagini però dovranno essere caricate dal computer con l'Editor di Blogger.
    Per il momento non sono riuscito a risolvere il problema dell'allungamento dello snippet e della doppia comparsa di "Continua a leggere" nel caso si sia inserito il < !-- more -- > nell'articolo. Comunicherò eventuali novità.

    RispondiElimina
  6. ciao! intanto volevo farti i complimenti e ringraziarti... senza l'aiuto del tuo blog non avrei potuto configurare il mio :)

    vediamo se puoi aiutarmi ancora...
    sto usando un template che era già configurato per il "sommario" ma non riesco in nessun modo a modificare il codice per far sì che nelle pagine statiche si visualizzi tutto il post. se vai sul mio blog puoi capire meglio cosa intendo... GRAZIE MILLE in anticipo!!

    RispondiElimina
  7. @DOCsubtitles
    Dovresti provare a inserire delle condizioni prese da questo post per fare in modo che il riassunto non funzioni per le pagine statiche. Vai in quella zona del modello e guarda un po' quali sono le linee che ti mancano. Salva sempre prima il modello.

    RispondiElimina
  8. @Ernesto T.grazie ernesto ma non manca nessuna linea credo sia un problema del tenplate che sto usando... bel casino!

    RispondiElimina
  9. Ciaoooo ho bisogno di te :-) nn ho ancora salvato il tutto perchè vorrei sapere come fare questa cosa :-(
    vorrei praticamente ingrandire la foto di anteprima...proprio come hai fatto tu con le fragole! :-((( help meeeeeeeeeeeeeee il prima possibile così nn devo rifare tutto da copo .-(

    RispondiElimina
  10. @Simona
    Non si possono inserire le dimensioni delle immagini della miniatura. Se guardi il codice non c'è neppure un numero. La miniatura è quella fornita ufficialmente da Blogger ed è data dalla sorgente
    data:post.thumbnailUrl
    E' possibile che la sua forma (e dimensione) vari da modello a modello ma è solo una ipotesi.

    RispondiElimina
  11. @Ernesto T.grazie mille ernesto .-D prima o poi dovrò imparare anche a mettere i menù...ma per me è davvero un'impresa!!!! uff

    RispondiElimina
  12. Ciao ernesto
    volevo chiederti se per caso hai pubblicato qual'che post
    dove possibile pubblicare solo l'immagine del post in home page!
    esempio questo blog http://films92.blogspot.com/
    diciamo effetto galleria
    sapresti aiutarmi??? penso che e la grafica che ormai usano tutti i siti
    grazie in anticipo

    RispondiElimina
  13. Salve,
    volevo sapere se ora è possibile modificare la grandezza dell'immagine e la lunghezza del testo
    Gazie

    RispondiElimina
  14. @PianetaCalcio
    Come vedi non c'è nessun parametro. Sone le miniature originali di Blogger però potresti provare a inserire un CSS di questo genere

    .thumb img {
    width: 50px;
    height: 50px;
    float: right;
    margin: 0 0 10px 10px;
    }

    per l'immagine dovrebbe funzionare. Per la lunghezza del testo non saprei.

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

    RispondiElimina
  16. Ciao!!! Ho provato ad inserire il codice ma non mi funziona, la visualizzazione rimane la stessa! questo è il blog www.justfishing.it

    RispondiElimina
  17. @Michele...
    Può darsi che l'introduzione dei domini localizzati abbia reso errato questo codice.

    RispondiElimina
  18. Ernesto,
    stavo pensando di optare per questa funzionalità anzichè per quella con javascript, per non rallentare troppo la pagina.
    La miniatura dell'immagine in automatico mi appare sulla destra, e non riesco in nessun modo a spostarla sulla sinistra, nè inserendo l'apposito css direttamente nel modello html nè inserendolo nell'apposito campo del Designer Modelli > Avanzato > CSS
    Da cosa potrebbe dipendere?

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Questo hack è molto limitato, vengono usate solo le API di Blogger. Tutto quello che si può fare è illustrato nel post.

      Elimina
    2. Infatti, volevo solo spostare la miniatura dell'immagine a sinistra seguendo le tue indicazioni. Però il codice non funziona.

      Elimina
    3. @GiulianaMosetti
      Può dipendere anche dal fatto che Blogger ha cambiato codice.

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

      Elimina
  19. Fantastico, grazie. Era proprio quello che mi serviva. Fatto in 10 secondi.

    RispondiElimina
  20. Ciao! Io ho provato a inserire il codice ma mi trova due volte "" ho provato a sostituirla due volte, una volta, una volta la prima e una volta la seconda ma resta tutto come prima!

    RispondiElimina
    Risposte
    1. @Giuseppe-+-+-
      E' molto strano avere due volte quella riga. Si tratta del contenuto del post. Questo potrebbe significare che vedi i post doppi. Non saprei cosa consigliarti.

      Elimina
    2. è possibile che sia ripetuto due volte, eventualmente provare ad eliminarne uno e provo a vedere che succede? Ovviamente prima faccio backup :)
      poi un'altra richiesta: la fine del riassunto del post sarebbe possibile settarla proprio su dove c'è la linea che usavo prima per spezzare i post? Scusa per la rottura XD

      Elimina
    3. Ottimo post forse tra i più utili tra quelli presenti in questo blog.
      Forse gli altri hanno problemi perché questo codice data:post.body/ è presente non solo una volta nel modello e quindi loro lo sostituiscono con quello sbagliato.

      Elimina
    4. ciao ernesto.
      è possibile aumentare il numero di righe nell'anteprima?

      Elimina
    5. @ littlefive
      Questo sistema è basato interamente sui tag di Blogger e quindi l'Anteprima è quella che forniscono loro e non si può modificare ulteriormente.

      Elimina
    6. grazie. ci capisco ancora poco ma ti .....sei una risorsa

      Elimina
    7. ehm. è impazzito il cellulare;)

      Elimina
  21. Ho provato a inserire il codice come qui suggerito ma non accade nulla :(

    RispondiElimina
    Risposte
    1. @ Giuseppe
      Il post è un po' datato e poi dipende dal modello utilizzato; nel test funzionava...

      Elimina
  22. Ho appena trovato quest'articolo... ed è perfetto. :) Ne ho approfittato per sbarazzarmi di uno script che svolgeva lo stesso lavoro, ma mi deformava le miniature delle immagini. Così invece... cavoli! Come farei senza le tue guide?

    Buona serata

    RispondiElimina
  23. Ciao Ernesto,
    ho provato il codice ma non va...
    sia dall'anteprima che salvando il tutto, i post rimangono invariati...

    prima usavo il tasto INSERISCI INTERVALLO all'interno dei post per dirgli dove staccare così l'ho levato prima di procedere col codice.... ma niente nessun risultato.
    I miei post sono strutturati così:

    immagine
    immagine
    testo
    immagine
    etc etc

    può dargli fastidio qualcosa all'interno dei post?

    RispondiElimina
    Risposte
    1. Non lo so. I modelli fanno tutti storia a sé. Nei modelli originali di Blogger dovrebbe funzionare ancora anche se è un codice vecchio @#

      Elimina
  24. ciao a tutti, io non trovo il codice
    Chi mi può aiutare?

    RispondiElimina
    Risposte
    1. Il post è molto vecchio quindi non so se il codice funziona sempre. Se hai problemi a trovare le righe di codice nel template leggi questo articolo
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html

      @#

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

    RispondiElimina
    Risposte
    1. Prova a togliere queste tre righe
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <data:post.body/>
      <b:else/>

      e il

      </b:if>

      finale. Non ho testato quindi non sono sicuro che funzioni

      @#

      Elimina
  26. Grazie! Purtroppo mi sono appena resa conto che il codice che ho usato non è stato preso da questo sito quindi è un tantino diverso.

    RispondiElimina
  27. Sono riuscita a trovare la parte del codice che faceva funzionare il widget soltanto in homepage,
    era questo :
    Grazie mille. Il tuo sito è davvero una preziosa risorsa :)

    RispondiElimina
  28. a me non funziona, perchè??

    RispondiElimina
    Risposte
    1. Il post risale a più di 4 anni fa e quindi ci possono essere state delle variazioni nel codice
      @#

      Elimina
  29. ciao, all'interno del modello ho in vari punti ...puoi dirmi eventualmente sopra o sotto cosa trovo e soprattutto se il codice è ancora valido?? grazie e buona domenica

    RispondiElimina
  30. ciao, all'interno del modello ho in vari punti ...puoi dirmi eventualmente sopra o sotto cosa trovo e soprattutto se il codice è ancora valido?? grazie e buona domenica

    RispondiElimina
    Risposte
    1. Il post è molto vecchio quindi non so se funzionerà ancora in codice. Per prima cosa cerca questa riga
      <b:includable id='post' var='post'>
      quindi scorri lentamente il codice verso il basso fino a trovare la riga
      <data:post.body/>
      esegui le istruzioni del post
      @#

      Elimina
  31. Ernesto non c'è un altro metodo per visualizzare i riassunti con miniatura? questo codice forse è vecchio e non funziona, sarebbe interessante questa procedura se funzionasse

    RispondiElimina
    Risposte
    1. Mi rispondo da sola.. ci sono riuscita sbagliavo la riga , però mannaggia le immagini sono proprio piccole. Grazie

      Elimina
    2. Prova a sostituire questa riga
      <img expr:src='data:post.thumbnailUrl'/>

      con quest'altra

      <img expr:src='data:post.thumbnailUrl' style='width:200px; height:200px;'/>

      Però salva prima il modello.
      P.S. Non so se funzionerà

      @#

      Elimina
    3. Ciao Ernesto, grazie. Ho provato a sostituire la riga e l'immagine viene con le dimensioni perfette ma non sono nitide anzi proprio confuse :(

      Elimina
    4. Prova quest'altra soluzione
      <img expr:src='data:post.firstImageUrl'/>
      al posto di
      <img expr:src='data:post.thumbnailUrl'/>
      Dovrebbe rilevare la prima immagine e non la prima miniatura. Se funzionasse modifica la riga in questo modo
      <img expr:src='data:post.firstImageUrl' style='width:200px; height:200px;'/>
      per settare la dimensione giusta della miniatura in altezza e larghezza, personalizzando i valori 200px e 200px
      @#

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

      Elimina
    6. Ciao! sai per caso dove posso inserirlo il codice? perchè ho provato a seguire quello che c'è scritto sul post, ma non funziona...

      Elimina
    7. Questo articolo è del 2011. Il codice di Blogger da allora è cambiato moltissimo e non mi stupisco che non funzioni più :(
      @#

      Elimina
  32. La risoluzione è quella e non cambia quindi si sgrana 😑
    @#

    RispondiElimina
    Risposte
    1. Prova quest'altra soluzione
      <img expr:src='data:post.firstImageUrl'/>
      al posto di
      <img expr:src='data:post.thumbnailUrl'/>
      Dovrebbe rilevare la prima immagine e non la prima miniatura. Se funzionasse modifica la riga in questo modo
      <img expr:src='data:post.firstImageUrl' style='width:200px; height:200px;'/>
      per settare la dimensione giusta della miniatura in altezza e larghezza, personalizzando i valori 200px e 200px
      @#

      Elimina
  33. funziona, però non so come mai i titoli dei post non occupano l'intera larghezza ma vanno a capo prima..

    RispondiElimina
  34. c'è modo per togliere "Commenti" da sotto l'anteprima dei post, senza disabilitare la funzione commenti dal blog?

    RispondiElimina
    Risposte
    1. Questo codice è stato aggiornato 5 anni fa. È già un miracolo se funziona ancora, sia pure parzialmente 😊

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy