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

Posts relacionados

• Dos formas distintas de poner excerpts (leer más) en Blogger
• Leer más en Blogger… ¡al fin!
• Widget de Posts recientes con imágenes para Blogger

El script, de JavaScript Kit, es un countdown (cuenta regresiva) que se muestra en forma de texto, y que podemos modificar para hacerlo más funcional y utilizarlo en cualquier fecha: Navidad, año nuevo, cumpleaños, etc.

Para utilizarlo, sólo es necesario copiar el texto en un nuevo widget (o gadget) de HTML javascript y listo. Podemos añadir un título a nuestro widget, o simplemente dejar el área en blanco.

Espero que sea útil!

Script original (en inglés)

Se vería algo así:

“2 days left until Christmas (Dec 25)!“

<script type="text/javascript">
 
/*
Annual Occasions Count Down script- By JavaScript Kit
For this and over 400+ free scripts, visit http://www.javascriptkit.com
This notice must stay intact
*/
 
var today=new Date()
 
//Enter the occasion's MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(), 12, 25)
 
//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText="left until Christmas"
var onOccasiontext="Today is Christmas. Happy Holidays!"
 
var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion
 
var one_day=1000*60*60*24
var calculatediff=""
 
calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){ //if bday already passed
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}
 
//Display message accordingly
var pluraldayornot=(calculatediff==1)? "day" : "days"
if (calculatediff>0)
	document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"!</b>")
else if (calculatediff==0)
	document.write("<b>"+onOccasiontext+" "+showdate+"!</b>")
 
</script>

Configuración básica del script

//Enter the occasion’s MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(), 12, 25)

Determina la fecha de la cuenta regresiva, en números. En este caso, es 12,25 (Diciembre 25). Va siempre primero el mes, y luego el día.

//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText=”left until Christmas”
var onOccasiontext=”Today is Christmas. Happy Holidays!”

Determina el texto que queremos que se muestre antes del día y en el mismo día, respectivamente.

var monthtext=new Array(“Jan”,”Feb”,”Mar”,”April”,”May”,”June”,”July”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”)

Los nombres de los meses. Podemos mostrarlos en forma abreviada o completa.

var pluraldayornot=(calculatediff==1)? “day” : “days”

Singular y plural del texto que va a acompañar al número. Ejemplo, “día” : “días”.

Script en español

Hice una traducción al español del script, de acuerdo a lo que permiten mis conocimientos en javascript. Pueden descargarlo desde aquí en formato *.txt.

Para adornar la cuenta regresiva, también podemos agregar un estilo en HTML. Así, podemos poner una imagen que acompañe al texto, o cambiar el color y el tamaño del texto.

Ejemplo:

Aquí utilicé un icono de Iconspedia de 64×64 píxeles, alineado a la izquierda, con un texto de 16px en verde #284d22 (ver colores HTML).

CÓDIGO (modificar a gusto):

<div style="color: #284d22; font-size: 16px; padding-left: 68px; min-height: 64px; background: url(http://i362.photobucket.com/albums/oo63/girlyblogger/candy-cane-64x64.png) top left no-repeat;">
 
El-script-va-aquí
 
</div>

Más countdowns (Flash)

Posts relacionados

• Blogger: ¿Dónde alojar archivos javascript?
• Copos de nieve en el blog
• Mostrar anuncios de Adsense sólo a los visitantes de buscadores en WordPress y Blogger

El script está disponible en Dinamic Drive (puede verse un demo allí), aunque también se verá en mi blog temporalmente.

Para instalar el script, sólo se necesita copiar la siguiente línea bajo <body>, en la edición de HTML del blog. Lo probé en Blogger y WordPress, y funciona sin problemas en Explorer y Firefox.

<script type="text/javascript" src="http://boxstr.com/files/4236870_800pj/snowflakes.js"></script>

Alojé este script en Boxstr.com. Eventualmente podría dejar de funcionar. Por eso, recomiendo realojarlo en otro hosting (si es posible). Como se puede apreciar, en script está compuesto de una sola imagen, la que puede ser reemplazada por una de similar tamaño, en formato *.gif o *.png, siempre con transparencia.

Descarga del script (para su modificación y/o realojamiento). Es necesario descomprimir el archivo *.js (javascript).

Edición básica del script (con Wordpad)

1. Para cambiar la imagen, buscar esta línea, y reemplazar el link por el de la imagen elegida.

var snowsrc=”http://i362.photobucket.com/albums/oo63/girlyblogger/snow.gif“;

2. Cambiar el número de elementos que queremos que aparezcan:

var no = 10; (Por defecto, aparecen 10 elementos).

3. Si queremos que los elementos desaparezcan después de cierto tiempo, cambiar:

var hidesnowtime = “0″; (Por defecto, los elementos se muestran continuamente, 0= número de segundos)

Posts relacionados

• Widget de Posts recientes con imágenes para Blogger
• Leer más con thumbnail para Blogger
• Cuenta regresiva en javascript