Contraer y expandir entradas

Cuando tenemos muchas entradas publicadas en nuestro blog y las categorías están rebosantes de texto, puede hacerse pesado (para nosotros y para nuestros lectores) ir dándole a la ruleta del ratón o a la barrita del lado derecho del explorador para bajar y leer los títulos de las entradas, hasta dar con el que nos guste o busquemos. Para esto hay una solución: utilizar un código que muestre sólo el título de las entradas, ocultando el texto, y nos permita abrir (expandir) sólo aquella que nos interese.

En este blog, por ejemplo, no lo he aplicado, de modo que si seleccionáis una categoría (en "se ha escrito sobre..."), veréis las entradas completas y seguidas; pero en el otro blog que tengo -A quien le amarga un dulce- sí lo he aplicado:

Como véis, aparecen los títulos de las entradas precedidos del símbolo [+/-], juntas por día de publicación, y un pequeño cartelito en la parte superior de aviso de que las entradas están contraídas.



Me gustaría poder pegaros aquí el código que he utilizado en ese blog, para que hiciérais un corta y pega en la plantilla-código HTML del vuestro, pero me estoy volviendo loca probando el código en este blog, así que, de momento, os dejo tres sitios donde podéis encontrar la explicación (al fin y al cabo no es un código mío).


Trucos Blogger


Gema blog


Blog and Roll


Sólo un par de explicaciones:

Cuando os situéis en la plantilla HTML de vuestro blog, seleccionad la opción "expandir plantillas de artilugios" y ya luego buscar los códigos necesarios, por ejemplo < /head >. Para ello, utilizad la opción de búsqueda del navegador (presionadndo CTRL y la letra F del teclado, o en el menú Edición - Buscar en esta página), se abrirá una barrita en la parte inferior del navegador y una vez escribáis la palabra, se seleccionará en color en el texto.
Para encontrar rápidamente el texto:


<b:includable id='main' var='top'>

<!-- posts -->

<div id='blog-posts'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>

</b:if>



escribid en el recuadro de búsqueda "post.date", resulta más rápido.



Si os da error por el script, probad a eleminarlo (desde < script > hasta < /script >), a veces funciona.



Seguiré probando, a ver si lo consigo, y si hay novedades, os cuento.

Bueno, pues hay novedades: conseguí poner el código en ese otro blog. Finalmente seguí las instrucciones de una de esas tres páginas que tenéis arriba. El problema estaba en que me lié más de la cuenta buscando los códigos, que estaban seguidos y pensé que no... En este blog lo estoy intentando pero me da errores,a pesar de que sigo los mismos pasos que en el otro sí funcionaron. Quiero aplicarlo aquí, así que seguiré intentándolo.
En resumen, si queréis aplicarlo en vuestro blog, acceder a una de esas tres páginas y seguid los pasos que allí se detallan. Debería saliros.... ¡Suerte!