💬 ชาวเน็ตแห่แชร์: VHSIZ - สรุปดราม่าล่าสุด

Leer	Crear vinculos dentro de una misma entrada o artículo

Leer	Personalizar las etiquetas del post-footer o pie de las entradas

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

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

Leer	Sencilla galería de imágenes en tus entradas

Leer	La fecha estilo bocadillo o cartel en el blog

Leer	Número de comentarios en una burbuja o bocadillo

Leer	Mostrar estrellas de valoración en las entradas de tu blog

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.