Pubblicato il 28/03/11e aggiornato il

Come visualizzare nella homepage di Blogger il riassunto dell'articolo con miniatura dell'immagine.

Ci sono diversi metodi per realizzare questa personalizzazione che devo dire suscita particolare interesse tra gli utenti di Blogger considerato il numero dei commenti che ricevono i post che la trattano. Ne fanno fede questo post sugli articoli sintetici e quest'altro sul read more con miniature. In questo articolo presenterò un nuovo procedimento che ricalca in sostanza quelli precedenti ma che ha maggiori possibilità di personalizzazione. Si tratta di mostrare in automatico solo le prime righe del post insieme a una miniatura dell'immagine, ammesso che l'articolo ne contenga almeno una. Ricordo che, come al solito, vengono rilevate solo le foto postate con l'Editor di Blogger e non quelle inserite per esempio tramite Windows Live Writer.

Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate la riga </head>. Immediatamente sopra incollate questo codice 

<link href='https://sites.google.com/site/scriptperilblog/javascript-2/leggi-tutto.css' rel='stylesheet' type='text/css'/>

Adesso cercate la riga  <data:post.body/>. Cancellatela e sostituitela con quest'altro blocco di 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='Immagini'><img expr:src='data:post.thumbnailUrl'/></div></b:if> <data:post.snippet/><div class='Elementi'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Continua a leggere...</a></div>
<b:else/><data:post.body/></b:if></b:if></b:if></b:if>

Dove l'espressione Continua a leggere… può essere sostituita da un'altra a piacere. Salvate il modello. Se adesso aprite la homepage, vedrete che i post presenti hanno assunto questo aspetto

post di blogger in homepage

Con l'espressione Continua a leggere… all'interno di un rettangolo grigio che muta il gradiente al passaggio del mouse e una miniatura della foto sulla destra. Si possono fare ulteriori personalizzazioni sul link che invita a aprire il post e su altri aspetti grafici. Occorre modificare il file CSS per quello che riguarda i colori o eventuali immagini di sfondo. Lo consiglio solo a chi abbia un minimo di esperienza sui codici dei colori. Si può anche spostare la miniatura sulla sinistra (left al posto di right) e modificarne le dimensioni. Il CSS modificato dovrà essere caricato su Google Sites (modalità Schedario) o Dropbox; ne dovrà essere acquisito l'hotlink e sostituito nella riga di codice che viene inserita nella sezione <head>. Questo codice non avrà effetto sulle pagine statiche che continueranno a essere pubblicate e visualizzate con le stesse modalità.





20 commenti :

  1. grazie per l'informazione,mi sarà molto utile

    RispondiElimina
  2. Ciao, molto interessante!

    A tal proposito volevo chiederti se fosse possibile usare quel css e quel metodo per visualizzare, con lo stesso stile, le miniature di un paio di articoli in evidenza e lasciare magari il resto dell'homepage con la visualizzazione classica!

    Grazie e complimenti per il blog!

    RispondiElimina
  3. @Oberon
    Può darsi che sia anche possibile ma francamente non saprei da dove cominciare ^_^

    RispondiElimina
  4. @Ernesto T.

    grandissimo!davvero utile,visto i tanti articoli che pubblico insieme a volte.premesso che ho provato anche a installare gli articoli sintetici senza fortuna,volevo chiederti se era possibile modificare il numero di righe del post visibili.

    RispondiElimina
  5. Ho inserito i due pezzi di script. Finchè utilizzo il suo link per il file CSS va tutto bene.
    Ho poi provato a modificare la dimensione dell'immagine (da 72 a 100) e a sostituire RIGHT con LEFT. Successivamente ho caricato il file (sia in formato .css che in .txt) come allegato una web page del mio sito su Google site, ma niente. L'anteprima della homepage del mio blognon è possibile, con il segue nte messaggio:

    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The reference to entity "d" must end with the ';' delimiter.

    Error 500

    e questo è il link del file .txt caricato su Google sites:

    https://sites.google.com/site/machecavolocom/script/leggi-tuttotxt.txt?attredirects=0&d=1

    Non capisco perchè non funzioni. Ho notato poi che il link del css che lei usa ha un'estensione .css, come posso ottenerlo?
    Mi sa che per il momento utilizzo il suo url!

    RispondiElimina
  6. Ok!! Ho capito, il problema è solo il link. L'ho caricato in una pagina di hosting, così ho ottenuto un direct-link. In questo modo funziona tutto alla perfezione!! Grazie tante!!!

    RispondiElimina
  7. @Silvia Marasacchio
    Se usi Google Sites per caricare il file CSS ti conviene salvarlo in formato CSS mediante Notepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    Per il link diretto devi eliminare l'ultima parte dell'URL cioè il punto interrogativo e tutto quello che viene dopo. Es:
    Al posto di questo
    https://sites.google.com/site/machecavolocom/script/leggi-tuttotxt.txt?attredirects=0&d=1
    deve essere messo quest'altro
    https://sites.google.com/site/machecavolocom/script/leggi-tuttotxt.txt
    Ripeto però che è meglio usare l'estensione css al posto della txt

    RispondiElimina
  8. Ho capito
    Grazie come sempre per la chiarezza!!!

    RispondiElimina
  9. Questo effetto, intelligente, utile e comodo, sia per chi scrive, che per chi legge, si può avere solo in riferimento agli articoli o post di un blog su blogger oppure lo si può inserire anche nel contesto di una o più pagine statiche e, se si, come?

    Grazie per la risposta.

    RispondiElimina
  10. Questo effetto, intelligente, utile e comodo, sia per chi scrive, che per chi legge, si può avere solo in riferimento agli articoli o post di un blog su blogger oppure lo si può inserire anche nel contesto di una o più pagine statiche e, se si, come?

    Grazie per la risposta.

    RispondiElimina
  11. @Scl
    Il metodo è applicabile solo con le caratteristiche descritte. Si può solo editare il CSS https://sites.google.com/site/scriptperilblog/javascript-2/leggi-tutto.css
    per modificare colori e posizioni

    RispondiElimina
  12. Grazie per la risposta, nonchè per la cortesia e l'utilità della stessa.

    Ma crediamo di avere formulato in modo non sufficientemente chiaro le nostre domande e ciò a motivo della nostra scarsa dimestichezza col linguaggio tecnico di internet, anche se lei è una delle rarissime persone che usa un linguaggio accessibile a tutti e che non da per scontate in capo a chiunque conoscenze spiccatamente tecniche.

    Cerchiamo di essere più comprensibili qui, scusandoci per non esserci riusciti prima.

    La descrizione che ha fatto della procedura da seguire per ottenere l'effetto desiderato e mostrato nell'immagine che ne ha allegato è chiara e non ha bisogno di altre integrazioni ed, infatti, non non crediamo di averle voluto chiedere queste.

    Ciò che volevamo sapere noi era solo se o se non questa stessa procedura si possa applicare anche a ciò che si scrive all'interno di una " pagina statica " di Blogger, che è una cosa diversa dalle pagine in cui vengo inseriti e conservati i vari post, atteso che, nella sua chiarissima illustrazione lei ne parla solo con riferimento ai post e non pure agli ambiti delle pagine statiche; e, se si, come si può fare?

    Grazie ancora con tutta la nostra cordialità.

    RispondiElimina
  13. @Scl
    La risposta è che non mi risulta essere possibile creare dei riassunti delle pagine statiche né mostrare solo l'incipit del loro contenuto.

    RispondiElimina
  14. @Slc
    Mi correggo. E' possibile pubblicare una pagina statica anche con il riassunto. Basta andare nel normale Editor di Blogger e cliccare sull'icona Inserisci intervallo dopo che si è posizionato il cursore nel punto in cui si vuole creare la separazione.

    RispondiElimina
    Risposte
    1. Mi è successa una cosa strana, fino a poco tempo fa tutto ok.
      Adesso sul blog in Home Page mi appaiono solo gli ultimi due post (tra l'altro riassunti con questo: http://www.ideepercomputeredinternet.com/2011/03/come-visualizzare-in-blogger-i.html )
      Però io ho selezionato sia da Layou che da post e commenti il numero di 4 post da visualizzare ma invece ne appaiono solo 2.
      Stessa cosa su un altro blog che praticamente è uguale ma li funziona bene e qua no. Cosa è potuto succedere? Potrebbe essere un numero eccessivo di immagini in home page?

      Elimina
    2. Può darsi che i post siano troppo lunghi ma certo ce hai messo solo il riassunto ...

      Elimina
    3. Non sono sicuro ma pare sia proprio il numero delle immagini, difatti ho creato un post senza immagini e appariva, mentre se lo creo con delle immagini non appare più.
      Forse le immagini le conta come lunghezza... dal css ho messo che non devono superare i 100 px però il problema rimane.

      Elimina
  15. Non trovo la scritta in nessun modo poi come fare espandete i modelli widget con le nove modifiche ???
    come fare ?

    RispondiElimina
    Risposte
    1. @# Non incollare lo stesso commento su più post altrimenti sono costretto a cancellarlo. Vai qui
      http://www.ideepercomputeredinternet.com/2013/04/new-blogger-template-editor.html
      e qui
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.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.