Resumen de entrada con imagen y "leer más"

Se trata de mostrar el inicio de nuestras entradas con una imagen y el "leer más".

A diferencia del "leer más" habitual, en este caso se incorporará automáticamente a todas las entradas del blog con una imagen que será la primera que hayamos incorporado.

Así mismo al pulsar en "leer más" nos abrirá la entrada completa con los comentarios de la misma forma que ocurre al pulsar en el título de la entrada.

1. Expandimos la plantilla y localizamos <data:post.body/> , lo cambiamos por este código:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

2. Ahora colocamos el script. Antes de </head> pegamos:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>

donde summary_noimg es el número de caracteres a mostrar en el resumen de la entrada, cuando no hay imágenes en ella.
summary_img es el número de caracteres a mostrar en el resumen de la entrada, si hay imagen.
img_thumb_height es el alto de la imagen.
img_thumb_width es el ancho de la imagen.

El script  está alojado originalmente en Google Pages. Como se sabe Google Pages dejará de funcionar, así que lo más recomendable sería descargar el script y subirlo a nuestro alojamiento habitual.

3. Si queremos adaptarlo al aspecto de nuestro blog añadimos las etiquetas que lo controlan (antes de ]]></b:skin>).

.rmlink{ /* propiedades generales */
...
}
.rmlink a{ /* Propiedades del enlace a simple vista */
...
}
.rmlink a:hover{ /*Propiedades del enlace al pasar el ratón sobre él */
...
}

Visto en Google Adsense for Vietnames