Entradas expandibles en la página principal

Hace tiempo habíamos visto la forma de lograr que, en las páginas de etiquetas se mostrasen solamente los títulos de las entradas, permitiendo que al pinchar sobre ellas se viesen completas.

Han sido varias personas las que me han preguntado sobre la forma de hacer esto mismo, pero en la página principal.
Esto lo he conseguido con una ligera modificación del código en el "truco" original, incluso pueden mostrarse sin problemas en ambas páginas al mismo tiempo.



Partiremos de la base de que no tenéis implementado el "truco" anterior que mostraba los títulos "recogidos" en las páginas de etiquetas.

[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto, lo descomprimimos y lo subimos a un alojamiento adecuado para obtener su url.

[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:

<script src='URL_DEL_SCRIPT' type='text/javascript'></script>
<script type='text/javascript'>
function toggleIt(id) {
    post = document.getElementById(id);
    if (post.style.display != 'none') {
        post.style.display = 'none';
    } else {
        post.style.display = '';
    }
}
</script>

 [3] Localizamos ahora el código que está escrito en color negro, y añadimos la parte del código que está escrita en color rojo, colocada tal cual se ve aquí, es decir, el código negro ya está en la plantilla y el código rojo es el que se añade:

<b:includable id='PeekABooPost' var='post'>

<div class='post uncustomized-post-template'>

<table><tr><td width='40px'>

<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>

<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

<div class='post-body' expr:id='data:post.id' style='display:none'>

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

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

</b:includable>

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>
<b:include data='post' name='post'/>
 </b:if>

[4] Usaremos la vista previa antes de guardar, pues ya deberían ser visibles solo los títulos de las entradas precedidos de un [+/-] en la página principal.

Si ya tenemos aplicado el "truco" en las páginas de etiquetas y queremos añadirlo también en la página principal del blog:

[1] Localizaremos esta parte del código:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

        <b:include data='post' name='post'/>

      </b:if>

[2] Y añadiremos ahí la parte que está resaltada en color rojo:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

        <b:include data='post' name='post'/>

      </b:if>
</b:if>