lunes, 2 de julio de 2007

Blogger: cómo mostrar entradillas de los posts

Como soy nuevo en el mundo de los blogs y al mismo tiempo soy bastante inconformista, al final resulta que me gusta personalizar en la medida de los posible este espacio que Blogger y por tanto Google, ha tenido a bien concederme.

Hace poco indiqué un truquillo para eliminar la barra de navegación y hoy escribo acerca de otro truco que he encontrado navegando que nos permite, en lugar de mostrar las entradas enteras de nuestro blog, segmentarlas mostrando el link de "Sigue leyendo". Claro está, esto lo haremos para que nuestros lectores puedan leer por encima más fácilmente todas las noticias y sólo a fondo las que realmente les interese, no por el hecho de obligarle a realizar un click que luego computará para nuestras estadísticas del site...

Resumiendo, lo primero que hay que hacer, igual que en el truco anterior, es dirigirnos a la pestaña "Edición de HTML" dentro de la sección "Plantilla". Una vez ahí recomendaros como siempre la realización de una copia de seguridad de nuestra plantilla por si algo saliera mal y trás esto nos ponemos manos a la obra.

Antes de nada hemos de activar la casilla de verificación "Expandir plantillas de artilugios", ya que en caso contrario no veríamos el fragmento de código que tenemos que modificar. Una vez hecho esto, aquí os adjunto las líneas que es necesario añadir.

En rojo están las líneas que debemos añadir para conseguir el efecto deseado mientras que he dejado sin modificar el color de las líneas de código que no tendremos que tocar para que de esta forma podáis encontrar más facilmente dónde hemos de realizar los cambios. Aquí tenéis:

<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'>Continúa...</a>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Hechas las modificaciones, guardamos la nueva plantilla.

Este pequeño trozo de código por si mismo no hará lo que queremos. Su función es la de una vez que la página ha empezado a cargarse, comprobar si es la página de portada. Si esto es así muestra el texto de la entrada del blog hasta dónde hayamos definido mientras que en caso contrario muestra todo el post completo.

En cualquier caso y como ya hemos dicho, para que funcione correctamente es necesario además seguir los siguientes pasos:

Dentro de la pestaña de "Opciones" nos dirigimos al apartado "Formato". Una vez aquí localizamos "Plantilla de entrada" y añadimos lo siguiente en el cuadro de texto:

Entradilla del post
<span class="fullpost">
Resto del post
</span>


Una vez hecho esto y tras haber guardado los valores, al escribir una nueva entrada veremos que nos sale en el cuadro las dos entradas del texto anterior como plantilla predeterminada si estamos en "Redactar", o bien las cuatro si estamos en "Edición de HTML". Ahora sólo tenemos que sustituir "Entradilla del post", por la entradilla de nuestro post y el resto del mismo sustituyendo "Resto del post". Cómo es de imaginar, es vital para que esto funcione que las líneas 2 y 4 no se borren, ya que en caso contrario no conseguiríamos el efecto deseado.

Si una vez implantado este sistema queremos que una entrada aparezca completa en la página principal, sólo tendremos que escribir todo el post en la parte de "Entradilla del post", con el único problema que nos aparecera "Leer más..." en la parte inferior pese a que no hay más que leer.

Y por último recordaros que será en las entradas creadas a partir del momento en que apliquemos este sistema será cuando podamos disfrutar de él. Si queremos que esto también se aplique a nuestras anteriores entradas tendremos que, manualmente y dentro de "Edición de HTML del apartado "Editar entradas", ir añadiendo la línea <span class="fullpost"> donde queramos marcar el corte y no olvidarnos de añadir </span> al final de la entrada.

Y hasta aquí este truco. Espero que os sirva y que comentéis vuestra opinión. Por cierto, no pongo referencias ya que como he indicado antes, este truco lo he obtenido a base de buscar por Internet y modificar y revisar el código que he ido encontrando. Por lo que he visto hay otras formas de más o menos realizar algo parecido a esto siendo esta, bajo mi criterio, la más elegante.

Además como consejo también os puedo decir que algunos "códigos" que encontré tenían más líneas de las necesarias e incluso llamaban a javascripts externos, por lo que id con cuidado...

Luego más.