04 gennaio, 2008

Post espandibili in blogger

Come qualcuno avrà notato, ma qualche settimana i miei post sono di tipo "espandibili". Avete la possibilità di leggere l'anteprima, e se poi, se si desidera, leggere il resto!!

Come ho fatto? Seguitemi in questo breve tutorial. ;)

Come al solito recatevi recatevi su modello/ modifica HTML e spuntate la voce "espandi i modelli widget".

Cerchiamo il tag: <head>
E immediatamente dopo inseriamo questo javascript:

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js'/>



Adesso viene la parte un pò più complicata... cercate il codice:

<div class='post-body'>

E sostituitelo con:

<div class='post-body' expr:id='"post-" + data:post.id'>

Andiamo a capo e inseriamo quest' altra riga:

<b:if cond='data:blog.pageType == "item"'>

Andiamo ancora a capo, e subito dopo

<p><data:post.body/></p>

Incolliamo questo codice (se avete problemi con il copie e incolla, potete prelevare il codice da qui.

<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);'>Continua a leggere...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Sommario...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Screenshot, ho evidenziate le parti aggiunte.



Il lavoro è finito, facciamo una prova con l'anteprima e poi salviamo il tutto.
Adesso bisogna solo impostare i post... Andate su Impostazioni/formattazione, nell'ultimo campo "Modello post" incolliamo:

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

E salviamo.

Bene adesso tutto ciò che scriveremo al posto di "qui il sommario" sarà visibile in home, mentre tutto ciò che scriveremo al post di di "qui il resto del post" (il testo deve essere scritto all'interno dei tag <span id="fullpost"> </span> se hai difficoltà ad individuarlo, ti consiglio di scrivere il post in "modifica Html") sarà visibile solo ai lettori che cliccheranno su "continua a leggere".

E se non voglio un post espandibile?
Basta cancellare le quattro righe che appariranno nel pannello di scrittura!!
Tutto chiaro?

Il tutorial originale è di Sid05, un'altro metodo potete trovarlo su WebLogin.
vac 468x60.gif

52 commenti:

Guadagnare con un Blog on 5 gennaio 2008 23:51 ha detto...

Sinceramente trovo un po' scocciante dover cliccare per...
[clicca qui per leggere il commento intero] :-)

Un sondaggio personale mio e quello di un blog in inglese molto famoso hanno decretato la vittoria del post intero.

Capisco comunque che il tuo blog si chiama risorse per blogger e tu dai la risorsa, usarla è a discrezione del blogger.

Anonimo ha detto...

yurj io ho fatto tutto ma vorrei capire per cambiare la scritta del link e mettere CONTINUA A LEGGERE,come devo fare????

Moticanus on 6 gennaio 2008 09:41 ha detto...

Io invece lo trovo utile nel caso in cui si voglia non far perdere risalto agli altri post nella prima pagina.

Mi pare che sia lo stesso codice che ho usato nel mio blog...in tal caso va detto che il tag more funziona solo in prima pagina, nella altre i post verranno mostrati interamente!

giadatea on 6 gennaio 2008 15:02 ha detto...

il blog espandibile mi incuriosisce, in effetti, anche se io ho scelto di pubblicare un post per pagina e dovrei rivedere parecchie cose.
Ti ho nominato nel thinkin blogger awards, un gioco in cui mi hanno coinvolta, trovi tutto nel mio ultimo post, ciao e buona giornata.

Anonimo ha detto...

Qyesto metodo lo aveva già pubblicato anche Sid05

yurj on 7 gennaio 2008 15:49 ha detto...

@guadagnare con un blog: io qualcosa di simile la sapevo per i feed, non per gli articoli dei blog!! :D

aninimo: lo script è già impostato per avere la scritta "continua a leggere"!! :D

@moticanuz: si ti confermo che funziona solo nella home!

@giadatea: ti ringrazio, a breve risponderò al meme!!

@anonimo: hai la brutta abitudine di non leggere i post...alla fine dell'articolo trovi la paternità' del metodo, cioè sid05!! Tutto in regola, o no?

Sbronzo di Riace on 7 gennaio 2008 17:22 ha detto...

confermo che anche io preferisco il post intero, meno clikko meglio è.

Moticanus on 7 gennaio 2008 18:49 ha detto...

Ciao! Sto cercando delle info sulla funzione offerta da blogger di reindirizzamento su dominio proprio pur mantenendo la piattaforma blogger.

Mi chiedevo è sufficiente l'acquisto del solo dominio o necessito di servizio hosting???

Grazie!

Riverinflood on 8 gennaio 2008 07:41 ha detto...

Ascolta, questa mia domanda esula dal questo post. Intanto ho risolto il problema dell'espandibilità dei post grazie al tuo articolo e per questo ti ringrazio vivamente. La domanda è: come mai questa piattaforma non recepisce file gif animati sia nei post sia nella barra laterale?

yurj on 8 gennaio 2008 19:29 ha detto...

@Moticanus: se vuoi appoggiarti ancora a blogger come CMS, basta solo il dominio

@Riverinflood: blogger non consente di caricare gif animate, per ovviare al problema puoi caricare la gif su un servizio hosting di immagini e usare il collegamento ipertestuale
<img src="link_immagine.gif">

Anonimo ha detto...

Come mai io ho provato ad inserire le modifiche e quando clicco su salva modifiche mi compare una pagina di alert con scritto "la navigazione su questo sito non è consentita? Inoltre, nel mio template di Blogger non c'è div class="post-body" ma c'è div class="post body entry-content" devo procedere allo stesso modo?

yurj on 10 gennaio 2008 21:03 ha detto...

@anonimo: hai la versione nuova o vecchia di blogger?

ilburchiello ha detto...

Io ho un problema:
non riesco a far espandere post che abbiano delle righe vuote in mezzo.
Mi espande solo quella parte del resto del post fino alla prima riga vuota, mentre tutto ciò che viene dopo resta sempre visibile.
Cosa posso fare?
Grazie.

Alfio on 30 gennaio 2008 08:55 ha detto...

Ok, ho risolto, scusate.
La formattazione dell'editor tagliava in pezzi il testo passandolo da word col copia e incolla.
Riunendo il testo nell'html ho risolto.
Grazie e scusate ancora.

Alfio on 30 gennaio 2008 08:57 ha detto...

ehm, scusate... alfio=ilburchiello...

che idiota...

yurj on 30 gennaio 2008 16:11 ha detto...

@alfio: ti consiglio di non fare mai il copia incolla da word... usa piuttosto il blocco note!! ;)

Alfio on 1 febbraio 2008 01:39 ha detto...

Scusa se disturbo per un problema che non ha a che fare con il post (non ho trovato posto migliore per chiedere):
ho provato a mettere un link a un sito esterno a blogger in un commento ad un mio post sul mio blog, ma il link viene modificato al momento della pubblicazione con http://www.blogger.com... e poi il link da me inserito. Perché? Cosa si può fare?
Grazie e scusa dell'impertinenza

yurj on 2 febbraio 2008 21:49 ha detto...

@alfio: devi usare il codice html:
<a href="link">parola</a>

Alfio on 3 febbraio 2008 00:18 ha detto...

E vabbè che sono un principiante, ma non a questo punto.
E' infatti questo il tag che ho usato, ma, come già scritto, blogger modifica automaticamente il link anteponendovi un "www.blogger...". Il link quindi funziona, nel senso che è cliccabile, ma non funziona perché porta a un link interno a blogger che non esiste.
Magari sono l'unico ad avere questo problema, non so...

yurj on 4 febbraio 2008 15:32 ha detto...

prova, prova

yurj on 4 febbraio 2008 15:34 ha detto...

prova 2

yurj on 4 febbraio 2008 15:37 ha detto...

prova 3

yurj on 4 febbraio 2008 15:39 ha detto...

Alfio: davanti a l'url non mettere il www, come vedi, nella prima prova ho inserito www.google.it e mi dà errore.
Inserisci anche http://, infatti nella seconda ho inserito http://risorse-blogger.blogspot.com/ e nella terza ho inserito http://www.google.it/webhp?hl=it e mi dà ad entrambi il collegamento giusto.

Alfio on 5 febbraio 2008 18:22 ha detto...

Perfetto, grazie!
Ora ci siamo!

Snapshot83 on 18 febbraio 2008 11:50 ha detto...

io ho un grosso problema: coi post espandibili non si riesca a capi piu niente del mio blog aprendo ie7, e cosa posso fare per risolvere? Devo per forza rinunciare? QUalcuno potrebbe aiutarmi?

yurj on 20 febbraio 2008 01:18 ha detto...

@Snapshot83: io con firefox, vedo il tuo blog perfetto!!
E' la prima volta che sento questo tipo di problema... Sei sicuro che non si tratti di un problema del browser? Prova a scaricare gli aggiornamenti!

Marika on 24 febbraio 2008 22:43 ha detto...

a me la parte da sostituire nn c'è.. xkè? il mio blog è htp://situnovuelves-marika.blogspot.com aiutamiiiiii

yurj on 25 febbraio 2008 02:01 ha detto...

@marika: per effettuare le tue ricerche in modo veloce, scarica firefox e premi "Ctrl + F" in questo modo ti si aprirà una bassa di ricerca in basso alla finestre di firefox, inserisci all'interno la porzione di codice che vuoi cercare e il gioco è fatto!!

equipaje on 1 marzo 2008 01:06 ha detto...

Oh, meraviglia, funziona :)

Segnalo che:

1. il codice (ometto le parentesi uncinate):

div class='post-body'
io lo vedo come
div class="post-body entry-content"

(forse è questo il motivo per cui marika non trova la parte da sostituire?)

2. nella visualizzazione in anteprima visualizzo tutto (sommario e resto), ma credo sia giusto così.

Grazie mille!!

Marika on 1 marzo 2008 15:56 ha detto...

raga a me nn c'è proprio il tag div class con dopo post body.. c'è div class ma cn altre cose, tipo: div class='titlewrapper' sl qst.. posso sostituire qst e se faccio un bordello? nn capisco xkè funziona a tutti e nn a me.. ma forse l'avrò gia sostituito qnd ho fatto qlc altra cosa? uffaaaaaaaa il mio problema è sl di metterli espandibili qnd superano i 3 km ( eh si.. so logorroica) xkè avere tutto il blog fatto di uno stesso post è brutto.. mi affido a voi un bacio!! risegnalo il blog.. magari vedete ke ho fatto qlcs x cui ia stato possibile averlo gia sostituito.. grazie in anticipo
http://situnovuelves-marika.blogspot.com

yurj on 1 marzo 2008 16:16 ha detto...

@marika: Allora prima di iniziare, fai una copia di sicurezza del template.

La parte che devi sostituire è questa:
<div class='post-body entry-content'>

poi continua come nel tutorial... ;)

yurj on 1 marzo 2008 16:18 ha detto...

equipaje: si hai proprio ragione :D... i codici possono variare leggermente da template a template!! ;) e in effetti quello è il codice che deve modificare Marika (ho anche controllato nel codice html del suo blog!! :P)

Si, ti confermo che in anteprima vedi tutto insieme!! :D

Marika on 1 marzo 2008 16:30 ha detto...

yuri adesso nn mi odiare xò eh? ho fatto tutto come mi hai detto.. clicco salva e mi dice:
Your template is invalid because the tag 'div' appears inside of the tag 'head'.
sto impazzendo.. ke dv fare?

yurj on 2 marzo 2008 15:06 ha detto...

@marika: Se ti può essere d'aiuto, questa volta non è colpa tua!! In questi giorni blogger stà in manutenzione... e qualunque modifica farai al template, blogger ti segnalerà un'errore!! Anche a me, qualunque modifica faccio, mi dà errore!! Aspetta un paio di giorni e poi riprova!! :D

Marika on 2 marzo 2008 15:45 ha detto...

menomale! stavo letteralmente impazzendo!! ma dv a qst anke il fatto ke qnd Sto in layout a destra dove c'è la colonna nn mi fa scendere + di tanto? cioè la strisciolina blu si ferma.. mentre il blog nn è finito.. aspetto un paio di giorni poi ti dico.. mannaccia XD

Bja_95' on 3 aprile 2008 22:17 ha detto...

non ci riesco.......ho provato e riprovato, ma nn ci riesco.....il mio sito è www.hilaryduffgreenday.blogspot.com...a proposito....siccome all'inizio mi si apre una achermata in inglese "Avvertenza sul contenuto" (ti giuro niente di sporco o illegale) mi sai dire come toglierla? ti ringrazio tantissimo!

yurj on 5 aprile 2008 12:49 ha detto...

@Bja_95': prova a fare un passo alla volta e vedrai che tutto andrà a posto!!

Per la schermata "Avvertenza sul contenuto", evidentemente il tuo blog è stato segnalato per errore come spam, devi scrivere una mail all'assistenza

starl on 7 aprile 2008 12:46 ha detto...

ciao sono contentissima ce l' ho fatta sono riuscita a creare post espandibili grazie a te grazie grazie ancora grazie A presto Starl.
www.universoumano-starl.blogspot.com

Estis on 22 aprile 2008 06:59 ha detto...

Ho provato e ci son riuscita, forse è più utile per i post lunghi. Ne farò tesoro, mille grazie! Estis

Dr. Denvoizer on 18 ottobre 2008 15:41 ha detto...

Ragazzi! per avere più libertà nel modificare il codice, vi invito a vedere la versione HTML senza javascript potete vederela su blogger per i nulli.

Approposito Yuri, ho fatto un link verso il tuo articolo per coloro che cercano il metodo javascript

yurj on 2 novembre 2008 18:21 ha detto...

@Dr. Denvoizer: grande risorsa e complimenti... salvo l'articolo nei preferiti, e appena ho un pò di tempo gli dedico un post!! :)

Federico on 4 novembre 2008 12:08 ha detto...

Ciao, ho dei problemi pero nn posso postarti il codice html come posso fare?

Diomira Cennamo on 6 gennaio 2009 17:10 ha detto...

Ciao, quando cerco di fare l'anteprima o di salvare la modifica del modello mi viene fuori questo errore: bX-btce2j .
Cosa posso fare? Grazie!

yurj on 8 gennaio 2009 22:28 ha detto...

@Diomira hai per caso un template modificato?
Purtroppo dal tuo profilo non riesco ad accedere al blog!

Ivanhoe1024 on 23 febbraio 2009 16:07 ha detto...

Grazie mille per la tua utilissima guida!! Ho seguito le tue (tra l'altro semplicissime) istruzioni senza sapere un piffero di html, e il primo post della mia vita è diventato espandibile!!!!
Grazie ancora, e complimentoni!!

Equifare on 30 aprile 2009 00:24 ha detto...

Caro Yuri,
ho provato a fare come dici tu...
io ho la scritta div class='post-body entry-content'
in anteprima ogni mio post (già pubblicato) diventa doppio, per cui non ho il coraggio di fare salva.
Confesso che ho usato word, ma finora non mi ha dato problemi nelle modifiche.
Riprovo con block notes.
se il problema persiste, che faccio?
Santo Yuri, prega per noi

yurj on 7 maggio 2009 23:56 ha detto...

@Equifare: fare copia incolla da word non è la scela migliore... usa sempre il blocco note.

Se hai qualche sitazione, prova a crearti un blog di prova, dove puoi "pasticciare"!! ;)

socraticamente on 18 maggio 2009 16:22 ha detto...

Ciao,
complimenti per il sito veramente interessante. Ho utilizzato molti tuoi suggerimenti per migliorare il mio blog (e ho anche segnalato in un post ad hoc gli accorgimenti fatti grazie ai tuoi articoli).
Mi chiedevo riguardo i post espandibili se c'era un modo per lasciare in home page solo l'articolo spezzato ed evitare di visualizzare (come nel mio caso) anche la pubblicità adsense al termine del post, le etichette relative all'articolo e i commenti.
Spero di esser stato chiaro...

yurj on 25 maggio 2009 23:32 ha detto...

@socraticamente: prova a leggere qui:

http://risorse-blogger.blogspot.com/2009/01/banner-adsense-sotto-il-titolo-in.html

Valente il ragazzo diffidente on 7 giugno 2009 04:01 ha detto...

Interessante modifica. Però, presenta una difetto fastidioso. Almeno per me. Letto l'intro del post c'è la scritta "continua a leggere" ma cliccandoci sopra non succede nulla. L'unico modo che ho per leggere tutto il post è cliccare sul titolo vedere la pagina del post stesso. POco pratico...

Raffaele on 6 luglio 2009 12:17 ha detto...

Succede anche a me come a Valente, ma all'inizio funzionava.
Cosa è successo e come posso rimediare?
Grazie ciao

Monique on 13 novembre 2009 10:32 ha detto...

Ciao!Ho usato per un po'il post espandibile ma ora lo vorrei togliere e mi sono accorta che anche se cancello le 4 righe in fondo al post resta il link "Leggi tutto", e vorrei togliere proprio questo. Ho provato rimuovendo le righe che avevo aggiunto ma il testo del post scompare completamente e rimane solo il titolo del post, sul quale cliccare per vedere il testo intero..mi aiuti?

 
Ti sono stato utile? Ti ho aiutato? Ho risolto qualche tuo problema? Allora che ne dici di offrirmi un caffe?;)

Lettori fissi

Risorse per blogger Copyright © 2009 FreshBrown is Designed by Simran