Contraer entradas con imagen y botón "leer mas..."

A la hora de crear un blog, lo primero que hacemos después de registrarnos en la plataforma que hayamos elegido es hacernos de una plantilla. Encontramos plantillas que nos gustan pero vienen con las entradas expandidas, de forma que la página principal y las páginas de las etiquetas se ven larguísimas, vamos que para ojear la página de arriba a abajo te has dejado las huellas dactilares del dedo pegadas en la rueda del ratón.

Pues bien, este blog era uno de esos. Y yo prefería las entradas contraídas, con un resumen y el enlace de "Leer mas...", así que me puse a buscar hasta que llegué a Quiero crear un blog, Ahí hallé la solución siguiendo estos sencillos pasos:

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

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>

Podemos cambiar el texto "leer mas..." por otro que tu prefieras o por una imagen poniendo en lugar del texto este código de imagen:

<img src="aquí-la-url-de-la-imagen" />

A continuación pegamos este script justo antes de la etiqueta </head>

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

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.

Espero que os venga bien este truco. Salu2