Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

17 ago 2009

Leer más en Blogger

Actualización: desde la implementación del leer más nativo en Blogger, este hack ya no es necesario. Hay otro post explicando la manera de hacerlo nativamente, sin hacks externos a Blogger. Lo podéis consultar aquí.


No, no se trata de una invitación a que leáis más en los blogs de Blogger, sino del típico truco de esconder parte de las entradas en la vista de la página principal.

Este hack lo publicamos a petición de PDD20 y de Irene.

En primer lugar, tras la salvaguarda habitual de la plantilla, pues vamos a hacer unos cambios importantes en ella, buscamos estas líneas entre el código, tras Expandir plantillas de artilugios:

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


Es el lugar de la plantilla donde van los posts. Justo a continuación, dejando un par de saltos de líneas para tenerlo todo un poco más ordenado, pegamos estas nuevas líneas:

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>


Es un código con condicionales (if). Es la parte que le dice a Blogger si estamos viendo la página principal o si se trata de una entrada en concreto. En concreto le está diciendo que se oculte algo a partir de cierto punto, y que se muestre algo en su lugar en la página principal.

Para ello, tenemos que decirle que será ese algo, que puede ser un texto o una imagen. Buscamos esta linea en el código:

<data:post.body/>


Y justo a continuación, ponemos esto:

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


En este caso es un simple texto que dice Leer más... Pero podemos poner cualquier otro, o poner una imagen en su lugar, para lo que alojaremos la imagen en nuestro servidor habitual o en Picassa, y una vez tengamos su dirección web o URL, en vez del código anterior, pondríamos este otro:

<a expr:href='data:post.url'><img border="0" src="URL_IMAGEN"></img></a>


Se puede centrar o alinear a la derecha. En mi blog lo tengo alineado a la derecha. El código que tengo para ello es este:

<div style='text-align: right;'><a expr:href='data:post.url'><b><i>Leer más...</i></b></a></div>


Las etiquetas <i> y <b> son para cursiva y negrita, respectivamente. En principio, es posible el uso de casi cualquier código html en esta parte.

A partir de aquí, cada cual con su imaginación haga lo que quiera.

Guardamos los cambios en la plantilla y continuamos al siguiente paso.

Vamos a colocar el corte en los posts, pues este hack no es automático, y el autor de las entradas tiene que decidir hasta donde se verá el contenido de cada una de ellas en la página principal.

Creamos una nueva entrada, o abrimos una existente, en Edición de HTML, y situamos lo siguiente justo antes de la parte que queremos esté oculta en la página principal:

<span class="fullpost">


Y al final de todo el código de la entrada, cerramos la etiqueta con un simple </span>.

De nada sirve visualizar en Vista previa, porque no veremos el efecto, así que publicamos, abrimos el blog por la página principal y comprobamos que los posts editados se interrumpen por la parte deseada.

Esto es todo lo que hay que hacer para que el truco funcione, pero tengo que hacer unas consideraciones de importancia a quienes os aventuréis a implementarlo:
  • No es automático. Ya se ha dicho pero lo repito. Hay que añadir en todos los posts que se desee que estén cortados el <span class="fullpost"> y su correspondiente </span>.
  • En las entradas en que no se haga el corte, queramos o no, saldrá al final de todas ellas el Leer más. Es algo que tengo pendiente solucionar. Se admiten sugerencias...
  • Importante: si eres de los que retocan las entradas hasta el último momento, justifican, dan estilos a los textos, etc. Lo mejor es dejar para lo último lo de hacer el corte, y bajo ningún concepto abrir la pestaña de edición Redactar una vez puesto el <span class="fullpost">, o se generarán tantas copias del mismo código como párrafos tenga la entrada. Lo mejor es publicar directamente una vez puesto el código del corte.
Por último, deciros que este truco lo aprendí de TodoBlogspot, en la entrada sobre Entradas Ampliables.

5 comentarios:

  1. Muy bueno. Gracias. Saludos.
    http://www.ramonferrera.blogspot.com

    ResponderEliminar
  2. Este consejo ya esta algo "desactualizado": Aunque se puede seguir haciendo, blogger ya tiene una forma de hacerlo in situ. En las opciones de tu blog hay una opción para ello, y si se usa el nuevo editor de entradas, una de las nuevas herramientas es la de marcar el punto donde el documento se corta

    ResponderEliminar
  3. Está pendiente una actualización, tanto del post como de escribir uno nuevo explicándolo, haciendo énfasis en los problemas que pueden surgir.

    Déjame este tema a mi si quieres, Lukas

    ResponderEliminar
  4. Ya está, Lukas. Era algo que tenía pendiente desde hacía tiempo, y que me ha llevado pocos minutos hacerlo, pero siempre se me iba pasando. Gracias por recordármelo. :)

    ResponderEliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.