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

Aggiornamento: Un post dal passato: Post espandibili per Blogger

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.

[via Beautiful Beta]