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. ^_-