Un post dal passato: Post espandibili per Blogger

La soluzione dei post espandibili illustrata da me in questo post attualmente non funziona, la causa è la rimozione del file "hackosphere.js" dal server dell'autore. Per questo motivo ho deciso di riprendere il precedente post e con una piccola modifica (al punto 3) fornire una soluzione indipendente da file esterni.

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

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:
   

   <b:if cond='data:blog.pageType != "item"'>
   
   <script type="text/javascript">
   var fade = false;
   
   function showFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    
    for(var i = 0; i &lt; spans.length; i++) {
     if(spans[i].id == "fullpost") {
      if(fade) {
       spans[i].style.background = peekaboo_bgcolor;
       Effect.Appear(spans[i]);
      } 
      else 
      spans[i].style.display = 'inline';
     }
     if(spans[i].id == "showlink")
      spans[i].style.display = 'none';
     if (spans[i].id == "hidelink")
     spans[i].style.display = 'inline';
    }
   }
   
   function hideFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    
    for(var i = 0; i &lt; spans.length; i++) {
     if(spans[i].id == "fullpost") {
      if(fade) {
        spans[i].style.background = peekaboo_bgcolor;
        Effect.Fade(spans[i]);
      }
      else spans[i].style.display = 'none';
     }
     if(spans[i].id == "showlink")
      spans[i].style.display = 'inline';
     if(spans[i].id == "hidelink")
      spans[i].style.display = 'none';
    }
    post.scrollIntoView(true);
   }
   
   function checkFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    var found = 0;
    
    for(var i = 0; i &lt; spans.length; i++) {
     if(spans[i].id == "fullpost") {
      spans[i].style.display = 'none';
      found = 1;
     }
     if((spans[i].id == "showlink") &amp;&amp; (found == 0))
      spans[i].style.display = 'none';
    }
   }
   </script>
   
   </b:if>

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.

N.B. E' importante assicurarsi che il tag span con id="fullpost" sia presente solo una volta all'interno del post.