POSTS EXPANDIBLES en Blogger

Todos los que usamos blogger sabemos que hay una funcionalidad que estaría bien que la integrase directamente el sistema, ya que es algo que normalmente nos gusta usar y es la posibilidad de mostrar varios post o artículos a modo de resumen, y que al pulsar sobre él podamos verlo expandido.

Para poder hacer esto en Blogger sólo tienes que introducir un código en la edición HTML de tu plantilla y que se encargará de esto que digo. Lo ideal sería que te cogiese automáticamente N caracteres y a partir de ahí colocase un "LEER MÁS" o "+info", aunque es cierto que si marcamos el trozo abreviado nos evitamos "extraños automatismos".

En fin, vamos a lo fácil...


Para los menos avanzados, entramos en nuestro blog, entramos en Diseño y vamos a EDICIÓN HTML.

Una vez en esa sección, encontramos el enlace DESCARGAR PLANTILLA, que pulsaremos para descargar la actual a modo de backup/copia de seguridad por si metemos la pata. La guardamos en el escritorio de forma temporal.

En la sección EDITAR PLANTILLA, marcamos la opción EXPANDIR PLANTILLAS DE ARTILUGIOS, que realmente es unos trozos de código que Blogger oculta por seguridad (para que no metamos el patón). Al marcarlo ya veremos todo el código.

Buscamos ahora el siguiente código:


<div class='post-body entry-content'> <p><data:post.body/></p>



En teoría no debería haber ningún otro sitio donde estas dos líneas aparezcan. Bien, ahora simplemente VAMOS A SUSTITUIR, de las lineas anteriores...


<data:post.body/>


... POR UNO de los siguientes códigos:


Para que salgan resumidas las entradas TODOS LOS LADOS (portada, archivo o etiquetas), excepto cuando queremos ver el artículo completo... claro está :D



<!-- codigo leer mas -->

<b:if cond='data:blog.pageType != "item"'> <style>.articulo {display:none;}</style><data:post.body/><a expr:href='data:post.url'>[ LEER ARTICULO COMPLETO ]</a>

<b:else/><style>.articulo {display:inline;}</style>
<data:post.body/>
</b:if>
<!-- codigo leer mas -->







Para que salgan resumidas las entradas SÓLO EN ARCHIVO Y ETIQUETAS, es decir, se mostrarían completas en Portada y, como no, al ver el artículo en cuestión:



<!-- codigo leer mas -->
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.url != data:blog.homepageUrl'> <style>.articulo {display:none;}</style><data:post.body/><a expr:href='data:post.url'>[ LEER ARTICULO COMPLETO ]</a>

<b:else/><style>.articulo {display:inline;}</style>
<data:post.body/>
</b:if>
<b:else/><style>.articulo {display:inline;}</style>
<data:post.body/>
</b:if>
<!-- codigo leer mas -->



Pulsamos en guardar plantilla. Si en este momento vemos nuestro blog veremos que NADA HA CAMBIADO. Lo que hemos hecho en realidad es crear una clase que luego delimitaremos y según donde nos encontramos mostraremos o no su contenido.

Ahora, cada ve que editemos una entrada/artículo/post, marcaremos con las etiquetas:


<span class="articulo"> .... </span>


el trozo de artículo que corresponde al artículo completo, por lo que el resto se usará en la versión "RESUMEN" del mismo. Es decir, se ocultará en "modo resumen" lo que pongamos dentro de las etiquetas span.

Esto también nos permitirá sacar resumen del trozo que queramos y sólo de los artículos extensos, aunque es cierto que siempre (y eso queda regular) aparecerá, en las secciones que hemos definido para resumen, la frase LEER ARTÍCULO COMPLETO (o lo que queráis poner).

Si te equivocas o no te gusta el resultado, usa la opción ... CARGAR PLANTILLA (que está al principio), donde seleccionarás la que bajaste previamente y tienes en el escritorio (por ejemplo) y le das a subir.

¿Está claro? :)