Blogger Javascript

Fechas más amigables en Blogger

Tal como mencionamos en "Fechas más amigables en WordPress", colocar fechas relativas o el tiempo transcurrido entre dos fechas (ejemplo: Publicado hace 2 días), es más amigable de interpretar que una fecha como tal. Este tipo de fechas son muy comunes en servicios como Twitter o Facebook (ver demo).

blogger-fecha-amigable

En Blogger es posible crear también este tipo de fechas con un poco de javascript y agregando un par de cosas en la plantilla, de manera muy rápida.

Fechas amigables en Blogger

1. Entra al código de tu plantilla ( Escritorio → Diseño → Edición HTML → Expandir plantilla de artilugios ) y justo después del siguiente código:

]]></b:skin>

Añade el siguiente script:

<script type='text/javascript'>
/* Fechas amigables en Blogger: http://blogandweb.com/2784 */
function timeAgo(date1,date2,granularity){var self=this;periods=[];periods[&#039;semana&#039;]=604800;periods[&#039;d&amp;iacute;a&#039;]=86400;periods[&#039;hora&#039;]=3600;if(!granularity){granularity=5;}
(typeof(date1)==&#039;string&#039;)?date1=new Date(date1).getTime()/1000:date1=new Date().getTime()/1000;(typeof(date2)==&#039;string&#039;)?date2=new Date(date2).getTime()/1000:date2=new Date().getTime()/1000;if(date1&gt;date2){difference=date1-date2;}else{difference=date2-date1;}
output=&#039;&#039;;for(var period in periods){var value=periods[period];if(difference&gt;=value){time=Math.floor(difference/value);difference%=value;output=output+time+&#039; &#039;;if(time&gt;1){output=output+period+&#039;s &#039;;}else{output=output+period+&#039; &#039;;}}
granularity--;if(granularity==0){break;}}
return&#039;Hace &#039;+output;}
$(document).ready(function(){});
</script>

2. Ahora busca:

<data:post.dateHeader/>

Nota: recuerda tener los artilugios expandidos o no encontraras este código.

Y sustitúyelo con:

<script type='text/javascript'>document.write(timeAgo(&#39;<data:post.dateHeader/>&#39;));</script>

3. El último paso es cambiar el formato de fecha para que sea compatible con el script entra a: Escritorio → Configuración → Formato → Formato de cabecera de fecha. Y cambia el formato de fecha por el sexto de arriba hacia abajo, es tipo: 7/18/2010. Guarda los cambios.

Y listo. El resultado puedes verlo en nuestro demo.

Script para encontrar el tiempo entre dos fechas

Esta práctica función javascript se puede usar en cualquier otro desarrollo, y recibe como parámetros dos o una fecha. Si son dos fechas, obtendrá el tiempo entre ellas, si es una, obtendrá el tiempo de esa fecha a la actual.

function timeAgo(date1, date2, granularity){
	
	var self = this;
	
	periods = [];
	periods['semana'] = 604800;
	periods['día'] = 86400;
	periods['hora'] = 3600;
	periods['minuto'] = 60;
	periods['segundo'] = 1;
	
	if(!granularity){
		granularity = 5;
	}
	
	(typeof(date1) == 'string') ? date1 = new Date(date1).getTime() / 1000 : date1 = new Date().getTime() / 1000;
	(typeof(date2) == 'string') ? date2 = new Date(date2).getTime() / 1000 : date2 = new Date().getTime() / 1000;
	
	if(date1 > date2){
		difference = date1 - date2;
	}else{
		difference = date2 - date1;
	}

	output = '';
	
	for(var period in periods){
		var value = periods[period];
		
		if(difference >= value){
			time = Math.floor(difference / value);
			difference %= value;
			
			output = output +  time + ' ';
			
			if(time > 1){
				output = output + period + 's ';
			}else{
				output = output + period + ' ';
			}
		}
		
		granularity--;
		if(granularity == 0){
			break;
		}	
	}
	
	return  'Hace ' + output;
}

Nota: Arriba,en la función para Blogger, el código se ha comprimido para que ocupe menos tiempo de carga.

La versión PHP de esta función la encuentras igualmente en el artículo "Fechas más amigables en WordPress".

Deja un comentario

19 Comentarios

  • Información Bitacoras.com…

    Valora en Bitacoras.com: Tal como mencionamos en “Fechas más amigables en WordPress”, colocar fechas relativas o el tiempo transcurrido entre dos fechas (ejemplo: Publicado hace 2 días), es más amigable de interpretar que una fecha como tal. Este tip…

  • […] sencilla para imprentarlo: human_time_diff().Actualización: También puedes ver como hacer fechas amigables en BloggerFechas amigables en WordPressPara usarla en los postsReemplaza la función que muestra la fecha en […]

  • Nada no me funciono o hay que añadir el script ese para encontrar el tiempo entre dos fechas?

    añadí el script y reemplace lo del dateHeader pero nada…

  • @Aretino: Ya agregué un tercer paso. El script no reconoce fechas en español, yo en el demo lo tenía en ingles y por eso no tuve problema. Cambia el formato de fecha y seguro funciona.

  • Hola Francisco muy buen truco este es lo que estaba buscando pero sabes tengo una duda como logro que salga de este modo en blog:

    Hace 2 semanas 6 días 12 horas Posted by Francisco at 8:47 PM

    te pregunto por que por lo general marca de esta manera

    Hace 12 horas Y mas abajo al final de la publicasion indica quien lo publico me gustaria que no sea de ese modo sino del modo en que se ve en tu ejemplo colocar al lado quien lo a publicado en la parte superior si puedes ayudarme en eso te lo agradeceria gracias

  • Francisco se me presento otro problema y es que cuando publico algo la hora de publicasion dice publicado hace 23 horas aun cuando se a publicado tan solo unos minutos antes u_u como podria solucuinar eso para que me marque los munutos desde su publicasion y no la cantidad de horas que van trascurridas de un dia espero que se logre enternder mi explicasion gracias y espero la respuesta anterior =D

  • @magoplup: Me pasa lo mismo, publique una entrada hace minutos y me aparece “Hace 63 semanas 5 horas”, al principio pense que como algunos códigos solo funcionaba con las nuevas entradas, pero volví a publicar luego de haber realizado los cambios y aparece la fecha de 63 semanas en la nueva entrada y en la vieja ni siquiera aparece…
    Espero que puedas corregirlo…

  • Hola! Amo este site =D
    te comento que agregué esto a mi blog, pero al publicar una nueva entrada, me dice HACE 13 horas pero la verdad es que solo han pasado unos minutos.. menos de media hora..
    hice todo al pie de la letra, tal como dice este tuto , pero que puede ser?? :S Ayuda por favor 😛

    Y Muchas gracias por todo!! ^^

  • @magoplup, @Braian: No es un error, pues en la fecha solo marcas el día, por tanto, es como si escribieras el post a las 0:00 horas, de ahí que siempre haya más diferencia que la real, pero vamos, solo se aprecia en entradas recién publicadas, en el resto, es una diferencia poco significativa.

  • @Francisco: Si Francisco tienes razon es solo en las publicasiones mas recientes el truco es de lo mejor quisas en blogger aun no se pueda aplicar como en wordpress donde la ultima publicasion te marca los minutos de la misma sin tomar referencia de las horas del dia transcurridas hasta ese momento por lo demas te puedo decir q muchas gracias por darnos a conocer este truco para nuestros blogger =D saludos…

  • Francisco tengo una nueva pregunta en relacion a este tema…

    Habria posibilidad que al llegar a el mes de publicado un post la feha se mostrara de esta manera:

    Publicado el 02 de Septiembre, 2010 a las 08:17:43, por Francisco.

    En ese caso lograr que toda publicacion hecha antes de el mes se vea de este otro modo.

    Publicado hace 29 días, por Francisco.

    Tienes algunas idea para lograr esto?

    Estare atento a tu respuesta y muchas gracias de antemano 🙂