English Português

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

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. .Sm4C. / Hace 6 años /

      que buena! justo lo que estaba buscando, saludos!

      Responder a .Sm4C. →
    2. Aretino / Hace 6 años /

      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…

      Responder a Aretino →
    3. Francisco / Hace 6 años /

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

      Responder a Francisco →
    4. Ootl / Hace 6 años /

      En las entradas queda “Hace 45 semanas 6 das 4 hora”.

      -editado-

      Responder a Ootl →
    5. Francisco / Hace 6 años /

      @Ootl Gracias, no había notado el error de la falta de la i acentuada, ya corregí el código. 🙂

      Responder a Francisco →
    6. magoplup / Hace 6 años /

      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

      Responder a magoplup →
    7. Aretino / Hace 6 años /

      Ya funciona Espero la respuesta a magoplup a ver que tal queda en mi blog

      Responder a Aretino →
    8. magoplup / Hace 6 años /

      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

      Responder a magoplup →
    9. Ootl / Hace 6 años /

      @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…

      Responder a Ootl →
    10. Braian / Hace 6 años /

      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!! ^^

      Responder a Braian →
    11. Francisco / Hace 6 años /

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

      Responder a Francisco →
    12. magoplup / Hace 6 años /

      @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…

      Responder a magoplup →
    13. Braian / Hace 6 años /

      @Francisco:

      Ok 😀 Muchas gracias ^-^

      Responder a Braian →
    14. ruthy / Hace 6 años /

      lo que se aprende con estos post!!!!
      muchas gracias!! mi blog va quedando cada dia mas mono!! jeje

      Responder a ruthy →
    15. Magoplup / Hace 6 años /

      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 🙂

      Responder a Magoplup →
    16. francesco / Hace 6 años /

      muy interesante post, no se, pero a mi si me sirvió 😉

      Responder a francesco →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad