Resúmenes automáticos en las entradas de Blogger (Alternativa/Actualizado)

Anteriormente vimos una adaptación del plugin de BloggerPlugins el cual permitía resumir cada entrada en el índice del blog. En esta oportunidad quiero mostrarles una alternativa mucho mas ligera basada en jQuery, lo que hace es devolver el mismo texto sin formato mediante el uso de la función .text.

Para comprobar el resultado puedes revisar este ejemplo (No incluye imagen en miniatura) o este ejemplo (Con miniatura incluída).

El tutorial:

Paso 1: Añadiendo el script en la plantilla:

En "Plantilla | Edición de HTML", deberás buscar la siguiente línea:

</head>

Pega el siguiente código arriba:

<b:if cond='data:blog.pageType == "index"'>
<script type="text/javascript">
$(document).ready(function() {
      $(".resumen").text(function(index, text) {
            return text.substr(0, 500) +'...'; // Cambia el valor numérico destacado por X carácteres
      });
});
</script>
</b:if>

 Modifica el valor destacado en color (500) por la cantidad de carácteres que devolverá el script, posteriormente guarda los cambios.

Paso 2: Añadiendo un bloque correctivo:

Ahora necesitamos encerrar el contenido de la entrada dentro de un contenedor que contenga la clase ".resumen" ya que si no lo encerramos no podremos incluir ninguna imagen/thumbnail o elementos como marcadores sociales dejarán de funcionar (El script devuelve sólamente texto de un selector).

Entonces, con la opción "Expandir plantillas de artilugios" activada, buscaremos el siguiente código:

<data:post.body/>

Reemplazaremos el código por el siguiente:

<div class="resumen"><data:post.body/></div>

Previsualizamos los cambios y si observamos que las entradas se han resumido podemos guardar los cambios.

Paso 3 - Extra Opcional: Añadir un thumbnail en los resúmenes:

Si consideras que necesitas incluir un thumbnail al lado de los resúmenes, te recomiendo que observes este post de Oloblogger, es un script el cual redirecciona la imagen "<data:post.thumbnailUrl/>" a una imagen de mayor tamaño.

Instrucciones de configuración:

1. Primero pega el código inicial que otorga en la entrada (El que se incluye antes de </head>)
2. Debajo del código del paso 2 de este tutorial, deberás pegar el siguiente código:

<b:if cond='data:blog.pageType == "index"'><div class="thumb-post">
<!-- Pega acá el segundo código del post de Oloblogger -->
  </div>
<div style="clear:both" />
</b:if>

 3. Para alinear correctamente tanto resúmen como imagen pega el siguiente código antes de </head>

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.resumen {
width:400px; /*Cambia el valor por el ancho correcto de tu entrada*/
float:left; /*Cambiar por right para alinear texto a la derecha*/
}

.thumb-post {
float:right; /*Reemplaza por left para alinear imagen a la izquierda*/
width:100px; /*Edita este valor para modificar el contenedor de la imagen*/
}
</style>
</b:if>

Previsualiza los cambios y si son efectivos guarda la plantilla.

Paso 4 - Extra Opcional: Añadir "Leer más":

Si consideras que es necesario incluir el "jump-link" en tu plantilla, entonces fácilmente puedes hacerlo añadiendo este código:

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

Debajo del código del paso 2 o 3 (Dependiendo de tu elección de configuración)

Nota: Si no funciona el resúmen, deberás incluir jQuery en tu plantilla.