Pubblicato il 15/05/09 - aggiornato il  | 16 commenti :

Come inserire automaticamente in Blogger gli articoli espandibili con il sommario in Homepage di lunghezza prestabilita.

Mi sono già occupato di come inserire gli articoli sintetici in Blogger. Quel metodo ha comunque delle controindicazioni che si possono così riassumere
  1. Questa possibilità valeva solo per gli articoli futuri e non per quelli passati
  2. Non venivano create automaticamente delle miniature degli articoli
  3. Non venivano creati i Riassunti automaticamente e dovevamo inserire nel post in modalità HTML il seguente codice Scrivi il riassunto
    <span id="fullpost">
    Scrivi il resto del post
    </span>
Adesso è possibile inserire gli articoli sintetici automaticamente con miniature in Homepage.
Andare su Layout > HTML e dopo aver scaricato il modello completo cercare la riga di codice
</head>
Immediatamente sopra  questo codice inserire il seguente script

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 150; img_thumb_width = 200; </SCRIPT> <SCRIPT src=’http://parsifal32.altervista.org/articoli-espandibili.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/THMup' target='_blank'><span style='font-size: x-small;'>Automatic Thumbnail</span></a></noscript>
script-articoli-espandibili
come mostrato nello screenshot. Salva il modello.
Adesso cerca quest’altro codice
<data:post.body/> oppure <p><data:post.body/></p>
e rimpiazzalo completamente con quest’altro
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style='clear: both;'/> <div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'><img src=’http://tinyurl.com/ou439a’/></a></span></div>
</b:if>
Come mostrato nello screenshot seguente
image
Salva il modello nuovamente. Adesso passiamo alle personalizzazioni
summary_noimg = 500 ; – Sono il numero di caratteri che devono essere mostrati se l’articolo non contiene immagini
summary_img = 400 ; – Sono il numero di caratteri mostrati nel riassunto se sono presenti immagini
img_thumb_height = 150; – Rappresenta l’altezza della miniatura in pixel
img_thumb_width = 200 ; – Rappresenta la larghezza in pixel della miniatura
http://tinyurl.com/ou439a – E’ l’URL dell’immagine con la scritta Leggi Tutto. Ovviamente può essere rimpiazzata con una fatta da voi che sarà sicuramente migliore di quella che ho fatto io.
Se non volete inserire un’immagine potete sostituire il secondo codice con quest’altro
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/><DIV expr:id='"summary" + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</SCRIPT> <div style='clear: both;'/><div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'>Leggi tutto l’articolo</a></span></div>
</b:if>
Dove al posto di Leggi tutto l’articolo potete inserire una qualsiasi altra espressione.
Adesso quando posterete un articolo in modo automatico in Homepage sarà visibile solo un riassunto con il numero di caratteri che hai scelto di mostrare. Coloro che vorranno leggere tutto il post dovranno cliccare sull’immagine Leggi Tutto se hai scelto la prima opzione di codice oppure sulla scritta Leggi tutto l’articolo se hai scelto la seconda opzione.
Accortezze – Siccome questo codice va ad incidere nella stessa zona degli annunci pubblicitari di Adsense per inserirlo bisogna
  1. Togliere la pubblicità dal modello.
  2. Inserire questo codice degli articoli espandibili.
  3. Rimettere nuovamente la pubblicità

Per vedere e testare il funzionamento di questo codice ho creato un blog apposito
Cliccando su Leggi Tutto potete rendervi conto del suo funzionamento che è automatico. Se si inserisce un’immagine nella prima parte del post bisogna mantenere le proporzioni con i dati che si sono inseriti cioè 200 pixel di larghezza e 150 pixel di altezza altrimenti l’immagine risulterà distorta. Ovviamente ripeto di nuovo che questi numeri possono essere cambiati ed adattati al modello del blog.
Come potete notare nel primo articolo sono state mantenute le proporzioni perfettamente cosa che non è avvenuta nel secondo. Ovviamente eventuali distorsioni sono visibili solo in Homepage.
Visto che il bottone da me creato, che si trova qui, non si può dire sia un’opera d’arte se c’è qualche grafico tra i lettori che lo realizza e me lo recapita in qualche modo, oltre a fare un gesto caritatevole, gli metto il link del suo blog nell’articolo. Le misure sono pressappoco 80-90 pixel di larghezza e 15-25 di altezza. I colori sono a piacere.
Aggiornamento importante: E' ora possibile inserire il Read More direttamente dall'editor di Blogger.




16 commenti :

  1. Ed eccoci al punto.
    Ho già testato e rimosso uno "script" simile a questo dal mio nuovo template per i seguenti motivi:
    - Non mi mantiene le immagini miniaturizzate in proporzione (sono tutte orrendamente storte e capisci che per un blog di estetica e' un paradosso ;-) )
    - NOn mi mantiene la formattazione dell'inizio del post...e la cosa mi urta perche' a me serve per evidenziare il contenuto di certi articoli..
    E' per questo che ti chiedevo se c'era la possibilità di "tagliare" l'articolo dopo un tot di caratteri lasciandolo così come era prima del taglio...

    RispondiElimina
  2. Per quanto riguarda le immagini ti ho già detto che all'inizio c'è la scocciatura di doverle postare proporzionate con i pixel che hai messo in
    img_thumb_height =
    img_thumb_width =
    Invece per quanto riguarda la formattazione si può mettere float al posto di no-float in
    var thumbnail_mode =
    però non ho testato il funzionamento in questa eventualità.
    Personalmente rimango attacato al classico
    span id="fullpost che a me funziona benissimo.
    Ciao

    RispondiElimina
  3. Il problema sono proprio le dimensioni "fisse"dell'immagine. Avevo già ritoccato quei parametri senza successo...e a quel punto avevo pensato che lo stesso script poteva essere modificato togliendo il ridimensionamento dell'immagine e mantenendo la formattazione del testo..
    Pensi che si possa fare?
    Thanks!!
    Astasia

    RispondiElimina
  4. Ciao Parsifal, credo sia saltato il sito dove era inserito il javascript per far funzionare gli articoli espandibili. Hai per caso il file? O sai dove si può pescare adesso?

    RispondiElimina
  5. @Elio Romano
    Ho caricato il file Javascript su un mio hosting. Fammi sapere se adesso funziona tutto. E' sufficiente che tu ricopi solo la prima parte del codice, quella che va sopra "/head", per intenderci.
    Ciao e grazie della segnalazione.

    P.S. Cerco sempre di caricare tutti i file su miei spazi per non trovarmi in situazioni di questo tipo ma qualcosa ogni tanto mi sfugge :)

    RispondiElimina
  6. Come sempre rapidissimo. Funziona tutto, ti ringrazio per la celerità e per l'ottima realizzazione del tuo blog.

    RispondiElimina
  7. Ciao, c'è una cosa che non ho capito.
    A me interesserebbe molto usare questo "secondo" modo di espandere gli articoli, ma avevo già modificato il template con i codice del "primo" modo.

    Non ho capito se devo cancellare tutto il codice inserito precedentemente per far funzionare questo nuovo modo di espandere gli articoli.

    spero di essermi spiegato bene, ho fatto un po' di ripetizioni :P

    Grazie cmq ^^

    RispondiElimina
  8. @L'Altra notizia
    Siccome il javascript caricato dall'autore non funzionava più l'ho dovuto ricaricare su un mio account come puoi leggere nei commenti precedenti.
    Adesso ti consiglio di sostituire nuovamente sia il codice sopra il tag "/head" che l'altro da inserire al posto di una riga specifica del template. Invece di "Leggi tutto l'articolo" puoi inserire la frase che vuoi.
    Spero di essermi spiegato bene anch'io :)

    RispondiElimina
  9. ciao :) arrivo un pò tardi ma ti chiedo una cosa:
    come faccio a fare in modo che i post con miniatura sulle pagine statiche...non siano espandibili??? perchè non me li lascia aprire! :(
    grazie e complimenti per la guida! :D

    RispondiElimina
  10. @Supergerod
    Se ho capito bene utilizzando questa guida ti genera il riassunto non solo dei post ma anche delle pagine statiche. Prova a mettere dei tag condizionali lasciando intatte le pagine. Non ho testato quindi non so se funzionerà
    http://www.ideepercomputeredinternet.com/2010/01/come-visualizzare-o-non-visualizzare.html

    RispondiElimina
  11. grazie della risposta velocissima! :D
    però non sò cosa sono i tag condizionali e non saprei dove metterli! :|

    RispondiElimina
  12. E' quello che cercavo,però qualcosa non mi funziona bene..
    Quando inserisco il primo script esce fuori 'Non è stato possibile salvare il modello

    Correggi l'errore qui sotto, quindi invia nuovamente il modello.
    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: Open quote is expected for attribute "{1}" associated with an element type "src".'
    Che vuol dire??

    RispondiElimina
  13. @solofilm E' una cosa vecchia, ora con Blogger si può inserire il read more direttamente dall'editor

    RispondiElimina
  14. Sinceramente non mi funziona!
    ho inserito il codice sopra /head e mi da questo errore:
    - Errore di analisi XML, riga 653, colonna 186: Open quote is expected for attribute "src" associated with an element type "script"
    Ho provato a sostituire SCRIPT con script ma niente da fare..

    RispondiElimina
    Risposte
    1. Questo articolo è di 4 anni fa. Ora gli articoli espandibili si inseriscono direttamente dall'Editor di Blogger con l'icona Inserisci Intervallo
      @#

      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.