Il mio Blog:
appunti di vita quotidiana!



E miracolosamente non ho smesso di sognare e miracolosamente non riesco a non sperare
e se c'è un segreto è fare tutto come se vedessi solo il sole
(Elisa - "Qualcosa Che Non C'è")



1 febbraio 2009

Post Espandibili per Blogger

Oggi volevo parlare dei POST ESPANDIBILI per il blog.

Per post espandibile si intende la funzione con cui scegliere di visualizzare una determinata quantità di testo dall'inizio di ogni post come invito alla lettura. Gli utenti che desiderano leggere il resto possono fare clic su un link che consente di visualizzare per intero il vostro vostro post. E' molto utile se vi capita spesso di scrivere post lunghi che occuperebbero gran parte della pagine iniziale del vostro blog.

La guida di Blogger per mettere i post espandibili è spartana e riduttiva, il risultato è poco pratico ed esteticamente poco gradevole. Infatti in questo caso il problema è che anche non mettendo l'anteprima e scrivendo un post brevissimo comparirà ugualmente la scritta per l'espansione del post.

Mentre ora vedremo come una volta modificato il nostro Modello Html potremo decidere se rendere di volta in volta un post espandibile oppure no.

Cominciamo!

Andate in Pannello di Controllo -> Layout -> Modifica HTML.

Spuntate la casellina "Espandi i modelli widget" e poi cliccate "Scarica modello completo" e salvate il file sul vostro pc, in questo modo abbiamo fatto un backup del layout e non corriamo rischi di non poter tornare più indietro.

Ora subito dopo il tag <HEAD> inserite il codice Java che ci servierà.

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

Ora premete Ctrl+F e inserite nella ricerca la stringa <div class='post-body'> e sostituitela con questo codice

<div class='post-body' expr:id='"post-" + data:post.id'>
Andate a capo e aggiungete questa altra riga di codice

<b:if cond='data:blog.pageType == "item"'>
Dopo la stringa <p><data:post.body/></p>, che lasciamo così come è, aggiungiete il codice

<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>

Questo codice serve a far apparire il link per aprire e chiudere l'espansione del vostro post. Le frasi READ MORE... e SUMMARY ONLY... potete sostituirle con ciò che preferite.

Io ho messo nella breve introduzione la scrittina "Leggi tutto..." e poi alla fine di tutto il post "Sommario".

Salvate il Modello e andiamo a sistemare il corpo del messaggio.


Andate in Impostazioni -> Formattazione -> Modello post.

Inserite questo codice

Inserire qui il sommario del post <span id="fullpost"> Inserire qui tutto il resto del post </span>
Salvate Impostazioni

Ora quando farete Crea Nuovo Post vi compariranno le righine per la creazione del post espandibile. Se lo volete lasciate il codice così come è e sostituite le pari di testo "Inserire qui il sommario del post" e "Inserire qui tutto il resto del post" con le parti del vostro post. Se non avete bisogno del post espandibile cancellate il codice nel corpo del messaggio e scrivete il vostro post come fate di solito.

Fonte: Blogger post espandibili - Sid05


Se avete bisogno di aiuto sono a disposizione. ^_-

6 commenti:

Giochan ha detto...

L'ho appena provato!^__^
E' stata una guida utile quella di Sid05.
Però sulle prime non mi ero ricordata di cambiare il nome dei link per espandere e richiudere il post.
Ho subito sostituito la frase nel codice!
Carina come cosa se si vuole scrivere un post lungo!

Vampiretta ha detto...

Sei stata bravissima! ^_^

Io lo trovo comodissimo sopratutto perchè scegliamo noi quando mettere un post in modalità espandibile. Poi quando mi sento in vena scrivo cose chilometriche e dunque è troppo utile! ^_-

IlPrincipino89 ha detto...

ma a me nn funziona.... ho notato nell'html dei testi che compaiono gia dei /span e credo sia x qst che non funziona. Ma xk nei testi sono gia presenti? Cosa rappresentano in un testo?

Vampiretta ha detto...

Ciao IlPrincipino89, gli span servono di solito a formattare il testo.

Che problemi ti da?

Lorant ha detto...

ciao! sono disperato non riesco.. mi dice sempre così..
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: Element type "b:section" must be followed by either attribute specifications, ">" or "/>".

Ti posso inviare tutto il modello così lo controlli per favore?!?

Alessandro Zaccaro ha detto...

ciao, sono capitato sul tuo blog cercando nel web un modo per mettere i post espandibili sul mio blog...
ho visto che non funziona... hai per caso qualche aggiornamento?

grazie buona serata.
http://fancyfactorylab.blogspot.it/

Posta un commento

Puoi commentare il mio blog anche se non sei iscritto ma non lasciarmi il commento anonimo. Clicca su Nome/Url e scrivi il tuo nome o il tuo nick! ^_^