Leer más con thumbnail para Blogger
Una de las cosas geniales de WordPress, es la posibilidad de mostrar thumbnails en los posts resumidos, en los themes estilo revista. Sin embargo, esa opción también está disponible para Blogger gracias a un script desarrollado por Vietwebguide, que corta todos los posts en el mismo número de caracteres, y además genera una imagen tipo thumbnail automáticamente para cada post que contenga al menos una imagen.Lo mejor, es que el script es fácil de añadir, y para utilizarlo no hay que hacer nada nuevo, salvo postear normalmente.
Existe una versión 3.0 del script (esta es la 2.0), pero no pude acceder a ella por la limitación del idioma (no entiendo vietnamita). Pese a ello, la versión que probé funciona perfectamente en Firefox e Internet Explorer 8 (agradecería opiniones de quienes usen versiones más viejas de IE).
Instrucciones
1. Pegar antes de < /head >
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 360;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>2. Buscar < data:post.body/ > (con los artilugios expandidos) y reemplazar por:
<p><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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></p>
3. Configuración del script (opcional):
summary_noimg = determina el número de caracteres a mostrar en caso de que el post no tenga imágenes .
summary_img = determina el número de caracteres a mostrar en caso de que el post tenga imágenes.
img_thumb_height = alto del thumbnail.
img_thumb_width = ancho del thumbnail.
Utilicé valores que me parecieron apropiados para una plantilla con un ancho de 480px en el main-wrapper (la columna de los posts), y considerando que generalmente los thumbnails son de 125×125 píxeles.
Demo del script
Descargar script (para realojar, recomendado).
Aquí utilicé un icono de 
