El truco 'Leer más...' en la portada de tu blog

Durante estos últimos meses me habéis preguntado cosas acerca del nuevo diseño del Balcón. Lo más popular ha sido el truco de 'Leer más...' o 'Seguir leyendo...' en la portada, que muestra un total de seis artículos resumidos.

Por tanto he decidio explicarte paso a paso como conseguir lo mismo que tengo yo en el blog, hacer que en la portada de tu bitácora se muestre tan solo un breve resumen y una imagen en miniatura.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta <data:post.body/> y bórrala para incluir esto en su lugar:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div expr:id='"blportadarsmn" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>blentradaresmn("blportadarsmn<data:post.id/>");</script>
<span class='blenlaceleerms' 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>

Ahora, encuentra la etiqueta </head> y añade el siguiente script encima:

<script type='text/javascript'>
blresumenno = 420;
blresumensi = 340;
blalturaimg = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function bltred(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 blentradaresmn(pID){
var div = document.getElementById(pID);
var blimgn1 = "";
var img = div.getElementsByTagName("img");
var blpost = blresumenno;
if(img.length>=1) {
blimgn1 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+blalturaimg+'px"/></span>';
blpost = blresumensi;
}
var blportadarsmn = blimgn1 + '<div>' + bltred(div.innerHTML,blpost) + '</div>';
div.innerHTML = blportadarsmn;
}
//]]>
</script>

Con esto terminamos el truco y tan solo necesitas guardar tu plantilla para comprobar el resultado. Aún así, puede que desees personalizar un poco el enlace 'Leer más', enmarcarlo o añadirle un color de fondo.

En este caso, añade encima de ]]></b:skin> este bloque de CSS:

.blenlaceleerms {
border: 1px solid #cccccc;
padding: 4px;
background: #f4f4f4;}

La primera línea representa el borde, que tiene un grosor de 1 píxel, el estilo solid (ver más estilos de borde) y el color #cccccc (utiliza la tabla de colores para cambiarlo).

La segunda indica la distancia que hay entre el texto y el marco (4 píxeles) y la última aporta un color de fondo gris claro (también puedes editarlo).