Resumen en todos los post

Blogger´SPhera nos proporciona una idea de VN Weblog Guide resumir los post automáticamente cosa que antes nos veíamos obligados a hacer manualmente en post anteriores cuando añadíamos algún sistema de "leer más", una vez realizamos los cambios no tendremos que preocuparnos de nada. Eso si.. el resultado lo veremos en todos los post.

Estaría bien si antes de seguir descargamos una copia de la plantilla, lo que haremos es muy sencillo pero así tendremos más tranquilidad.

Nos situamos en plantilla Edición de HTML y marcamos para expandir la plantilla de artilugios. Buscamos </head> y justo antes añadimos lo siguiente:


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

Lo que sigue a continuación nos permite modificar la forma de mostrar los post resumidos y lo podemos hacer una vez terminamos todos los cambios, de esa forma podemos ver en vista previa el resultado de lo que vamos haciendo. Sería algo así:

» Donde dice var thumbnail_mode = "float" ; podemos ubicar la imagen en miniatura.

Con float la imagen se ubica a la izquierda. Si lo sustituimos por no-float la imagen se sitúa en la parte superior del pots y a continuación el resto del post.

"Cualquier cambio que hagamos sólo afectará la imagen que mostramos en los post resumidos, es decir la miniatura, una vez visualizamos el post completo la imagen se muestra en el tamaño y ubicación escogida por nosotros"

» En summary_noimg = 230 ; escogemos el número de caracteres en los post resumidos que NO contienen imágenes.

» En summary_img = 140; será el número de caracteres cuyos post contienen imágenes.

» Adjudicamos altura a la imagen en img_thumb_height = 100;

» La anchura la modificamos en img_thumb_width = 100;

Buscamos ahora lo siguiente:

<div class='post-body entry-content'>

<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Y lo sustituimos por:

<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'> Texto para expandir el post </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>

»Sustituimos Texto para expandir el post por el texto que hará de vínculo para mostrar el post en su totalidad.
»También podemos añadir una imagen en lugar del texto si añadimos:

» Si deseamos añadir unos estilos a ese texto podemos hacerlo con la etiqueta span.
<span style='color:#000;font-size:14px;'> Texto para expandir el post</span>
Ahí mismo podemos modificar el color de letra, tamaño y fondo.

El resultado de estas explicaciones podéis verlo aquí.

ElHackerZ