JMiur [E]

Timeago es un plugin para jQuery que pemite transfrormar una fecha "normal" en una fecha relativa, es decir, calcular cuanto tiempo ha pasado desde ese momento hasta ahora.

Si bien es algo que también puede hacerse sin librerías, este plugin posee algunas características que lo hacen especial ya que soporta casi cualquier tipo de formato de fecha por lo que se adapta bastante bien a cualquier sistema y para quien quiera ser "cool", utiliza una estructura de microformatos que también interpreta las nuevas etiquetas de HTML5 tales como <time> </time>

Para usarlo, descargamos el script, lo alojamos en un servidor y lo agregamos al head, debajo de la librería jQuery:
<script src="URL_jquery.timeago.js" type="text/javascript"></script>
Si no queremos usar archivos externos, copiamos y pegamos su contenido:
<script type='text/javascript'>
//<![CDATA[
  ...... acá pegamos el contenido del script jquery.timeago.js .......
//]]>
</script>
El plugin está en inglés pero, podemos cambiarlo, ya sea manualmente, buscando las variables con los textos o bien descargando cualquiera de las extensiones que ya están predefinidas y abarcan un sinnúmero de idiomas. En este caso, simplemente copiamos y pegamos ese código debajo de lo anterior; este sería el español:
<script type='text/javascript'>
//<![CDATA[
  ...... acá pegamos el contenido del script jquery.timeago.js .......
  ...... acá pegamos el contenido del script jquery.timeago.es.js .......
//]]>
</script>
Por último, ejecutamos la función indicándole la etiqueta y/o clase que debe analizar una vez que la página esté cargada:
<script type='text/javascript'>
  $(document).ready(function(){
    $('abbr.published').timeago();
  });
</script>
En este caso, utilizo una etiqueta ABBR con la clase published ya que así es como Blogger muestra ese dato por defecto:
<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'>
  <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
    <data:post.timestamp/>
  </abbr>
</a>
Claro que, si la plantilla está muy personalizada, es posible que ese código sea distinto; sea el que sea, debe buscarse cualquiera de las variables que usa Blogger para mostrar la fecha de las entradas: data:post.timestamp o data:post.timestampISO8601 y re-armar la etiqueta; por ejemplo, de este otro modo:
<span class='timeago' expr:title='data:post.timestampISO8601'><data:post.timestamp/></span>
en cuyo caso, el script se llamaría de este modo:
$('span.timeago').timeago();
¿Y la fecha de los comentarios?

Sería similar, bastaría buscar el dato de Blogger: data:comment.timestamp y modificarlo pero ... en este momento, conviven muchos tipos de códigos para comentarios lo que hace engorroso enumerar cada uno de ellos así que sólo mostraré la forma de hacerlo con los nuevos comentarios anidados que es el método que podría causar más problemas ya que todo es generado por un script interno del sistema.

En este caso, lo que el script de Blogger escribirá será algo así:
<span class="datetime secondary-text">
  <a href="URL_COMENTARIO" rel="nofollow"> LA FECHA </a>
</span>
y no tenemos forma de modificar ese código, lo que haremos es modificar una línea del script para que lea ese dato. Buscamos:
var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
y lo cambiamos por:
var iso8601 =  $(elem).text()
y llamaremos a la función de este modo:
$(document).ready(function(){
  $('span.datetime a').timeago();
});
Pero, para que esto funcione correctamente, debemos asegurarnos que el formato de la fecha de los comentarios sea adecuada así que en Configuración | Comentarios | Formato de hora de los comentarios, indicamos esto:

10 comentarios:

Pablo Diaz  

Hola asi quedo mi blog con la plantilla http://seduccionconpnl.blogspot.com.ar/

Ahora lo Que quiero Sabes es Como cambiarle el fondo a la Pagina Me gustaria que sea Blanca.


Y Otra Cosa se puede Agrandar El tamaño de las plantillas para que abarquen mas espacio??

JMiur  

El color de fondo está definido en la regla de estilo del body así que es allí donde deberías modificarlo.

El ancho general está definido en #outer-wrapper {} donde dice width: 930px; ese valor puede ser modificado y, junto con ese los valores de las columnas: #main-wrapper y #sidebar-wrapper

Fíjate en esta entrada.

Responder
Pablo Diaz  

Como se quita la cabecera de esta plantilla osea los gaget y todo eso para yo ponerle una imagen

JMiur  

Imagino que del mismo modo que con cualquier otra. No conozco la plantilla.

Responder
ulises tomas  

Jmiur, como debo de subir el archivo de Jquery?? y si no tengo host en donde podria guardarlo??

JMiur  

La librería jQuery la puedes cargar directamente desde las API de Google. El plugin en si, lo puedes subir a DropBox o , simplemente, copiarlo y pegarlo en la plantilla misma.

Responder
Magoplup  

Por lo que pude ver en el blog de pruebas ya no funciona este JQuery o lo has quitado?

JMiur  

No tengo idea. Me fijaré pero puede ser cualquier cosa.

Responder
Cristina  

necesito tu ayuda porfa. Resulta que he puesto una imagen en la fecha, pero la fecha no queda dentro, sino fuera y un poco mas arriba, cuando muevo la imagen, se mueve la fecha a la misma vez, ya no se que hacer. Y tu me has enseñado mucho. me podrias ayudar? Gracias.

JMiur  

Dime dónde puedo ver tu ejemplo online.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR