"Leer más" con miniatura de imagen

Esta es otra manera de mostrar las entradas resumidas o "Leer más" que me he encontrado en Google Adsense for Vietnames.

Antes de empezar con la explicación hay que tener en cuenta que, una vez aplicados los cambios necesarios en la plantilla, el "Leer más" se aplicará a todas las entradas.

Después de incluir el código necesario en la plantilla para logar este efecto, las entradas sucesivas se editarán como siempre hemos hecho, es decir, no habrá que incluir ningún código en el editor, ni formatear las entradas de forma especial.

Una vez publicada la entrada, esta mostrará un determinado número de texto y una imagen en miniatura en la parte derecha del mismo.

La miniatura que se muestra, será por defecto, la de la primera imagen incluida en la entrada.
Si la entrada solo tiene una imagen, será la miniatura de esta la que se muestre en la entrada, si se incluyen varias imágenes, la miniatura que se mostrará será siempre la de la primera imagen de las que hayamos incluido en la entrada.
Si no incluimos imágenes en la entrada, se mostrará un resumen de texto determinado antes del "Leer más".

Una vez pinchemos en el "Leer más", iremos a la página individual de la entrada, donde la entrada se verá tal como la hemos editado, con las imágenes a tamaño "real" y en la posición en que las hayamos incluido.


[1] Nos situamos en la pestaña de "Edición HTML" de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios" para localizar este código: <data:post.body/>

[2] Una vez lo hemos localizado, lo eliminamos y en su lugar colocamos este otro:

<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>

[3] Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta: </head>

Justo antes de esa etiqueta (</head>) colocamos este código:

<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'/>

Modificaciones:

Código del paso [2]

Para sustituir el "Leer más" por una imagen, borramos Leer más... y colocamos en su lugar la url de nuestra imagen así:

<img src="Url_de_la_imagen"/>

El "Leer más" se muestra a la derecha de la entrada, para cambiarlo de posición, sustituimos en el código donde dice style='float:right' por style='float:left' (izquierda).

Si además queremos darle alguna propiedad al "Leer más" para que destaque del resto de enlaces de la plantilla, añadimos unas líneas de CSS en el código de la plantilla antes de ]]></b:skin>:

.rmlink{
font-size:90%;
font-weight: bold;
text-transform:uppercase;
padding-top: 10px;
}
.rmlink a{
color: #228b22;
}
.rmlink a:hover{
color: #9acd32;
text-decoration:underline;
}

font-size: Tamaño del texto.
font-weight: Tipo de texto (en este caso negrita).
text-transform: Texto en mayúsculas.
padding-top: Separación del enlace al texto (en pixeles).
rmlink a{ Propiedades del enlace a simple vista (en este caso solo he añadido color).
rmlink a:hover{ Propiedades del enlace al pasar el ratón sobre el (en este caso he añadido color y subrayado).

Código del paso [3]

He resaltado en color naranja el enlace al script que se necesita para hacer funcionar el "Leer más" que, como podéis comprobar, está alojado en Google Pages tal como el autor del blog de donde he tomado el truco lo proporciona. Es sabido que Google Pages dejará de funcionar en cualquier momento, así que lo más recomendable sería descargar el script y subirlo a nuestro propio alojamiento de archivos.

Modificaciones:
summary_noimg Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, cuando no hemos incluido imágenes en ella.

summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen.

img_thumb_height El alto de la miniatura de la imagen en pixeles.

img_thumb_width El ancho de la miniatura de la imagen en pixeles.


Ver ejemplo en funcionamiento / Ver entrada original