2007/02/08

Resumen Expandible 2007

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 a la página con el texto completo del post, 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: la siguiente técnica presenta una actualización del código que publiqué en este blog en 2003 para que funcione con las nuevas plantillas y etiquetas que Blogger a implementado recientemente.

Abre la ventana de edición HTML de tu plantilla y selecciona la opción "Expand Widget Templates".

Comienza por agregar el siguiente código a continuación de la etiqueta </b:skin>:
<style id='mystyle' type='text/css'>
/* ----- resex ----- */
<b:if cond='data:blog.pageType != "item"'>
span.fullpost {display:none;}
<b:else/>
span.fullpost {display:block;}
</b:if>
.more {display: none;}
span.fullpost+span.more {display: inline;}
</style>
A continuación colocaremos el código que muestra el enlace al texto completo del post. Lo primero es buscar la etiqueta includable que tenga como id el valor "post".

Luego buscamos la etiqueta div que tenga como class el valor "post-body" y justo debajo, antes de la etiqueta que cierra el párrafo:
<p><data:post.body/></p>
...es decir, antes de </p>, intercalamos lo siguiente:
<!-- mycode resumen expandible -->
<b:if cond='data:blog.pageType != "item"'>
<span class='more'>
<a expr:href='data:post.url'>Coninua...</a>
</span>
</b:if>
Finalmente guarda los cambios hechos en la plantilla.

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 intercalado entre las siguientes etiquetas:
<span class='fullpost'></span>
En la página principal y de 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 la etiqueta span anterior se incluyan automáticamente al iniciar la edición de un nuevo post. Para eso, desde el dashboard de tu bitácora ingresa a Settings, luego ve a la solapa Formatting y al final de dicha página encontrarás un cuadro de texto titulado Post Template donde pondrás la etiqueta span anterior completa.

Luego de salvar tu cambio, toda vez que crees un nuevo post, en la vista HTML 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.