En diversas entradas anteriores, vimos cómo formatear a nuestro gusto distintos elementos de la plantilla Blogger:
Ahora le llega el turno a la fecha de las entradas.
Hay dos sitios en el panel de control con opciones para la fecha. El primero está en "Configurar entradas del blog" y es dónde se selecciona si la fecha del post se mostrará o no. Luego hay que fijar el formato de la propia fecha, que se puede modificar desde Configuración --> Formato.
La clase CSS que controla el formato, es H2.DATE-HEADER. Lo normal es que esté declarada debajo del comentario que indica el principio del código para las entradas y tiene más o menos esta forma:
Dentro del artilugio MAIN, en la parte de HTML, podreis encontrar las instrucciones para que se muestre la fecha. Esto ya cambia bastante según las plantillas y este es sólo un ejemplo de por dónde se puede encontrar:
Normalmente, no habrá que tocar esta última parte de código para cambiar el formato, pero si que habrá que hacerlo con la clase H2.DATE-HEADER.
Para modificar cosas típicas como color, tamaño y fuente de letra, márgenes y bordes, habrá que utilizar (o modificar) las instrucciones COLOR, FONT-SIZE, FONT-FAMILY, MARGIN y BORDER. Para una información más detallada de cómo formular estos atributos, visitar este apartado de DesarrolloWeb.
Jugando un poco con una peculiar imagen de fondo y con márgenes negativos, podeis conseguir una especie de etiqueta con fecha como esta que se ve a continuación y que sobresale del cuerpo de la entrada. Cuidado de como se ve en IE porque estas cosas a veces no le sientan bien. En este caso, se ha puesto el siguiente código en h2.date-header:
29-04-2008
Hay dos sitios en el panel de control con opciones para la fecha. El primero está en "Configurar entradas del blog" y es dónde se selecciona si la fecha del post se mostrará o no. Luego hay que fijar el formato de la propia fecha, que se puede modificar desde Configuración --> Formato.La clase CSS que controla el formato, es H2.DATE-HEADER. Lo normal es que esté declarada debajo del comentario que indica el principio del código para las entradas y tiene más o menos esta forma:
/* Posts
----------------------------------------------- */
h2.date-header {
margin:0 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
text-transform: lowercase;
letter-spacing:.3em;
color: $dateheadercolor;
font: $dateHeaderFont;
}
----------------------------------------------- */
h2.date-header {
margin:0 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
text-transform: lowercase;
letter-spacing:.3em;
color: $dateheadercolor;
font: $dateHeaderFont;
}
Dentro del artilugio MAIN, en la parte de HTML, podreis encontrar las instrucciones para que se muestre la fecha. Esto ya cambia bastante según las plantillas y este es sólo un ejemplo de por dónde se puede encontrar:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
... / ...
</b:loop>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
... / ...
</b:loop>
Normalmente, no habrá que tocar esta última parte de código para cambiar el formato, pero si que habrá que hacerlo con la clase H2.DATE-HEADER.
Para modificar cosas típicas como color, tamaño y fuente de letra, márgenes y bordes, habrá que utilizar (o modificar) las instrucciones COLOR, FONT-SIZE, FONT-FAMILY, MARGIN y BORDER. Para una información más detallada de cómo formular estos atributos, visitar este apartado de DesarrolloWeb.
Jugando un poco con una peculiar imagen de fondo y con márgenes negativos, podeis conseguir una especie de etiqueta con fecha como esta que se ve a continuación y que sobresale del cuerpo de la entrada. Cuidado de como se ve en IE porque estas cosas a veces no le sientan bien. En este caso, se ha puesto el siguiente código en h2.date-header:29-04-2008
float:left;
margin:-20px 0px 0px -70px;
padding:15px 0px 0px 10px;
color:#ffff00;
font-size:90%;
text-align:center;
width:132px;
height:50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZyaR7ZBB_HBqAGKSSg41h1TT__TmpDdhLAq7v7HDUFD8txhDxZkFYS-NkllSniWWk1c1Sxoux5GmrK4LK0FhSi1TWZuyD18eaOgTQ1QgebFvba-JOF6CyE3Pvo2ZllKAJhnkASWANaY_/s400/fecha.png);
margin:-20px 0px 0px -70px;
padding:15px 0px 0px 10px;
color:#ffff00;
font-size:90%;
text-align:center;
width:132px;
height:50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZyaR7ZBB_HBqAGKSSg41h1TT__TmpDdhLAq7v7HDUFD8txhDxZkFYS-NkllSniWWk1c1Sxoux5GmrK4LK0FhSi1TWZuyD18eaOgTQ1QgebFvba-JOF6CyE3Pvo2ZllKAJhnkASWANaY_/s400/fecha.png);
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Lo malo es que IE nada se ve bien, y la idea es tratar de adaptarlo(Algo imposible), ya que IE todavía es mayoría entres los navegadores...
ResponderEliminarSaludos!
Bueno Antony, realmente el truco de esta entrada de poner valores de margen negativos, funciona tanto con IE como con Firefox.
ResponderEliminarDe hecho puedes comprobarlo con este post. El dibujito de ejemplo se ve bien en ambos. Es más, las etiquetas de fechas de cada entrada de este blog, están hechas con esa misma base.
Hello!!
ResponderEliminarNecesito tu ayuda!
Yo tengo el ultimo ejemplo que explicaste, la etiqueta que sobresale del cuerpo de la entrada, y no se como le puedo poner la fecha!
Me aparece undefined! Como puedo hacer??!
(Te dejo mi blog con mi nombre)
Gracias por este post! La verdad que estuve buscando sobre esto por todos lados y recien aca en tu blog lo encuentro!
Gracias espero que me puedas contestar! (^__^)
Hola Anny.
ResponderEliminarHe visto tu plantilla y está diseñada para WordPress. También he comprobado que tiene un SCRIPT para la fecha que es el mismo que el de la plantilla Aspire. Por tanto, probablemente tengas el mismo problema que la gente que usó esta plantilla.
En este post se explica la solución. Prueba a ver.
http://oloblogger.blogspot.com/2008/09/problemas-con-plantilla-aspire-en.html
Saludos.
Muchas gracias Oloman!
ResponderEliminarPero igual sigo teniendo el mismo problema! Mi plantilla es un tanto complicada, y yo terca por no cambiarla! (es que me gusta!)
Le mande un mail a Jmiur, si el quiere le mando los codigos de mi plantilla y haber si puedo sacar el maldito undefined!!
De nuevo gracias!! (^__^)
Anny, tu plantilla tiene el mismo SCRIPT para tratar las fechas que la plantilla Aspire. Por eso te mandé a ese post.
ResponderEliminarRealmente no tendrías que cambiar tu plantilla, sino sólo ese código. Casi seguro que se arreglaría el problema sin cambiar nada tu diseño.
De todas formas JMiur es muy posible que sepa incluso cómo arreglar el SCRIPT que te funciona mal.
Oloman, como estas.
ResponderEliminarTe escribo esta vez, porque no encuentro como poder pagregar la fecha de publicacion de un post sobre el titulo, talcomo tu lo tienes en las paginas de etiquetas. en mi blog, incluso en la pagina principal, aparecen solo los titulos, y para poder acreditar mi blog necesito que se muestren las fechas de publicacion de cada articulo.
¿Puedes ayudarme?
Hola! Muy buen blog! Felicitaciones!
ResponderEliminarTengo algunas preguntas, perdón si son muchas, es que soy nuevo en esto y tengo muchas inquietudes ya que me logró atrapar esto de los blogs.
Primero: Quisiera saber cómo puedo hacer para tener entradas que no aparezcan en la página principal pero si poder acceder desde un acceso en la barra de la derecha.
Segundo: Si ves mi blog (chulaun.blogspot.com), que tiene una plantilla que descargué de la web, tiene botones para los comentarios, estos no me funcionan. Qué podrá ser?? Qué tendría que cambiar en el html para arreglarlo?
Tercero: Arriba de los botones de comentarios, las entradas tienen botones con la fecha, el tema es que me aparece la fecha solo en la primer entrada, el resto de los botones quedan vacíos.
Disculpame si es mucho rollo, es que me tiene medio inquieto el asunto. Muchísimas gracias de antemano.
Buenas noches,
ResponderEliminarEs un placer encontrar gente que nos ayuda con nuestro blog porque a veces te puedes volver loca.
Tengo modificada la fecha de la entrada, pero no hay manera, si tengo varios post un dia, solo me sale en el ultimo.
Hay alguna manera de que salga en todos los post?
Gracias
Contestada en un post tu pregunta Anónimo.
ResponderEliminarTe deseo Feliz Año, Oloman.
ResponderEliminarAndaba por aquí y me he tropezado con un enlace que no funciona; ya sabes que no suelo pasar por alto estas cosas...
Deseo, como siempre, que no te moleste, y deseo, también como siempre, contar con tu agradecimiento.
Deseo, asimismo, que a partir de ahora sepas apreciar la sutil diferencia entre la palabra "diseo" y la palabra "dise(ñ)o", pues es precisamente lo que hace que el enlace no funcione. :D
Es el segundo enlace de la columna de la izquierda de la lista que hay al principio.
Saludos afectuosos.
Como siempre, no me molesta y además tengo una vez más que agradecerte el aviso.
ResponderEliminarArreglado. Feliz Año Chacien.
test
ResponderEliminarbuenas tardes. A mi no me aparece la línea: H2.DATE-HEADER. Puedes echarme una mano?. Mi plantilla es la son of moto de blogger.
ResponderEliminarMuchas Gracias
Hugo, es que tus entradas no llevan fechas ¿quizás lo que quieres es que aparezcan?
ResponderEliminarSi es así, lo primero es que compruebes si en Diseño > Elementos de Página > Bloque "Entradas del blog" > Enlace "Editar", tienes marcada la primera línea de las opciones a configurar, que es precisamente la que permite mostrar la fecha de los posts.
Buenos días.
ResponderEliminarLo primero, darte las gracias por tu rápida respuesta.
Continuando, te comento, lo que es realmente extraño es, que donde tu me dices tengo marcado fecha, publicado por, en, comentarios y etiquetas y no me sale nada en la entrada. No sé por qué sera debido. Es por eso por lo que estaba interesado en poner la fecha tipo calendario para que por lo menos me apareciera de algna manera.
Lo de la fecha tipo calendario ya es un poco más complicado de explicar aquí, pero si quieres volver a tener fechas, inserta
ResponderEliminar<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
después de
<div class='blog-posts hfeed'>
Luego, una vez compruebes que funciona, mueves esas líneas insertadas allí dónde te interese.
He colocado las lineas que me has dicho en dnde me has indicado pero siguen sin aparecerme las fechas. ¿A que puede ser debido? HE intentado cambiar de plantilla pero tampoco me salen. Sólo lo consigo cuando pongo la plantilla clásica, pero pierdo mi nueva imagen.
ResponderEliminarNo te sabría decir, porque ahora mismo no están en tu plantilla. Ponlas y me avisas.
ResponderEliminarYa he colocado las líneas que me has dicho pero sigue sin aparecer la fecha!!! No se que pasará. Quizas tengas alguna solución. De todas maneras muchas gracias.
ResponderEliminarSigo sin verlas. No están en tu plantilla.
ResponderEliminarA mi si me aparece y lo he puesto justo detrás de deonde tu me has dicho: div class='blog-posts hfeed' A lo mejor es por eso que no aparece la fecha. Por que yo lo veo en el Html y a ti no!!!
ResponderEliminarEsto es lo que tienes, pero sin lo que está marcado en negrita.
ResponderEliminar<div class='blog-posts hfeed'>
<h2 class='date-header'>#06/04/10</h2>
<!-- google_ad_section_start(name=default) -->
<div class='post-heading'>
<a name='4692768781849410864'></a>
<h2 class='post-title entry-title'>
<a href='http://hattrick-friends.blogspot.com/2010/04/fin-temporada-29.html'>Fin Temporada 29</a>
</h2>
</div>
Y en el código fuente, si bien se interpreta la variable y se convierte en una fecha, al menos los DIV y la clase se tendrían que ver. No puede ser que esté y no lo vea... creo ;)
Me gustaria que pudieses acceder a mi HTML para que veas que si lo tengo puesto. Pero no se como poder hacerlo. Podrías decirme com te puedo enviar mi Html para qeu me lo compruebes.
ResponderEliminarSiento mucho la brasa que te estoy pegando, pero creo que al final lo solucionare. Mi correo es hugofuentesgarcia@hotmail.com.
Muchas Gracias de nuevo.
Vale Hugo, el fallo fue mío. El lugar dónde te dije, estaba fuera del bucle principal de Blogger (LOOP) y por eso no se veía. Hay que poner ese código justo después de
ResponderEliminar<b:loop values='data:posts' var='post'>
Luego ya lo mueves dónde quieras, ¡siempre entre esa línea y </b:loop>!! :D
Hola, Olonman. Lo primero gracias por este blog: la Biblia.
ResponderEliminarEstoy aprendiendo poco a poco gracias a tus consejos.
Ya cambié el fondo del psot y ahora estoy con la fecha. Te dejo dos blog para que mires mi problema.
En este, la fecha me cuadró bien con la imagen ajustando margin y padding
http://cuentoschaparros.blogspot.com/
Pero en este otro no hay manera de conseguirlo, y no sé por qué.
http://tallerdecuentosdesgenerados.blogspot.com/
¿Podrías ayudarme?
Gracias de antemano.
Carlos, en primer lugar, el motivo de que uno cuadre y el otro no, es porque usas tamaños de fuente diferentes. Deberías hacer más pequeña la letra de la fecha del segundo blog que citas.
ResponderEliminarDe todas formas esa plantilla la has hecho con el nuevo diseñador y eso quiere decir que no es fácil hacer modificaciones.
Por ejemplo, he visto una clase que puede que afecte a la h2.date-header. Es
.date-header span {
background-color: transparent;
color: #000000;
padding: inherit;
letter-spacing: inherit
}
Tu fecha está metida dentro de una etiqueta span y eso hace que ambas afecten al formato de tu fecha. Prueba a cambiar esta última para ver cómo afecta a la fecha.
En ambas hay un padding y puede que uno interfiera en el otro, por lo que otra opción podría ser suprimir los span de la parte HTML de la fecha o directamente quitar el trozo que reproduzco.
Gracias, Oloblogger por tu respuesta. Hice algunos cambios, digamos que artesanales y quedó más o menos, pero voy a intentarlo con tu solución.
ResponderEliminarGracias por estar siempre ahí.
Hola Oloman... pasaba por aquí para molestar como siempre. Resulta que quiero poner fechas a mis entradas. Lo único es que deseo poner las fechas al final de cada entrada y no al principio, como lo hace blogger por defecto... alguna pista para eso?
ResponderEliminarGracias por tu colaboración...
Saludos desde Colombia.
Daniel, tendrás que buscar estas tres líneas que son las que "imprimen" la fecha:
ResponderEliminar<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Una vez localizadas, las cortas de dónde te salen y las pones dónde prefieras, por ejemplo dentro del DIV post-footer.
¿Cómo hago para poner la fecha debajo del titulo de las entradas? Quería cambiar también el tamaño de la fuente para ponerlo en pequeño, es que sino quedaría poco estético. Es una de las nuevas plantillas de blogger, te dejo la dirección para que veas: http://madridistascr9.blogspot.com/
ResponderEliminarGracias de antemano ;)
Madridistacr9, primero tendrás que conseguir que salga la fecha y luego moverla.
ResponderEliminarEstás utilizando un script con una función que se llama UltimaFecha y ese lo has puesto tú a mano con seguridad. Te falta insertar el código del script en la página. Repasa el post del que sacaste ese truco.