mercoledì 12 dicembre 2007

Post espandibili per Blogger (Beta)

I post espandibili permettono di visualizzare una determinata quantità di testo all'inizio dei post come invito alla lettura o comunque rappresentano una soluzione pratica se si hanno molti post lunghi sulla stessa pagina. La guida di Blogger descrive come realizzare i post espandibili per la vecchia e nuova versione, ma in questo post voglio descrivere un'alternativa per la nuova versione di Blogger. La particolarità della soluzione che vi sto per descrivere sta nel fatto che l'espansione del post avviene direttamente nella pagina principale senza dovere utilizzare il link dei singoli post. Per capire meglio cosa intendo proseguite con la lettura di questo post espandibile ;-)



Installazione

Le modifiche da fare al proprio template affinché sia possibile realizzare dei post espandibili sono le seguenti:
  1. Salvare una copia del template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in Layout->Modifica HTML e premere sul link "Scarica modello completo".

  2. Attivare la checkbox "Espandi i modelli widget" e scorrere la pagina fino a trovare nel template il tag </head>

  3. Aggiungere prima del tag </head> il seguente codice javascript:
    <script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js'/>
  4. Trovare nel proprio template il tag <div class='post-body'> e aggiungere le modifiche evidenziate in rosso nel seguente codice:
    <div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType == "item"'>
    
    <p><data:post.body/></p>
    
    <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
    <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
    </span>
    <span id='hidelink' style='display:none'>
    <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
    </span>
    <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
    </b:if>
    
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </div>
  5. Salvare le modifiche con "Salva le modifiche".
  6. Effettuare la pre-formattazione dei post per l'editor. Quindi bisogna andare in Impostazioni->Formattazione e aggiungere in Modello post il seguente codice:
    Inserire qui il sommario
    <span id="fullpost">Inserire qui il resto del post</span>

A questo punto le modifiche sono terminate, ogni volta che inizierete a scrivere un nuovo post avrete già il codice necessario per la realizzazione di un post espandibile. Per scrivere un post non espandibile non dovrete fare altro che cancellare il codice già presente nel nuovo post.

E' importante assicurarsi che il tag span con id="fullpost" sia presente solo una volta all'interno del post.

Per finire vi segnalo due post scritti da Sid:
  1. New Blogger: post espandibili con i CSS
  2. Blogger: post espandibili
Il primo è un'alternativa alla soluzione che vi ho presentato, mentre il secondo presenta una soluzione per realizzare i post espandibili nella vecchia versione di Blogger.

32 commenti:

# - 12/12/07, 18:09

Lisa72 ha detto...

Ho appena seguito le tue istruzioni e funzionaaaaaaaaaaaaaaaaaaaaa ^_^
Sei un mitoooooooooo ^_^
Un abbraccio, Lisa

# - 12/12/07, 18:52

Tanuccio ha detto...

Una curiosità: E se lo volessi fare sulla barra laterale?

# - 13/12/07, 21:03

Giuseppe ha detto...

La pre-formattazione potrebbe richiedere correzioni al post come ho accennato nella guida (nota in rosso): consiglio a chi è poco pratico con l'HTML di non eseguire il sesto punto della guida ma di inserire il tag span con id="fullpost" manualmente con "Modifica Html" dell'editor e solo dopo avere scritto il post.

@Lisa, grazie per il complimento e del feedback :-)

@Lupo Sordo, questa è una soluzione specifica per i post, cmq se ti interessa vedo se ho qualcosa.

@tutti, buona serata

# - 14/12/07, 20:23

Anonimo ha detto...

ciao grazie x la tua visita!!! sono riuscita a cambiare lo sfondo....piccole cose ma quando riesco in qlc di nuovo sono :-)

ciao!!! Fioredicollina

# - 16/12/07, 22:26

Tanuccio ha detto...

Ho visto blog che lo fanno (anche su blogspot), se trovi qualcosa sarebbe bello provarlo, però non ti scervellare se non lo trovi, si vive uguale lo stesso... :D

# - 29/12/07, 18:28

Anonimo ha detto...

dopo mezz'ora finalmente ho capito perchè non mi funzionava!!!!
nel codice del punto 3 ti sei dimenticato una "s" nella parola Script!!!! stavo uscendo pazzoooo!!! cmq alla fine ci sono riuscito... grazie mille mi è stato utilissimo ^_^

# - 29/12/07, 19:46

Giuseppe ha detto...

@Clathebest, corretto! L'errore credo sia capitato con l'ultimo aggiornamento del post :-( Grazie della segnalazione :-)

# - 28/01/08, 15:24

jamba87 ha detto...

Ciao, sono Giovanni Grolla... il mio blog è http://todawn.blogspot.com e ho provato a fare quello che tu mi hai detto ma...

Niente da fare... mi da questo errore...

Messaggio di errore XML: Element type "div" must be followed by either attribute specifications, ">" or "/>".

Ti sono grato fin d'ora del tuo aiuto... grazie...

# - 29/01/08, 15:26

Giuseppe ha detto...

@Giovanni, l'errore che riporti può essere dovuto ad un tag aperto, o ad uno spazio non dato tra gli attributi di un tag... In pratica devi avere commesso un errore nel copiare il codice. Riprova con la procedura che ho riportato nel post. Fammi sapere.

# - 29/01/08, 17:31

Alfio ha detto...

Ho un problema:
non riesco a far espandere il post quando nel "resto" ci sono delle righe di spazio vuote. Mi espande solo quella parte del resto del post fino alla prima riga vuota, quello che c'è dopo resta sempre visibile.
In pratica espande una parte interna del post...
Che posso fare?
Grazie.

# - 30/01/08, 08:53

Alfio ha detto...

Ok.
Ho risolto il problema, scusate.
Sembra fosse un problema di formattazione del testo nell'editor del post passando il test da word con copia e incolla.
Scusate ancora.

# - 30/01/08, 09:14

Giuseppe ha detto...

@Alfio, bene, mi fa piacere :-) Cmq ripeto il consiglio che ho già dato: consiglio di non eseguire il sesto punto della guida ma di inserire il tag span con id="fullpost" (e ovviamente la sua chiusura) manualmente con "Modifica Html" dell'editor e solo dopo avere scritto il post.

# - 18/02/08, 11:55

Snapshot83 ha detto...

CIao WebLogin, io ho un grande problema...riesco a far funzionare i post grazie al tutorial, ma solo su firefox..mentre su ie7 qualcosa non va e non riesco a capire cosa...adesso mi trovo in bilico: o riesco a risolvere in giornata o altrimenti devo rinunciare a questa grande funzionalità per permettere a tutti di poter leggere il mio blog..spero in un tuo aiuto..Grazie mille e complimenti come sempre per le guide

Snapshot83

# - 18/02/08, 18:15

Giuseppe ha detto...

@Snapshot83, ciao... sono andato sul tuo blog e ho fatto la prova con IE7 e ho visto che i post espandibili funzionano: hai già risolto il problema? Fammi sapere.

# - 20/02/08, 11:38

Anonimo ha detto...

Ho fatto quanto detto. Mi appare il continua a leggere, ho inserito nel campo formattazine quanto scritto, ma se inserisco i post, questi mi vengono scritti per intero.
COme posso risolvere?

il mio blog è http://sinistradem.blogspot.com

# - 20/02/08, 19:47

Giuseppe ha detto...

@Andrea, prova ad eliminare la formattazione... Come ho già detto nei commenti, consiglio di non eseguire il sesto punto della guida (perchè "E' importante assicurarsi che il tag span con id="fullpost" sia presente solo una volta all'interno del post.") ma di inserire il tag span con id="fullpost" (e ovviamente la sua chiusura) manualmente con "Modifica Html" dell'editor e solo dopo avere scritto il post. Fammi sapere.

# - 06/07/08, 21:50

Pietro - Community-blogger ha detto...

Sei immensamente grande!!!!!!!!
grazie
Finalmente possono essere scansionati i post da google (di solito i miei post non sono tanto brevi e così non tutto veniva indicizzato)

# - 16/08/08, 10:59

PsicoTrickster ha detto...

ho fatto più volte quanto scritto ma non funziona mai..
non mi da nessun errore.. ma quando scrivo un posto per prova con poche righe .. una volta savato mi si presenta normalmente.
il sommario lo scrivo al posto di "inserire sommario" e il resto del post " qui il resto dle post" lascio i "codici" dove stanno..
dove sbaglio FATE UN ESEMPIO PRATICO per scriere il post.. è il problema di molti leggo ed ancora manca un esempio,
grazie
rimango in attesa

# - 16/08/08, 12:46

PsicoTrickster ha detto...

p.s. elimino come avete detto la formattazione e inserisco i code del punto finale manualmente con modifica html scrivendo il post.
kosi facendo :

inizio articolo bla bla a capo
id span"fullpost" ect..

resto dell'articolo a capo
span ect..

si vede cmq per intero..
N.B come faccio a fare delle grigli che riquadrano il sommario sulla home ?

# - 16/08/08, 14:20

Giuseppe ha detto...

@PsicoTrickster, sei sicuro di avere fatto tutto come ho scritto nel post? Ad esempio, ho aperto il sorgente del tuo blog e non ho visto la modifica indicata al quarto punto. Il tuo template ha

<div class='post-body entry-content'>

invece di

<div class='post-body'>

ma cmq devi aggiungere le stesse modifiche evidenziate in rosso. Riprova e fammi sapere.

# - 17/08/08, 02:06

PsicoTrickster ha detto...

ok Giuseppe l'ho rifatto ed è andata a buon fine. cerchero' di cambiare la dicitura "read more". forse sarà stato un errore del ctrl+v o forse io la testa di cazzo.
cmq grazie post utile..
per le griglie sai dirmi nulla ?
vedi nel mio template allargato vorrei inserire due post a fila.. a mo' di griglia.. è molto difficile senza intaccare tutto ?

ma come posso disegnare lo scheletro del mio template?
fireworks? dreamweaver? devo usare solo estensioni xml?
grazie ancora

# - 19/08/08, 15:33

Giuseppe ha detto...

@PsicoTrickster, bene :-)
Per le griglie non posso aiutarti, non è una modifica che si può fare in poco tempo.
Quanto alla realizzazione dei template, puoi utilizzare quei programmi ma devi conoscere innanzitutto il linguaggio XHTML.

# - 24/11/08, 23:28

dino de maio ha detto...

Ciao Giuseppe, le tue indicazioni sono chiarissime ma non riesco a venire a capo del malefico messaggio sul tag div che mi impedisce di salvare il tutto. Non potresti dare un'occhiata al codice sorgente del mio blog (www.unacasaecologica.blogspot.com) ed eventualmente modificarlo tu. So che chiedo tanto, ma mi faresti un grosso favore perché questi sommari stanno diventando un vero problema.
Altrimenti passerò a Wordpress dove mi risulta ci sia un comando per inserirli.
Ciao, grazie e complimenti.

dino
demaiodino@libero.it

# - 25/11/08, 10:56

Giuseppe ha detto...

@Dino, dopo passo a vedere il tuo template e ti faccio sapere...

Ciao

# - 12/08/09, 18:35

Gabriele Gualco ha detto...

Ciao, sono Gabriele e nn riesco a trovare le strighe al punto quattro, nn sono esperto di linguaggi, quindi sono in alto mare. il mio blog è http://gabrielegualcoontravel.blogspot.com. ho visto che con altri avete risolto. Mi dai una mano?:)

# - 13/08/09, 08:35

Giuseppe ha detto...

@Gabriele, cerca class='post-body' (magari utilizza la ricerca del tuo browser per trovare post-body) e poi fai riferimento all'aggiornamento del post poiché lo script (punto 3) non è più disponibile.
Mi raccomando, fai una copia del template prima di fare qualsiasi modifica. Fammi sapere ;-)

# - 13/08/09, 13:19

Gabriele Gualco ha detto...

Nulla, nn trovo neanche quello, nn vorrei fosse che ho messo come moderatore commento DISQUS, nn so se hai presente. non trovo nulla di tutto questo. che altre indicazioni puoi o posso darti per risolverla? :) Gabriele

# - 13/08/09, 17:00

Gabriele Gualco ha detto...

Ciao, sono ancora Gabreiele, io vedo questo div class='post-body entry-content' al posto di div class='post-body' e subito dopo trovo come da tuo schema div style='clear: both;'/ !-- clear for photos floats --
ma dopo aver provare ad aggiungere o modificare mi dice che nn puo' leggere perchè mancano i tag di chiusura o apertura. nn capisco perchè bloggere sta funzione nn l'ha in automatico..
nn ho scritto i tag perchè nn accetta nell'anteprima; trovi utile la segnalazione?

# - 14/08/09, 08:15

Giuseppe ha detto...

@Gabreiele, il tag con 'post-body' è quello che hai trovato. Come riferimento, oltre a "clear for photos floats", tieni conto anche di "data:post.body".

Mmm, è difficile fornirti altre indicazioni... l'errore che ottieni forse è perché non hai chiuso un tag "div", controlla meglio oppure se mi invii il tuo template (nella sidebar c'è il mio indirizzo email) ti faccio io la modifica. Fammi sapere ;-)

# - 14/08/09, 08:58

Gabriele Gualco ha detto...

forse dirti che ti amo è troppo:) allora vado a provare subito, ma nel frattempo ti invio il tamplate cosi' se riuscirai a farlo magari capiro' finalmente dove sbagliavo. tra l'altro dovunque fanno riferimento agli stessi tag, ieri sono riuscito a ottenere il "continua", ma nn oltre. Grazie!

# - 14/08/09, 14:07

Gabriele Gualco ha detto...

Ciao ce l'ho FATTA!, sebbene provando diverse soluzioni, e correggendo il mio errore di unire diversi testi e modificarli direttaamente dall'html del post (Avevo mille tags span!) la definitiva, per caso, era qui http://www.lacameradeiblog.com/2007/11/creare-post-espandibili.html ma credo sia praticamente la stessa tua. Ti ringrazio per i preziosi consigli che mi hanno messo la pulce nell'orecchio e mi hanno fatto trovare: post-body entry-content; nn avrei mai potuto arrivarci con altre indicazioni! E nn so come fai a capirne cosi' Un abbraccio! Gabriele

# - 15/08/09, 16:26

Giuseppe ha detto...

@Gabriele, ho ricevuto la tua email ma non ho avuto il tempo di vedere il tuo codice, cmq l'importante è che hai risolto :-)

Ciao e buon Ferragosto


Ti è piaciuto questo post? Allora cosa aspetti, iscriviti al feed RSS
Scopri cosa sono i feed RSS e migliora il tuo modo di navigare.

Posta un commento