Resumen de todas las entradas con imagenes - nueva versión

Hace unos meses vimos un script para blogger que nos resume todas las entradas, con "leer mas" y miniauturas de imagen. Ahora, vamos a ver la versión mejorada de ese script. Las ventajas o novedades que trae son:

• Se puede modificar el punto de corte del resúmen para cada entrada.
• El resúmen a mostrar se mide en palabras, no en caracteres como antes, esto es para que las palabras no se muestren cortadas.

Podemos ver el script funcionando en Blogger aquí.

Para instalarlo solo necesitaremos dos pasos:

Primero, vamos a la Edición de HTML de nuestra plantilla y marcamos "expandir plantilla de artilugios" y ahi buscamos </head> y justo arriba colocamos el siguiente script:

<script type='text/javascript'>
var thumbnail_mode = 'no-float' ;
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 150;
var img_thumb_width = 220;
var indent = 3;
</script>

<script type="text/javascript">
//<![CDATA[
/******************************************
Auto-readmore link script, version 4.0 (for blogspot)

(C)2009 by Anhvo

Homepage: http://vietwebguide.com

Please dont remove this copyright or change it into your own
******************************************************/

/*******************************************
CONFIG (extenal code)
-------------------------------

var thumbnail_mode = "float" ; //(or "no-float")
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 100;
var img_thumb_width = 120;
var indent = 3;

*********************************************/

function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--s*mores*-->/)[0];
}

function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(</{1}p>)|(</{1}div>)/gi
var re4 = /(<style.*?/{1}style>)|(<script.*?/{1}script>)|(<table.*?/{1}table>)|(<form.*?/{1}form>)|(<code.*?/{1}code>)|(<pre.*?/{1}pre>)/gi

post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)

for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != 'n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

}


var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--s*mores*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {

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 = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>

Segundo paso, ahora buscamos el siguiente código: <data:post.body/> y lo reemplazamos por:

<data:post.body/><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->Leer más</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Y listo! ya debería funcionar.

Por último, podemos configurar el script haciendo una modificación en las siguientes variables:

• 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.
• var classicMode = false; determina si todas las entradas se van a cortar en el mismo punto del resumn o no. Es recomendable cambiarla a true si antes cambiamos el valor de la variable thumbnail_mode a ‘float’.
• summary_noimg = 60 ; el número de palabras del resumen, cuando los posts no tienen imagenes.
• summary_img = 50; el número de palabras del resumen, cuando los posts tienen imagenes.
• img_thumb_height = 125; altura a la imagen en el resumen.
• img_thumb_width = 125; ancho de la imagen en el resumen.

Y como dije anteriormente, esta nueva versión del Script tiene la particularidad de que podemos modificar el lugar donde queremos que se corte el resumen, para eso, lo que debemos hacer es insertar en la entrada el siguiente separador: <!-- more --> Ejemplo:

Resumen <!-- more --> resto de la entrada.

Les recuerdo, que también podemos cambiar el texto "Leer mas" por el que nosotros queramos, "Leer" "seguir leyendo" etc, pero también podemos añadir una imagen en lugar del texto, para eso lo hacemos de esta forma si añadimos:

Para quienes ya tenían instalado la versión anterior del Script, solo tienen que cambiar el código del Script del primer paso.


Visto en: ChicaBlogger