JMiur [E]

La forma en que Blogger maneja la fecha de los posts es bastante exótica, no sé si será porque le resulta fácil debido a la estructura de su base de datos o simplemente porque no se les ocurrió algo distinto y continúan haciendo lo mismo. En teoría, cada post tiene una fecha, de hecho, la vemos cuando abrimos una página individual pero, en la página principal, si hay varios posts publicados el mismo día, sólo vemos una.

En realidad, hay dos lugares donde definimos la forma de ver las fechas, en Diseño | Añadir y organizar elementos de la página, si editamos el elemento Entradas del blog, podemos establecer el formato de la fecha y eso es lo que se mostrará en el footer de los posts, por lo general, dentro de un bloque como este:
<div class='post-footer-line post-footer-line-1'>
.......
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
.......
</div>

Esa zona es fácilmente configurable ya sea con las herramientas de edición o modificando el código HTML; pero la fecha también se establece en la Configuración | Formato, allí es donde definimos la forma en que se verá la fecha, encima de cada entrada:

Formato de cabecera de fecha

Y es esa el área que se hace difícil de manejar. En una plantilla típica, ese dato se muestra así:
<b:includable id='main' var='top'>
.......
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
.......
<!-- este es el loop de los posts -->
<b:include data='post' name='post'/>
.......
</b:includable>
La variable <data:post.dateheader/> es la que posee el dato y se encuentra justo antes del bucle que muestra los posts así que, como está ubicada allí, la fecha se muestra siempre arriba de los títulos.

Hace unos días, Alfonsete me preguntaba si era posible mostrar la fecha debajo del título y, en realidad, cambiarla de lugar es sencillo. Primero, buscamos el código:

<h2 class="date-header"><data:post.dateheader/></h2>

y para evitar problemas en el caso de querer restaurarlo, no lo eliminamos sino que lo "comentamos" para que no se ejecute:

<!-- <h2 class='date-header'><data:post.dateHeader/></h2> -->

Ahora, debemos "moverlo" para ponerlo justo debajo de los títulos así que buscamos este tipo de código:
<b:includable id='post' var='post'>
.......
<b:if cond='data:post.title'>
<h3 class='post-title'>
.......
<data:post.title/>
.......
</h3>
<!-- y justo aquí pegamos el código de la fecha -->
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

.......
</b:includable>
Simplemente pegamos el código resaltado, debajo del título.

Si queremos modificar cómo se ve, buscamos las definiciones CSS del elemento y modificamos las propiedades:
h2.date-header {
.......
}
Ahora bien, uno podría suponer que haciendo esto, todas las entradas tendrán la fecha pero no es así, seguirá viéndose una sola vez. Es Blogger quien maneja esto y parece que no hay forma de cambiarlo a menos que usemos JavaScript.

Hace tiempo, luego de escribir sobre la forma de personalizar las fechas agregando calendarios, surgieron varias "quejas" respeto a que, esa limitación de Blogger hacía que los calendarios mostrados en los posts de igual fecha, quedaban vacíos o aparecía un texto que decía UNDEFINED. El problema, terminó por solucionarse modificando el script y podemos basarnos en eso para hacer lo mismo con la fecha cuando esta es un texto.

La idea es sencilla, vamos a usar esa limitación; ya que data:post.dateHeader es la fecha y, cuando el post tiene la misma fecha que otro anterior, data:post.dateHeader no contiene nada, lo que haremos es guardarlo cada vez que tiene un dato para que, si no lo tiene usar ese dato previamente guardado.

Otra vez buscamos el código sin importar dónde esté:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Y lo reemplazaremos por esto:
<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
Allí, si se cumple la primera condición (b:if) significa que es el primer post así que tiene una fecha por lo tanto, la guardamos en una variable llamada ultimaFecha. Luego, se muestra normalmente.

Si no se cumple la primera condición (b:else) significa que no es el primer post de ese día y por lo tanto para Blogger no tiene fecha así que usamos JavaScript para escribir la que habíamos guardado previamente:

document.write(ultimaFecha);

De esta manera, en todos los posts se mostrará la fecha de publicación.

56 comentarios:

La Blogueria  

Ajá, acá está la solución pues. Uso iconos en la fecha, y sobre todo al acceder mediante las etiquetas -y al tener instalado el hack de entradas en expandible-, queda bastante desprolijo si no aparece en todos los títulos. Pero debo preguntar (aunque ya casi me respondo yo misma), ¿ralentiza esto apreciablemente la carga del blog? Porque el mio ya no da más...

NO hace falta que respondas: lo voy a probar directamente y ver qué pasa :D Explotar, no creo que explote...

Responder
JMiur  

Para tu tranquilidad: esto no afecta el tiempo de carga, sólo estás escribiendo un dato, no hay archivos que cargar ni nada extraño.

Responder
La Blogueria  

Pero qué lercha... es verdad. Si el script ya esta instalado, es el que modifica la fecha. Ainss..

Gracias por tu paciencia.

Responder
JMiur  

En realidad, ni siquiera necesitas tener el script de las fechas o el calendario. Sólo estamos usando dos instrucciones independientes así que es lo mismo que usar un evento como onclick.

Responder
findulas  

Hola compi.

Ante todo darte las gracias por tu blog. Para los que no tenemos mucha idea de manejarnos con los códigos nos ayudas una barbaridad.

Voy al grano, esta modificación que comentas en tu entrada la había visto aplicada en algun blog, pero nunca he sabido como ponerlo. He probado la modificación que comentas más arriba y todo perfecto.

Mi problema es que la fecha de mis entradas las tengo con una imagen, y cuando le coloco el script que nos sugieres, realiza su función, pero solo me deja la imagen en la entrada más reciente. Las entradas anteriores ya van con la fecha, pero sin la imagen. ¿Cómo lo modifico para que me aparezca la fecha con la imagen en todas mis entradas?

Enga, un saludo y muchas gracias

http://astronomocegato.blogspot.com/

Responder
JMiur  

Saludos, Emilio. Eso si que parece complicado porque Blogegr maneja las fechas de los posts de un modo "extraño". Debería ver la forma en que está armada tu plantilla y experimentar un poco a ver si es posible hacerlo.

Responder
Anónimo  

Muy útil profesor JMiur :p

Responder
Emerald  

JMiur hola! he cambiado la fecha de mi plantilla tal como vos la tenes ahora, pero el problema que tengo es que no sale en todos los post, puse este nuevo script pero las fechas siguientes no salen como la primera.ups!
donde lo tengo que poner para tener en todos los post la fecha?
Gracias y saluditos!!

Responder
JMiur  

Primero que nada, fíjate si el problema se soluciona con esto.

Responder
Emerald  

Jmiur, ya lo puse pero no pasa nada, creo que tambien tendría que cambiar la llamada, pero no se como hacerlo sin anular el anterior script(calefecha)

Responder
Emerald  

el script de ultima fecha ya lo puse, pero no salen las fechas en todos los post, probé
en cambiar tbm la llamada y así sí salen pero desaparecen las modificaciones que le hice!!snif

Responder
JMiur  

Veo que todo es correcto. Ese problema lo vi en algún otro caso y se trataba de como está la fecha en la plantilla. El problema es que debeo verla ya que online esa parte no aparece visible.

Responder
Emerald  

Todo lo que pude hacer es elegir JMiur, los dos script no los se poner en la llamada, como está ahora salen las modificaciones pero en el primer post del dia!
Si tenes un tiempito, te mando mi plantilla como está ahora y me decis el error cuando la puedas mirar si?

Responder
JMiur  

OK, la recibí y la veré el fin de semana.

Responder
Anónimo  

Curioso cuando a veces un pequeño asunto nos cuesta tanto, pero para eso existe este blog.

basándome en esta entrada y en otra acerca de comentarios y modificaciones, me aventuré en mi plantilla como todo buen aprendiz, pero no podia poner la fecha.

Resulta que hace unos dias revisé el correo y me di cuenta que estaba suscrito a esta entrada, vine, y lei esta entrada y de casualidad encontré la otra de los comentarios que te cuento. Ahora pude poner la fecha, y además de eso tambien pude poner lo de comentarios.
ENLACE

Pero ahora te traigo una duda, sé q puede sonar algo dificil e incluso imposible, pero mi idea seria esta:

IMÁGEN QUE ILUSTRA


Mira mi idea es esta para que quede más claro, es que soy muy malo explicando ideas :p

1. Supongamos que tengo una etiqueta ACTUALIDAD

2. Cuando yo pinche el enlace actualidad, que seria algo como esto:

...blogspot.com//search/label/Actualidad

Me aparezca arriba de todas las entradas encontradas, un texto que diga, Usted está viendo las entradas encontradas con la etiqueta ACTUALIDAD.

3. O sea que pueda crear basandome en la etiqueta, una pequeña descripción, en realidad mi idea es que salga un resumen de las entradsa encontradas por ejemplo si alguien se mete a la etiqueta noticias, que devuelva un texto que diga LA SECCIÓN NOTICIAS ES UNA DE LAS SECCIONES QUE MÁS VAS A DISFRUTAR PORQUE BLA BLA BLA

4. O por ejemplo Humor la eetiqueta humor entonces aparece un texto (el cual yo ya habia creado y de alguna manera almacenado en alguna parte) LA SECCIÓN DE HUMOR JAJAJA QUE RISA.

5. En resumen de acuerdo a la etiqueta colocar cualquier vaina en el espacio citado en la foto que te puse arriba.

Esa es la cuestión

Responder
JMiur  

No conozco ninguna forma de manejar las páginas que muestran listas, ya sean de Archivos, de Etiquetas o de resultados de Búsqueda.

Responder
Juan Cruz Acosta  

Te agradezco de corazón esto!! fue una gran ayuda.. necesitaba mover mi fecha arriba del título porque la tenía abajo y no quedaba bien. Al igual que ponerle fecha a cada una de las entradas pues blogger a las del mismo día te pone fecha sólo a la última.. Muy buen blog de ayuda tenés. Saludos desde Ramallo, pcia. de Buenos Aires.

www.juancruzacosta.com.ar

Responder
JMiur  

Saludos, Juan. Me alegra que te sirviera.

Responder
Admin  

JMiur, dijiste engorroso, eso es poco, ya intenté con los scripts de las tres entradas y no me funciona, como hizo Luz de Luna? ella lo tiene como yo quiero.
Si hace falta te mado la plantilla o parte de ella, donde va ese código yo tengo otra cosa, ya estoy mareada...
Voy a probar en el otro blog que tiene distinta plantilla pero igual formato de fecha.

Responder
JMiur  

El que avisa no es traidor :D

Responder
Admin  

Nones, la otra plantilla también tiene el mismo código y script, por lo tanto no puedo poner ninguno de los que decís...
Que hago?... :o

Responder
JMiur  

Tendría que ver com oestán ahroa despues de las modificaciones. Envíala por mail.

Responder
Admin  

Ya te la envié JMiur, no la recibiste??
Anteayer te la mandé...

Responder
JMiur  

Si. Ya la tengo en mi poder. El fin de semana la miro.

Responder
Anónimo  

A ver...... pruebo éste último código que das aquí y veo las fechas en los dos posts(totalmente en cualquier lugar porque debería entonces probar de quitar los íconos y volver a darle estilo.

El segundo código que te dije quité lo he reemplazado por éste, y allí está el manejo. Sólo que no me funciona poniendo las imágenes que había colocado.

(Esta plantilla me saca los ojos, veremo si le gano)

Responder
Anónimo  

perdón (veremos, con S)

Responder
Analía Alvado  

Guauuuuu, ya ni siquiera estoy entendiendo a los que no entienden… hace días que estoy siguiendo todo lo que encuentro de fechas, he tomado apuntes para cuando me decida a corregir conforme a lo que he leído y hasta practiqué en una plantilla que dabas con un ejemplo y la arruiné… lo gracioso es que hoy me dieron ganas de escribirte y lo hice; ahora vuelvo para acompañar a mi ego que entiende mucho menos y me dí cuenta que te escribí en una entrada de septiembre, así que volví por la de hoy y estoy en junio… perdí la hermosa plantilla que te cuento y ya salió el sol y no me he acostado…

A veces creo que no me simpatizas JMiur. :D

Responder
JMiur  

Analía:
Yo te recomendaría esta entrada, es la que me ha solucionado el tema de manera definitiva.

Responder
JMiur  

No veo que en tu blog, el script contenga ese dato de "ultimaFecha" para preservar las que Blogger no muestra.

Responder
Mar  

Gracias, me ha sido de gran ayuda!

Responder
Admin  

Y como sería si quisiera poner la fecha JUSTO en el título y no abajo ni arriba? Llevo buscándolo bastante tiempo sin resultados positivos. Si supieras como, te lo agradeceria.
Gracias por compartir esta valiosa información ; )

Responder
JMiur  

Depederñaáde la plantilla; puedes usar CSS y hacer que flote o puedes colcoar el dato de la fecha que utilices junto con el dato que contiene el título de las entradas.

Por decir cualquier cosa, por ejemplo:

<h1>
<data:post.timestamp/> <data:post.title/>
</h1>

Responder
Admin  

@JMiur

Uo! Gracias, lo que pasa es que no se ponerlo. No sé cual es el código del titulo, ni tampoco se moverlo con css : (

Responder
JMiur  

No sé cuál es exactamente lo que dice tu plantilla; es algo que no se ve online pero el título en si mismo es ese dato:
<data:post.title/>

Responder
Admin  

@JMiur

Gracias, ya lo arreglé mas o menos. Saludos! : )

Responder
Kazbam  

Gracias!!!

Responder
JMiur  

Lo que veo en tu blog es que la fecha aparece a lado del nombre del autor pero, el formato es de horas y no de fechas; cambia eso,

Responder
JMiur  

Es lo que exlica este psot en su segundo párrafo. Diseño y luego click en editar el elemento Entradas del blog.

Responder
flor pájaro  

¡Hola Jmiur!
Estuve buscando cómo solucionar este problema hasta que llegué a tu blog y me emocioné.
El tema es que hice la edición pero no cambia nada; y lo que noté fue que hay una pequeña diferencia con el código que me aparece a mi: el código < span > aparece dos veces y hace que sea diferente al código que vos decís que aparece habitualmente en una plantilla típica.
En un momento explicás que no importa dónde aparezca; bueno, yo copié el código que escribiste, abrí la edición HTML, apreté CTRL+F y pegué el código. Me aparecieron 3 resultados y los 3 eran iguales, con el span siempre ahí.
¿Tendrá algo que ver o habré hecho algo mal por eso no me funciona?
¡¡Espero que me puedas ayudar!! Y Blogger cualquiera, tanta configuración "avanzada" y no tiene una opción a un click para hacer esto.
Saludos :)

JMiur  

¿Y qué es lo que quieres hacer?
En este momento, en tu blog, al fecha se encuentra dentro del H2 cuya clase es date-header; debe comenzar más o menos así:
<h2 class='date-header'>
y terminar con:
</h2>

Si hay varios similares y quieres identificarl cuál es el que debes cambiar, agrégale un color cualquiera:
<h2 class='date-header' style='color:red'>

Responder
Ab. Juan Pablo Arévalo  

En Diseño-entradas del blog-editar yo puedo modificar el texto "publicado por" y a continuación de manera predeterminada aparece el nombre del autor. Ahora bien, quiero poner "publicado el" y a continuacion de manera predeterminada la fecha para que al final quede asi "Publicado el Martes, 11 Diciembre 2012." Como hago eso?

JMiur  

Tienes que identificar la etiqueta con la fecha que estás utilizando si es que quieres cambiar ese formato.

Si lo que quieres es agregar ese tipo de texto, bastaría escribir algo así:

publicado el <data:post.timestamp/>

ya que <data:post.timestamp/> es la fecha de publicación de cada entrada

Ab. Juan Pablo Arévalo  
Este comentario ha sido eliminado por el autor.
Responder
Ab. Juan Pablo Arévalo  
Este comentario ha sido eliminado por el autor.
JMiur  

Vas a tener que escribirlo otra vez porque no se entiende.

Los caracteres < y > deben ser cambaidos por entities: &lt; &gt;

Responder
Ab. Juan Pablo Arévalo  

No funcionó, si se colocó, pero justo debajo del extracto de la entrada, en el home, en donde aparece la hora; y no aparecia tampoco en las entradas. Lo solucioné poniéndolo en el script tuyo, así:

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<span>publicado el <data:post.dateHeader/></span>';</script>
<h2 class='date-header'><span>publicado el <data:post.dateHeader/></span></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

De este modo si me aparece como debe ser. Sin embargo surge otro problema, al momento de darle css con:

h2.date-header {
.......
}

...este solo afecta a la fecha del home, o sea en el extracto de la entrada, mas no en las entradas. Como hago para darle estilo a ambas?

JMiur  

Sin ver el ejemplo concreto, imposible decirte nada del CSS. Hay que verlo in situ.

Responder
Ab. Juan Pablo Arévalo  

quieres la direccion de la pag para revizar el código? Ok http://traveseandoconlasplantillas.blogspot.com/

JMiur  

Por lo que se ve, en tu plantilla, estás condicionando el CSS y agregando una serie de reglas exclusivas para las páginas donde se muestran resúmenes y no hay reglas de estilo para el resto de las páginas

.post-header { ....... }
.post-footer { ....... }
.post-body { ....... }
h2.date-header { ....... }

Deberías entonces, agregar la regla h2.date-header { ....... } con las propiedades que quieras para que sea la regal por defecto; es decir, que se aplique en el resto de las páginas.

La podrías colocar dentro de <b:skin> </b:skin> y de esa manera, no intereriría con la otra.

Responder
Ab. Juan Pablo Arévalo  

...Expectacular ...no se decirlo de otro modo jejeje ...quedo muy agradecido de ti ...te he agregado a mis marcadores ...solo me queda quitarle el font-weight a la fecha, le puse en el

h2.date-header {
font-size: 9px;
font-weight: normal;
}

pero no lo afecta???
sin embargo el tamaño de letra si coge... Le he buscado en toda la plantilla donde pueda haber un font-weight: bold; que pueda estar molestando pero nada, los cambio a normal y sigue en negritas la fecha...

Quedo igual sumamente agradecido de ti...

JMiur  

No vas a poder cambiar eso porque estás usando un script llamado Cufon que cambia las fuentes de los textos por ... llamémoslos dibujos y por lo tanto, ciertas propiedades no los afectarán.

Verifica bien si vas a usar ese script porque suele ser problemático ya que a veces, carece de caracteres especiales como letras acentuadas , la ñ u otros del idioma español.

Ab. Juan Pablo Arévalo  

Ahhh crees que sea por eso entonces mmm... esa es solo una plantilla de prueba para experimentar. Luego cuando ya tenga listo todo la ejecuto en la página real. En ella ya he eliminado ese script cufon. Entonces no me queda más que hacerlo ya directamente en la plantilla original... una vez mas... gracias!!!

JMiur  

Imagino que sí, que el script genera ese tipo de fuentes sin importar las propiedades. Una vez que lo quites, deberías poder personalizarlas sin problemas.

Ab. Juan Pablo Arévalo  

Tenias razón... ya me funcionó!!!

Responder
Julio Escribano  

Buenas, he intentado hacer que mi fecha aparezca en todas las entradas, he seguido varios tutoriales pero no lo consigo, pienso que será porque mi plantilla es modificada y la fecha está personalizada. Espero que puedas ayudarme porque ya no se que hacer. Este es mi blog: http://idoritoss.blogspot.com
Un saludo y gracias.

JMiur  

Por lo que se ve en tu blog, deberías probar la condición que indica este post. No es mucho lo que puedo agregar porque no sé que dice tu plantilla y eso es algo que no puede verse online.

Responder

¿Quiere dejar un comentario?

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

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