Entradas expandibles en las etiquetas

Hoy vamos a mostrar como podemos poner las entradas expandibles en las páginas de etiquetas y archivos.
Este truco lo comenta El balcón de Jaime en este post.
Con esta aplicación podemos mostrar a los lectores de nuestro blog, una lista con los títulos de nuestras entradas publicadas bajo la etiqueta específica, y ofrece la opción de expandir o desplegar el contenido del artículo.
Para ello nos tenemos que ir a editar nuestra plantilla.
Aunque sea pesada es muy importante que tengamos una copia de seguridad de nuestra plantilla antes de modificarla.
Podéis ver paso a paso como hacerlo en este post.
Ahora que ya tenemos nuestra copia de seguridad empezamos:

1º Nos vamos a :
Tema > HTML y buscamos </Head>
Justo encima pegamos:

<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;'/> 
    </div>
    </div>
    </b:includable>

    <b:includable id='main' var='top'>
    <b:if cond='data:top.showPlusOne'>
    <script expr:src='data:top.plusOneJsUrl'/>
    </b:if>
    
    <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

Indice HTML Plantillas