Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

Andres dice...

Gran tutorial maestro, lo haré esta tarde y haber que pasa porque me gusta mucho y creo que es el que tienes tu en tu blog.

Alejoblogger dice...

Hola Jaime, Me Preguntaba si querias hacer un Intercambio de Link.. ¿Puedes?
Si es asi, Genial :d
¡Saludos! ;)

Jaime Trujillo Escobedo dice...

Andrés, aún no merezco ese apodo pero sin duda agradezco infinitamente tu comentario. Así es, se trata del mismo script utilizado en El Balcón.

Jaime Trujillo Escobedo dice...

Alejoblogger, siento decirte que por el momento no estoy haciendo intercambios de links pero quizás en un futuro me lo proponga de nuevo y rellene la lista con varios de vuestros maravillosos blogs.

¡Saludos!

Alex494 dice...

Hola Jaime!!!q tal? yo estupendamente gracias a este tutorial, por fin lo he conseguido poner!!! con la anterior entrada que subiste no fui capaz y con esta si. Muchas gracias. Sigue asi. :D

Alex494 dice...

Se me olvidaba preguntarte, como puedo poner mas entradas, es decir, cuando pulso ver entradas antiguas me aparecen 6 nada mas, ¿que hago para que aparezcan mas?
Gracias

Jaime Trujillo Escobedo dice...

Alex494, prueba a realizar este otro truco para ampliar la lista de títulos por página.

nEjO dice...

Esto de las nuevas plantillas, es un giro completo para los que nos habiamos aprendido el modificar la plantilla si saber mucho codigos.. :$

Jaime Trujillo Escobedo dice...

Nejo, será empezar desde cero pero debemos acostumbrarnos. Poco a poco aprenderemos más y con la ayuda de los tutoriales no se notará el cambio.

Fuentecillas dice...

Hola Jaime.
Aquí andamos, practicando.
Para mi sorpresa he hecho todo y no sale nada.¡¡ Qué cosas me pasan¡¡
Bueno espero una vez más.
Fuen

Jaime Trujillo Escobedo dice...

Hola Fuentecillas. Concretamente, ¿Qué plantilla del diseñador de blogger utilizas?

Lo veo complicado pero podría buscar una solución.

Mientras, dale un vistazo a esta alternativa.

Bulma dice...

Gracias Jaime, lo andaba buscando.
Besos y gracias por tu ayuda.

Jaime Trujillo Escobedo dice...

Gracias a ti, amiga, por haber escrito el comentario.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo