Resumen de todos los post y leer mas en todas las entradas

Este es un truco de gran utilidad, que vi en la página de Gem@, que nos permite resumir los entradas de nuestro blog en Blogger automáticamente, antes las única forma era hacerlo manualmente en cada post o mediante el truco de "leer mas" con los contratiempos que ello lleva.

Pero con este truco se puede incluir el truco en el código de la página y nos resume automaticamente el post junto con una miniatura de la imagen del post.

Como siempre, vamos a la Edición de HTML de nuestra plantilla y marcamos "expandir plantilla de artilugios" ahi buscamos </head> , y justo antes añadimos el siguiente código:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
//<![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) {
if(thumbnail_mode == "float") {
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;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Luego, buscamos el siguiente código en la plantilla:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Y lo sustituimos por el siguinte:

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'> Seguir leyendo </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

El código es personalizable, asi que podemos hacer modificar varias cosas, entre ellas el lugar donde flota la imagen y el número de caracteres en el resumen:

• var thumbnail_mode = "float" ; si dejamos "float" la imagen se ubica a la izquierda, si lo cambiamos por no-float la imagen se ubica en la parte superior del post.
• summary_noimg = 230 ; el número de caracters del resumen, cuando los posts no tienen imagenes.
• summary_img = 140; el número de caracters del resumen, cuando los posts tienen imagenes.
• img_thumb_height = 100; altura a la imagen en el resumen.
• img_thumb_width = 100; anchura de la imagen en el resumen.

Por último, podemos cambiar el texto "seguir leyendo" por el que nosotros queramos, "Leer" "Leer mas" etc, pero también podemos añadir una imagen en lugar del texto, para eso lo hacemos de esta forma si añadimos: <img src="url-imagen" />


Si queremos modifical el colo o estilo del texto, lo hacemos añadiendo la etiqueta span:

<span style='color:#000;font-size:14px;'> seguir leyendo t</span>




Visto en: Gem@blog