24 giugno 2009

29 commenti Condividi il post Facebook Twitter Google+

Post espandibili su Blogger

Scrivo questo post per rispondere alla domanda di Den:

Iole, come hai fatto a scrivere solo la prima parte dell'articolo nella home-page e far leggere il resto cliccando su "Read More", senza aprire una nuova pagina?

riferendosi a questo mio blog di prova.

In realtà io non ho fatto niente! Il template utilizzato su quel mio blog di prova mi è stato inviato da Francesca (quando mi aveva chiesto di realizzarle uno script per stampare i post di Blogger) e nel codice html era già presente lo script per i post espandibili.

Lo script era disponibile a questo indirizzo:

http://www.anniyalogam.com/widgets/hackosphere.js
dopo poche settimane però non risultava più valido.

Ho sostituito allora lo script con quello presente sul blog di Valentina; anche sul suo blog i post espandibili non vengono aperti in una nuova finestra ma visualizzati nella stessa pagina.

Tenebrae ha scritto ben due post su come realizzare i post espandibili su Blogger; ecco i link:


cliccando però su "leggi tutto..." si apre il post una nuova pagina.

Con questo script invece cliccando su "Read More..." compare il resto del post (senza aprire una nuova pagina) ma semplicemente rendendo visibile quella parte di post nascosta.

Ecco le operazioni di fare per questa modifica: andate in Blogger, Modifica HTML e cliccate su Espandi i modelli widget.
Poi inserite lo script dopo il tag <head>:

<script src='http://digilander.libero.it/iolecalblogspot/script/script_postesp.js' type='text/javascript'/>

Poi trovate il codice

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

e sostituitelo con:

<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='&quot;javascript:showFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='&quot;javascript:hideFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;)</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

e salvate il modello. Poi andate in Impostazioni -> Formattazione e in Modello post inserite questo codice:

Inserisci il sommario qui
<span id="fullpost">
Inserisci il resto del post qui
</span>

Salvando le impostazioni, quando proverete a scrivere un nuovo post l'editor apparirà così:

editor

al posto "Inserisci il sommario qui" dovrete scrivere la parte che sarà visibile nel post e al posto di "Inserisci il resto del post qui" il resto del post (che sarà visibile cliccando su "Read More...").


Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

29 commenti

  1. Nel mio blog ho usato il primo metodo illustrato ba Tenebrae, e il codice da sostituire non lo trovo. Ho provato a sostituire quello che credevo potesse andar bene (in un blog che uso per prova) ma non va. Bisogna cancellare le modifiche fatte? Trovo che il tuo metodo sia più carino, vorrei inserirlo...

    RispondiElimina
  2. Ok, nel blog di prova ce l'ho fatta, cancellando le modifiche di Tenebrae. Ma io avevo anche l'iscrizione ai feed e l'elenco delle categorie. Come le reinserisco?
    P.S Sei davvero bravissima!
    CIAO

    RispondiElimina
  3. @Daniela: prova (prima sul tuo blog di prova) a cancellare le modifiche e a togliere lo script consigliato da Tenebrae e fammi sapere.

    RispondiElimina
  4. @Daniela: per l'elenco delle categorie devi andare in Blogger -> Layout e poi cliccare su Modifica (della sezione Post sul blog). Per l'iscrizione ai feed non saprei... Se mi mandi il template completo del tuo blog ti dico cosa modificare.

    RispondiElimina
  5. Grazie Iole!!!
    La cosa migliore di questa modifica è che si possono lasciare i tag span id="fullpost" e /span usati per la modifica consigliata da Tenebrae!

    P.S. Io ho sostituito Read More... e Summary only... con Leggi tutto... e Torna al sommario...

    RispondiElimina
  6. @Den: come hai fatto a cambiare "Read More..." e "Summary only..."? E' una domanda che potrebbero farmi e a cui non so rispondere!

    RispondiElimina
  7. Le ho semplicemente sostituite dal codice che hai fatto copiare...
    Basta cercarle premendo CTRL+F

    RispondiElimina
  8. @Den: hai ragione! Non avevo letto bene il codice html, pensavo fosse nello script e non riuscivo a trovarlo.

    RispondiElimina
  9. Appena posso lo provo. Secondo te, qual è il metodo migliore?

    RispondiElimina
  10. @Albania: non saprei quale è il migliore. Io non lo uso e non penso di utilizzarlo in quanto dovrei modificare i post precedenti per dare a tutti lo stesso aspetto.
    Sinceramente non ho capito se chi usa lo script che apre il post in una nuova pagina lo fa anche per incrementare i guadagni adsense.

    RispondiElimina
  11. non c'entra nulla con questo post ma hai perso tutti i lettori? cliccando segui appare la pagina vuota, cliccando i 2 quadratini vicini si apre la stessa pagina vuota con l'effetto grafico e se non clicco close posso navigare sul blog da li. ciao!

    RispondiElimina
  12. @ec.log: ho semplicemente tolto il widget dei lettori perché dava quell'errore che impediva l'apertura della pagina. Ora cliccando su Segui o sui due quadratini si apre la pagina dei lettori tramite lyteframe, ci mette un bel po' a caricare ma ci sono tutti i lettori :)

    RispondiElimina
  13. Ciao Iole, i tuoi articoli sono sempre esaurienti e molto interessanti. Complimenti!

    RispondiElimina
  14. ciao iole! questo è un metodo alternativo che ho sempre avuto in mente di pubblicare ma che per un motivo o per l'altro ho sempre rimandato... questo come altri milioni di post!

    ci sono certi miei post di lunghezza chilometrica, per questo da subito ho avuto l'esigenza di creare un sommario per permettere di consultare velocemente gli ultimi post

    ho sempre preferito però aprire il post in un'altra pagina per riservare l'interazione in uno spazio dedicato, prendi per esempio i pulsanti dei social network o i commenti stessi, o la pubblicità, tenendo quindi più snella la homepage... inoltre, sempre per i motivi della lunghezza dei post, sarebbe bastato aprirne un paio per avere una homepage enorme e confusa

    il discorso adsense è molto relativo... si viene pagati per click, quindi che la pubblicità sia in una pagina o l'altra non cambia molto... io addirittura quasi non ne tengo nella home, proprio per tenere quanto il più possibile sintetica la consultazione veloce degli ultimi articoli e più veloce il caricamento della pagina

    a parte questo, scusami se l'altra volta ho dovuto chiudere bruscamente la chattata, ma avevo aperto la pagina della posta per sbaglio e quindi ero comparso in google talk... ma stavo lavorando e non è certo carino farsi beccare :)

    a presto!

    RispondiElimina
  15. @Martin: grazie!
    @Tenebrae: di adsense non so nulla, pensavo che si venisse pagati anche in base alle visite della pagina. Concordo con te sul fatto che post troppo lunghi rendono la homepage chilometrica (la mia è così), ma con questo metodo i contenuti dei post sono comunque caricati (ma semplicemente non visibili) al caricamento della pagina, quindi comunque rallentano il caricamento della homepage.
    Per la chat non preoccuparti, volevo solo salutarti visto che è tanto che non ci sentivamo. Anche a me capita a volte a lavoro di non poter rispondere a chi mi contatta dal blog.

    RispondiElimina
  16. Ciao ho provato ad aggiungerlo però non ci sono riuscita.Ho fatto tutto ho sostituito il codice l'ho aggiunto sono andata in modello post ed ho aggiunto quel codice ho salvato però ho provato a scrivere un nuovo post le scritte sono uscite io le ho rispettate però poi pubblicandolo non è uscita la scritta Read more... come mai? Potresti aiutarmi grazie. Ciao

    RispondiElimina
  17. @ninalapinguina: ho dato un'occhiata al codice html del tuo blog e sembra che il problema sta nel fatto che tutto ciò che hai scritto nel post sta nella parte "Inserisci il sommario qui" e non hai scritto niente nella parte "Inserisci il resto del post qui".
    Riprova e fammi sapere.

    RispondiElimina
  18. Ciao Iole! :-D
    Ho inserito questo script sul mio blog qualche tempo fa e fino ad oggi ha funzionato benissimo...il problema si è posto con l'ultimo post dell'altro ieri, questo qui...in pratica io dal mio PC, vedo il post tutto per intero, ma visualizzandolo da altri computer lo vedo come deve essere per giusto e cioè con il sommario visibile ed il resto come read more...non riesco a capire perchè! Come te lo spieghi?
    Tanti bacioni e grazie!!! :-D
    Ago

    RispondiElimina
  19. @Ago: anch'io vedo i post per intero. Non so come aiutarti.
    Da un po' di tempo so che Blogger permette di scrivere i post in forma sintetica senza mettere mano al template. Hai provato ad usare il metodo di Blogger?

    RispondiElimina
  20. Ciao, utilissima guida !
    Purtroppo ho un difetto.. quando scrivo le cose normalmente viene l'effetto read more .. invece quando faccio copia e incolla, read more viene alla fine del testo !

    RispondiElimina
  21. @QUiNESTRE STAFF: per scrivere i post utilizzi l'editor di Blogger o qualcos'altro?

    RispondiElimina
  22. Iole sono disperata non riesco ad inserire la formula! Se ti mando l HTML del mio blog riesci a vedere come modificarlo?!?!?! Aiutamiiiiii

    RispondiElimina
  23. @Claudiaboldiblog Boldi: ok, mandami via email il tuo modello completo.

    RispondiElimina
  24. ciao! sono disperata nel mio blog ho questa funzione ma prima mi venivano fuori le immagini quando nel homepage di anteprima e ora quando pubbligo nuovi post non viene più fuori non capisco perchè mi puoi aiutare? grazie
    xxxfede.blogspot.it

    RispondiElimina
  25. @xxxfede: al momento ho già numerose richieste in sospeso. Appena mi libero un po' ti aiuto volentieri. Intanto inviami il tuo modello completo.

    RispondiElimina
  26. Ciao Iole!!!
    Sono un po' disperata... Ho creato da zero un layout di prova, e lì funziona perfettamente questa funzione di 'read more'.
    Quando però lo stesso modello lo utilizzo per il blog 'ufficiale', non funziona più! :-O
    Non ho la più pallida idea del perché... Mi si è fusa la testa a cercare una soluzione... hai mica un'idea?
    Grazie in anticipo...
    p.s. il template di prova è questo: http://blog-template-madis-me.blogspot.it/

    RispondiElimina
  27. ... come non detto, non so nemmeno come ma ho risolto il problema... :)
    Grazie Iole, il tuo blog è sempre pieno di cose interessantissime!

    RispondiElimina
  28. @Madica Sarda: sono contenta che tu abbia già risolto il problema.
    Per qualsiasi altra cosa sono qui a disposizione. Spero di esserti di aiuto in futuro ;)

    RispondiElimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy