24 noviembre 2010

Leer más con miniatura de imagen

Esta es otra manera de mostrar las entradas resumidas o "Leer más" que tengo en mi blog.

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.

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

Damos a vista previa, y si todo ha salido bién, clikamos en guardar plantilla


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.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

6 comentarios

Si por ejemplo yo quiero tener la primera entrada completa (como tu la tienes) cual seria el código.

holaa e pusto los codes en mi plantilla pero no sale Leer más con miniatura de imágen me podia mirar haber por que?grasia

BLUEEXTREMER JOHN, si te aparecen varios <data:post.body/> ve probando el código uno a uno, hasta que sea visible.

holaa!! etto... quería saber si me podrías ayudar por lo menos localizar donde esta el problema!!

veras tengo una plantilla y la modifique y todo bien pero lo que no pude fue con la imagen minimizada en las entradas resumidas .... veras se ve borrosa la img :/

si quieres verlo -> http://ghaabycaptor.blogspot.com/ <- la verdad que no se que código le falta o cual cambiarle ya invente de todo XD

observo que ya lo has solucionado.
Gracias por comentar.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"