Entradas retráctiles

Este domingo pasado hice unos cambios a la plantilla de este blog. Quienes me habéis seguido con cierta asiduidad os habréis dado cuenta: las entradas largas ya no salen enteras en la página principal. Las he convertido en entradas ampliables. ¿Tienes un blog en blogger y te gustaría saber cómo lo he hecho? Pues...

El truquito lo aprendí de esta entrada de TodoBlogspot, blog que recomiendo para los temas del diseño de blogs, gadgets y cualquier modificación que se te pueda ocurrir hacer.

Para lograrlo, sigue estos pasos:

1. Ve a Diseño y luego a Edicion de HTML desde el Escritorio o Panel de Control de tu blog -antes de seguir es aconsejable hacer copia de seguridad de la plantilla, por si algo sale mal, para eso está el link Descargar plantilla completa-.

2. Activa la casilla Expandir plantillas de artilugios.
3. Busca en el código las líneas:

<div class='post-body entry-content'>

4. Justo a continuación, dejando un espacio, pegas ésto:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Después de la línea:

<data:post.body/>

añadimos:

<a expr:href='data:post.url'>Leer más...</a>

Puedes sustituír el texto "Leer más..." por el que creas más conveniente para animar al lector a seguir leyendo la entrada.

6. Le das a Vista Previa. Si no da ningún error y se visualiza correctamente el blog, entonces le das a Guardar Plantilla.

7. El siguiente paso se va a dar en las propias entradas, pero para no tener que repetir el proceso cada vez que creamos una, guardaremos una plantilla. Para ello, ve a Configuración, luego a Formato y en el campo de texto donde pone Plantilla de Entrada, pegas ésto:

Inicio de la entrada (texto visible)
<span class="fullpost">
Resto de la entrada (texto oculto)
</span>

8. Guardas la configuración. La próxima entrada que crees, desde la Edición de HTML saldrá siempre por defecto este último código. Lo único que tienes que hacer con él es sustituir el texto "Inicio de la entrada (texto visible)" por el texto que estimes oportuno que se muestre desde la página principal del blog. Y luego, el resto de la entrada, consistirá en sobrescribir "Resto de la Entrada (texto oculto)" por la parte restante de tu artículo.

Naturalmente, es posible aplicar este último código a todas tus entradas ya publicadas. Sólo tienes que cuidar qué párrafos quieres que se vean, y respetar las etiquetas del código, es decir, si hay un <span> entre medias del código no puedes colocar el </span> correspondiente entre medias, sino después. De hecho, lo aconsejable es cerrar la etiqueta al final del todo de la entrada.

Ya para terminar, he de hacer una observación: aunque intentes prescindir de este gadget en alguna entrada, no podrás, siempre te saldrá al final de la entrada el texto que pusiste en la plantilla del blog (Leer más, Sigue Leyendo, etc...). Yo utilicé ese inconveniente en mi favor, poniendo el texto que pone: "Lee la entrada completa y los comentarios publicados aquí...", pues en el fondo, haciendo clic en el enlace, se hace lo mismo que si pinchas en el título de la entrada, es decir, mostrar en formato página web la entrada más los comentarios publicados.

Si alguien lo intenta, que le irá muy bien. Es un truco muy sencillo.

Sin embargo, para quienes os preguntáis: ¿Cómo has conseguido mostrar de esa manera fragmentos de código HTML, dentro de un código HTML, y con un recuadro y un icono de fondo? Ese tema es bastante más complejo. Lo dejaremos para otra ocasión.