2005/02/04

Resumen Expandible Inteligente

Si has escrito un post extenso y prefieres que en la página de inicio de tu bitácora Blogger sólo se muestre un resumen o el primer párrafo, junto a un enlace al archivo individual que contiene el texto completo, a continuación te cuento paso a paso cómo hacerlo, de manera que cuando sólo escribas textos cortos, se oculte automáticamente dicho enlace de ampliación.

Nota: esta técnica sólo funciona para las plantillas de Blogger previas a la actualización de comienzos de 2007. En el post Resumen Expandible 2007, explico cómo hacerlo usando el nuevo código de Blogger.

Una vez que ingresas al escritorio de tu bitácora, en la ventana de edición de tu plantilla, agrega los siguientes estilos:
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:block;}
</ItemPage>
.more {display: none;}
span.fullpost+span.more {display: block; margin-bottom: 10px;}

Más abajo en el código de la plantilla, donde diga:
<div class="post-body">
<p>
<$BlogItemBody      <$BlogItemBody$>
amp;gt;
</p>
</div>

Deberá quedar como:
<div class="post-body">
<p>
<$BlogItemBody$>
<MainOrArchivePage>
<span class="more"><br>
<a href="<$BlogItemPermalinkURL$>">Continua...</a>
</span>
</MainOrArchivePage>
</p>
</div>

A continuación guarda la plantilla y reconstruye tu bitácora. Desde ahora, cuando publiques algo extenso, podrás escribir un resumen o un párrafo inicial, y a continuación ingresarás el resto del texto dentro de las siguientes etiquetas:
<span class="fullpost"></span>

En las páginas de inicio y archivos de tu bitácora, el texto dentro del párrafo anterior será reemplazado por un enlace al archivo individual donde podrás leer el escrito completo.

Para agilizar un poco la cosa, puedes hacer que las etiquetas de párrafo anteriores se incluyan automáticamente al iniciar la edición de un texto nuevo. Para eso navegarás por la interfaz de tu bitácora hasta Settings -> Formatting y en la caja de texto de la opción Post Template ingresarás el código anterior. Luego de salvar tu cambio, toda vez que crees un nuevo post desde el enlace Create, podrás ingresar directamente el texto expandido entre dichas etiquetas, mientras que si vas a escribir algo corto, sólo tienes que borrar el código.

Este último atajo no tiene efecto si publicas desde el bookmarklet de Blogger, por correo electrónico o cualquier otro cliente remoto.

Nota 20030204 12:05: Por cierto, el tipo de código CSS "avanzado" y las barras de desplazamiento de código que usa este instructivo no es bien soportado, o directamente no es reconocido por las últimas versiones de navegadores de pacotilla como Opera e IE 6, lo que lleva a que se la página se muestre desmembrada. Ahora tienes otra buena razón más para preferir navegar con Firefox :P