Títulos expandibles en los post de las etiquetas para las nuevas plantillas

Hace unos años se hizo muy popular y desde entonces, bloggeros y bloggeras de todo el mundo lo aplicaron en sus blogs. Me refiero sin duda al truco de las entradas expandibles en las páginas de etiquetas y archivos.

Esta comodísima aplicación muestra a los lectores del blog una lista con los títulos de las entradas publicadas bajo una etiqueta específica y ofrece la opción de expandir / desplegar el contenido del artículo.

Con los grandes cambios que ha realizado blogger y las nuevas plantillas ahora ofrecidas en el nuevo Diseñador, la forma de implementar el truco ha cambiado y el código ha pasado por alguna que otra modificación.

En esta entrada te explicaré, de manera similar a como lo hice en el truco anterior, a implementarlo en tu plantilla.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo encima añade:

<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>
<script src='https://sites.google.com/site/scriptsbalcon/b/blccexpandARTICULO.txt' type='text/javascript'/>

Seguidamente agrega las porciones de código resaltadas en color naranja tal y como puedes ver aquí:

<b:includable id='blEntradsexpand' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</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'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/>
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>

<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='blEntradsexpand'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

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

</b:if>

Asegúrate de situar cada bloque o línea en el lugar idóneo para evitar errores. Puede que el código varíe según la plantilla pero mantén en todo momento estas líneas como guía (aparecerán en cualquier caso):

<b:includable id='main' var='top'> y <b:include data='post' name='post'/>

Pulsa el botón guardar y accede a tu blog. Haz clic sobre una etiqueta cualquiera y comprobarás que los posts aparecen recogidos. Tan solo necesitas pulsar el [+/-] para desplegar su contenido y volverlo a pulsar para recogerlo.