Blogger: Nueva opción MORE o Leer Más

Blogger Draft anuncia que ya esta disponible la opción de "Leer Más" en todos los blogs.

La forma más sencilla de usarlo es si tenemos habilitado el nuevo editor, allí, veremos un botón a la derecha que dice Insertar salto de línea (Insert jump break):

Basta colocar el cursor donde se nos ocurra y hacer click en el botón para que la entrada se muestre "cortada" en la página principal y en las páginas que listan entradas y se muestre completa en las páginas individuales.

Para quienes no usamos el nuevo editor o desde el modo Editar HTML de cualquiera de ellos, podemos insertar ese salto agegando una etiqueta especial:

<!-- more -->

Algo que me parece más recomendable si es que nuestros codigos son complejos ya que si lo hacemos en el modo Redactar, podemos "romper" alguna etiqueta HTML y dejarla mal cerrada lo que hará que el blog se muestre mal.

Por defecto, el texto será Más información (Read more) y eso puede ser modificado desde Diseño si editamos el elemento Entradas del blog y lo reemplazamos por cualquier otro:

Si bien esto está disponible en todos los blogs, deberemos verificar que nuestra plantilla tenga el código correspondiente.

Por supuesto, los detalles dependerán de cada caso pero, como idea general, deberemos buscar esto:

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

Inmediatamente después, deberíamos ver lo siguiente:

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
  </div>
</b:if>

Si no encontramos eso, simplemente lo agregamos.

<data:post.jumpText/> es el texto a mostrar, si quisiéramos usar una imagen, lo eliminamos y en su lugar ponermos una etiqueta IMG:

<a expr:href='data:post.url + &quot;#more&quot;'><img src='URL_imagen' /></a>

Como lo que se agrega es un simple enlace, tendrá las mismas características gráficas que el resto de los enlaces. Si quisieramos personalizarlo, deberíamos agregar las definiciones CSS antes de ]]></b:skin>:

  .jump-link {
    /* es el bloque contenedor */
  }
  .jump-link a {
    /* es el enlace */
  }
  .jump-link a:hover {
    /* si quisiéramos agregarle un efecto onmouseover */
  }

¿Y qué pasa si ya tenemos agregado el truco de Posts Expandibles? No creo que sean compatibles ni razonable usar ambos simultáneamente así que, lo mejor, sería quitarlo ya que este nuevo sistema es más simple y de esa forma aliviamos la plantilla.