Entradas resumidas y leer más en blogger

Las entradas resumidas son entradas ampliables que se muestran en la página principal y las páginas de etiquetas. El lector puede leer el inicio del post con opción a leer la entrada entera al hacer click sobre “leer más”, “post completo”. El sistema es similar al de un diario en el que leemos los titulares, y si nos interesa pasamos a leer la noticia completa, con lo que se agiliza y se vuelve más agradable la visita del lector. Vamos a ver la forma más sencilla de implementar posts ampliables.


La forma más sencilla de crear entradas ampliables, consiste en insertar un código para que oculte parte de la entrada, y al mismo tiempo un enlace que abre la entrada completa en su propia página. Estas entradas ampliables son las que podéis ver en el presente blog (al menos por el momento) y la información de los códigos y como implementarlos proviene de un post de Blogmundi

Las características de este diseño de entradas resumidas son:
- Al ampliar la entrada nos saca de la página principal
- Es solo de ida, y no se incluye ningún link de regreso. Aunque esto no me parece ningún problema, ya que se puede volver fácilmente con el navegador o buscando el link de página principal.
- Es manual, y en cada entrada nueva podemos mostrar o ocultar la parte que queramos.
- Se aplica a todas las entradas, en todas ellas aparecerá las palabras “Leer mas”

Para aplicar estas entradas resumidas al blog tendremos que insertar dos códigos: Uno en la plantilla de HTML y un segundo código en cada uno de los posts, que es el que indica que parte se oculta en cada post.

Insertar el código general de HTML en la plantilla:
1- Entra en la Edición de HTML
2- Haz una copia de seguridad de la plantilla.
3- Expande la plantilla de artilugios
4- Desciende aproximadamente hacia la mitad de la plantilla y localiza el siguiente texto, o un párrafo similar.


<div class='post-body'>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>


5- Substituye el parrafo anterior por el siguiente y guarda la plantilla.


<div class='post-body'>
<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href=’data:post.url’>Leer más…</a>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>


Nota: Puedes cambiar el texto “Leer más...” por cualquier otra expresión como “Leer toda la entrada” o “Entrada completa”

Comando a insertar en las entradas:
Ahora cada post debe llevar el siguiente comando para ocultar un texto:

<span class="fullpost">
Texto no visible
</span>


En los posts antiguos tendrás que aplicar esto a mano con paciencia. Pero como esto es una aplicación general, para las nuevas entradas puedes aplicar la plantilla de entradas, y escribir el código para que se edite automático. Copia en la plantilla de entradas el siguiente texto de forma que cada vez que vayas a escribir una nueva entrada, aparezca este texto.

Texto inicial

<span class="fullpost">

Texto no visible

</span>


Eso es todo, con estas instrucciones debería funcionar a la primera, en todo caso deja un comentario.

ACTUALIZACIÓN 2011: Este es método antiguo, que aún sirve para las plantillas de Blogger antiguas. En cambio el nuevo Blogger ha realizado cambios en el código de sus plantillas para que se incluya la opción de realizar entradas resumidas de una forma muy sencilla. Aquí tienes la explicación.