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 redes (anti)sociales como Twitter o Facebook (ver demo).

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: https://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".