10 nov 2009

Resumen entradas con imagen y leer más - blogger

Muchas veces escribimos post largos y como consecuencia nuestra pagina principal del blog se hace demasiado larga, haciendo que la estética de la pagina no sea la más recomendada.


Para solucionar esto hay un truco que permite mostrar un resumen de la entrada con una pequeña imagen de muestra, que será la primera imagen de nuestra entrada(si la hay) más un enlace de leer más, el cual nos llevará a la página de la entrada completa. Esto se consigue utilizando la libreria javascript summary-post-v20-test.js

para ello seguimos los siguientes pasos, como bien nos explica la chica blogger:

1. Vamos a Diseño, edición HTLM y pegamos el siguiente código en el Head, antes de la etiqueta <head>

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 360;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://pmsc.free.fr/gb/J/091113152646.js' type='text/javascript'/>

Nota: En src ponemos la dirección de donde tengamos alojado nuestro libreria js. Podemos usarlo tal y como está pero siempre es mejor descargarse el fichero y así no depender de otras personas.


2.Ahora expandimos la plantilla, buscamos <data:post.body/> pulsando Crtl+F y sustituimos por el código siguiente:

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

La libreria permite configurar el tamaño del texto a mostrar, y el tamaños de la imagen para ello modificamos los siguientes parámetros.

summary_noimg es el tamaño del texto si no hay imagen.
summary_img es el tamaño del texto cuando hay imagen.
img_thumb_height altura de la imagen en pixeles.
img_thumb_width anchura de la imagen en pixeles.

Es conveniente que descargueis esta librería y la subais a vuestro servidor o si no teneis podeis subirlo a google sites, para así no depender de otras webs o servidores. podeis descargar el fichero aquí.

3 comentarios:

  1. gracias.
    pero tengo una duda, para que sirve esa tal libreria?

    ResponderEliminar
  2. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.

    ResponderEliminar