El Balcón: Trucos blog

Leer	Mensaje de bienvenida sobre las entradas de tu blog

Leer	Ocultar el bloque de las entradas en la portada del blog

Leer	Protege tu blog o tus entradas con contraseña

Leer	Links Entradas antiguas, Entradas mas recientes flotantes y personalizados

Leer	Leer más o Seguir leyendo automático con imágenes en miniatura en blogger

Leer	Reemplazar los links Entradas antiguas, Entradas mas recientes por el título de la entrada

Leer	Cambiar la imagen de fondo en el blog a opción del lector

Leer	Actualizar el blog de forma automática (sin enlaces o botones)

Leer	Ocultar gadgets en diferentes partes del blog

Leer	Ocultar el nombre o título de los gadgets

Leer	Oliva Gallery: Plantilla para blogger con la que podrás crear tu Fotoblog

Leer	Blog desplegable en cualquier apartado o en la portada de tu bitácora

Leer	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;'/> 
</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.