Leer más con thumbnail para Blogger

Blogger, Scripts Publicado por Claudia en enero 21, 2009

Una de las cosas geniales de WordPress, es la posibilidad de mostrar thumbnails en los posts resumidos, en los themes estilo revista. Sin embargo, esa opción también está disponible para Blogger gracias a un script desarrollado por Vietwebguide, que corta todos los posts en el mismo número de caracteres, y además genera una imagen tipo thumbnail automáticamente para cada post que contenga al menos una imagen.Lo mejor, es que el script es fácil de añadir, y para utilizarlo no hay que hacer nada nuevo, salvo postear normalmente.

Existe una versión 3.0 del script (esta es la 2.0), pero  no pude acceder a ella por la limitación del idioma (no entiendo vietnamita). Pese a ello, la versión que probé funciona perfectamente en Firefox e Internet Explorer 8 (agradecería opiniones de quienes usen versiones más viejas de IE).

Instrucciones

1. Pegar antes de < /head >

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

2. Buscar < data:post.body/ > (con los artilugios expandidos) y reemplazar por:

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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 class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt; Leer más...</a></span>
</b:if></b:if></p>

3. Configuración del script (opcional):

summary_noimg = determina el número de caracteres a mostrar en caso de que el post no tenga imágenes .
summary_img = determina el número de caracteres a mostrar en caso de que el post tenga imágenes.
img_thumb_height = alto del thumbnail.
img_thumb_width = ancho del thumbnail.

Utilicé valores que me parecieron apropiados para una plantilla con un ancho de 480px en el main-wrapper (la columna de los posts), y considerando que generalmente los thumbnails son de 125×125 píxeles.

Demo del script

Descargar script (para realojar, recomendado).

Compártelo!
107 Comentarios en Leer más con thumbnail para Blogger
  1. Claudia dice:

    Rodrigo: No entiendo nada. ¿Hablas español nativo o portugués?

  2. Andres dice:

    No me resulta, ecea me sale todo bien pero cuando apreto seguir leyendo no me sale nada solo el titulo de la entrada. ¿cual puede ser la falla?

  3. Theone dice:

    Hola Claudia.

    Intente poner los codigos en mi plantilla y salieron bien, pero una vez le doy a leer más en la página principal, la entrada no se ve, nada de nada, ni imagenes, ni links, ni letras.
    No entiendo porque, todo lo hice bien, tal cual está en los pasos. A lo mejor he hecho algo mal y aún no se el que. ¿Me ayudas?

  4. Sorel dice:

    Hola claudia buenas tardes. Oye disculpa pero en mi plantilla salen mas de 1 linea con este comando “” y bueno mi pregunta es: ¿debo remplazar cada uno de esos comando? o ¿solo uno en especifico? por cierto si ocupas ver donde tengo ese problema porfavor enviame un MP para enviarte la URL saludos y muchas gracias

  5. Jessica dice:

    Perfect!!! It works *-*

Deja tu comentario
Tu Comentario