Entradas de cada categoría comprimidas

En algunos blogs, puede ser útil no mostrar enteras todas las entradas de una misma categoría. En la presentación que se propone, sólo se ven los títulos de cada post y el usuario despliega las que le interesan o accede directamente a la entrada.

Para conseguir esto, teneis que editar vuestro HTML, seleccionando "Expandir plantillas de artilugios" y realizar tres pasos:

1. Justo antes del </head>, hay que copiar este script:

Ver/Ocultar [+/-]

<!-- Entradas expandibles -->
<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='http://sites.google.com/site/oloblogger/ficheros/entradas_expan.js' type='text/javascript'/>

Si teneis un sitio donde alojar el fichero JS (por ejemplo en GooglePages), os lo bajais de Anniyalogam y lo subís a vuestro servidor. De esta manera funcionará más rápido. No olvideis cambiar la URL que figura en el código de arriba por la vuestra.

ACTUALIZACION 03-09-2009: El fichero hackosphere.js ya no está en la dirección citada. Para pruebas, podeis utizar el que se ha colocado ahora, aunque seguimos recomendando descargarlo y usar un alojamiento propio para evitar problemas en el futuro. Por cierto, que hoy día el alojamiento alternativo a Google Pages es Google Sites.

2. Hay que localizar la línea <b:includable id='main' var='top'> y justo antes, insertar todo este artilugio:

Ver/Ocultar [+/-]

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<div align='left'><table><tr><td align='left' valign='top' width='100px'><a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'><img id='data:post.id' src='http://img216.imageshack.us/img216/5504/flechahornu4.gif'/></a></td> <td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table></div>
<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>

3. Por último, ahí mismo, miramos hacia abajo e insertamos las nuevas líneas marcadas en negrita:

Ver/Ocultar [+/-]

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

El resultado es algo parecido a ésto...



En mi caso, sale un poco raro por las fechas y el efecto bloc, pero el aspecto de salida coincidirá con el que determine la plantilla de vuestro blog.

La imagen del paso 2 que hace de enlace para desplegar, se puede sustituir por el típico [+/-]. Sólo hay que eliminar toda la etiqueta <img.../> y escribir en su lugar el texto que queramos. También podéis escoger otra imagen que os guste y ponerla en su lugar. En ese caso, sólo teneis que cambiar la URL y ajustar el ancho (width) del primer TD (el que viene con valor 100px), para poner el que quede bien con vuestra imagen. Tened en cuenta que no puede ser muy alta para no descuadrar mucho con el texto de la cabecera.

Visto prácticamente igual en: Gema Bl@g, dónde podeis acudir si no se entiende aquí.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter