JMiur [E]

Meses buscando la forma de modificar la forma en que se muestra la fecha de los posts en Blogger e intentar algo similar a los calendarios gráficos utilizados por WordPress y siempre chocaba contra la misma pared, no podía extraer la fecha que se encuentra en data:post.dateHeader. Si pudiera leerla tal y como la muestra, como una cadena e texto, el resto es relativamente sencillo ... pero nada.

Mi sorpresa fue mayúscula cuando me encontré con un artículo en BW que conseguía hacerlo, usando más o menos el mismo criterio que yo había imaginado pero ... mejor ya que este, si funcionaba. Obviamente, yo estaba utilizando mal alguna sintaxis y mis fracasos eran rotundos.

Gracias, gracias, gracias. A partir de su código, empecé otra vez y aquí está los resultados.

Para lograr que esto funcione, necesitamos hacer varias cosas bastante sencillas y tratar de entenderlas ya que "cada plantilla es un mundo" y , seguramente, cada usuario deberá hacer los ajustes que considere necesario.

Primero que nada, debemos establecer el formato de la fecha que vamos a utilizar en el blog en OPCIONES FORMATO. Allí, aparecen una serie de posibilidades:

Formato de cabecera de fecha

De todas ellas, NO podemos seleccionar las que incluyan un carácter coma ni tampoco las que poseen el texto "de" porque nos complicaría la vida. Si bien las que no contienen el nombre del mes pueden ser usadas, en los ejemplos siguientes vamos a utilizarlos así que el formato, debe incluir ese nombre. De tal manera, hay sólo dos posibilidades: 06-jun-2007 o 06 junio 2007.

La segunda, requiere que "cortemos" el texto para evitar que si el nombre de los meses es muy largo, el gráfico se descompagine. Así que, personalmente, me quedo con la primera posibilidad que nos va a mostrar el mes con sólo tres caracteres: 06-jun-2007. La señalo y guardo la opción

Este texto es el que escribe Blogger por medio de <data:post.dateHeader/>. Como se ve, está formado por tres partes, separadas con un guión. JavaScript, como casi cualquier lenguaje de programación, posee una serie de funciones o métodos que nos permiten manipular cadenas de texto. Una de ellas, llamada split(), separa las palabras, guardándolas en una matriz de datos. Para que pueda separarlas, debemos indicarle cuál es el delimitador (el carácter de separación) que utilizamos. Puede ser cualquiera o ninguno, en cuyo caso, el carácter por defecto, será el espacio.

Si se quieren más detalles, hacer click para expandir.


Aunque los detalles para cada ejemplo serán diferentes, para que se entienda la idea, la rutina JavaScript básica es algo así:
<script type="text/javascript">
function calendario(cual){
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
fyear = "<div class='caleanio'>"+lafecha[2]+"</div>";
document.write(fmonth+fday);
}</script>
A esta función, le pasaremos una cadena de texto cual que separará en tres partes. contendrá el número del día, lafecha[0]lafecha[1] el mes (tres caracteres) y lafecha[2] el año.

Cada "pedazo", se escribirá en la página, con una clase CSS especial (caledia, calemes y caleanio) que le dará el formato que deseemos.

Y una definición básica del estilo, sería esta:
<style type="text/css";gt;
.calefecha {
float: left;
text-align:center;
background: transparent url(URLimagen);
... propiedades de margin, padding y fuente ...
}
.calemes {... propiedades de margin, padding y fuente ...}
.caledia {... propiedades de margin, padding y fuente ...}
.caleanio {... propiedades de margin, padding y fuente ...;}
</style;gt;
Como las posibilidades de diseño son infinitas, voy a poner los códigos necesarios para algunos modelos. En todos los casos, tanto el script como la definición de estilo la agregaremos a la plantilla. Un lugar simple de encontrar es justo antes de la etiqueta </head>.

Una vez hecho esto, es necesario modificar un poco el código de la plantilla, para eso, en EDICION DE HTML, marcamos la opción "Expandir plantillas de artilugios" y buscamos algo parecido a esto:
<b:if cond='data:post.dateHeader'>
   <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
y reemplazamos la parte marcada en rojo por esto:
<div class='calefecha'>
<script>calendario('<data:post.dateHeader/>');</script>
</div>

Modelo sin imágenes

HOJA DE ESTILO

<style type="text/css">
.calefecha {float:left;margin:10px;padding:5px;text-align:center;
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;
background-color:#EEEEEE;border:1px solid #999999;}
.calemes {margin:0px;font-size:14px;color:#444444;}
.caledia {margin-bottom:-3px;font-size:22px;letter-spacing:-1px;color:#444444;}
.caleanio {margin-top:-2px;font-size:16px;color:#444444;}
</style>

JAVASCRIPT

<script type="text/javascript">
function calendario (cual){
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
fyear = "<div class='caleanio'>"+lafecha[2]+"</div>";
document.write(fmonth+fday+fyear);
}
</script>


Set Nº 1 - 50x50
Imágenes de 50x50 en formato GIF. Bajar el ZIP

HOJA DE ESTILO

<style type="text/css">
.calefecha {float:left;width:50px;height:50px;margin:10px;text-align:center;
background-image:url(URL_imagen);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.calemes {color:#FFFFFF;display:block;font-size:12px;}
.caledia {color:#000000;display:block;font-size:20px;padding-top:3px;}
</style>
En todos los casos, debe reemplazarse colocarse la URL de la imagen en la propiedad calefecha.

JAVASCRIPT

<script type="text/javascript">
function calendario(cual){
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
document.write(fmonth+fday);
}
</script>


Set Nº 2 - 46x46
Imágenes en formato GIF transparentes. Bajar el ZIP

HOJA DE ESTILO

<style type="text/css">
.calefecha {float:left;width:46px;height:49px;margin:10px;text-align:center;
background-image:url(URL_imagen);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.calemes {color:#FFFFFF;display:block;font-size:12px;padding-top:2px}
.caledia {color:#000000;display:block;font-size:22px;padding-top:1px;}
</style>
En todos los casos, debe reemplazarse colocarse la URL de la imagen en la propiedad calefecha.

JAVASCRIPT

<script type="text/javascript">
function calendario(cual){
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
document.write(fmonth+fday);
}
</script>


Set Nº 3 - 50x50
Imágenes en formato GIF. Bajar el ZIP

HOJA DE ESTILO (fondo blanco)

<style type="text/css">
.calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left;
background-image:url(URL_imagen);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.caledia {color:#000000;display:block;font-size:24px;padding:15px 0 0 12px;}
</style>

HOJA DE ESTILO (fondo blanco)

<style type="text/css">
.calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left;
background-image:url(URL_imagen);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.caledia {color:#000000;display:block;font-size:20px;padding:13px 0 0 16px;}
</style>

HOJA DE ESTILO (transparente)

<style type="text/css">
.calefecha {float:left;width:50px;height:50px;margin:10px;text-align:center;
background-image:url(URL_imagen);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.caledia {color:#000000;display:block;font-size:30px;padding:3px 0 0 3px;letter-spacing:5pt;}
</style>

HOJA DE ESTILO (transparente)

<style type="text/css">
.calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left;
background-image:url(URL_imagen);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.caledia {color:#004080;display:block;font-size:30px;padding:10px 0 0 9px;}
</style>

HOJA DE ESTILO (fondo blanco)

<style type="text/css">
.calefecha {float:left;width:50px;height:50px;margin:10px;text-align:left;
background-image:url(URL_imagen);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.caledia {color:#000000;display:block;font-size:30px;padding:6px 0 0 6px;}
</style>
En todos los casos, debe reemplazarse colocarse la URL de la imagen en la propiedad calefecha.

JAVASCRIPT

<script type="text/javascript">
function calendario (cual){
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
document.write(fday);
}
</script>
El script es el mismo para todos los modelos.


Todas las definiciones de estilo son similares, calefecha es el bloque total donde se mostrará la imagen y, por defecto está alineada a la izquierda (float:left) pero nada impide alinearla a la derecha (float:right). El valor de margin establece la separación de ese bloque en sus cuatro bordes (10px) y lo mismo hace padding (5px) pero de la separación del contenido. Las propiedades de la fuente son personalizables.

calemes define las propiedades del texto con el mes, caledia las propiedades del texto con el día (un número), y caleanio las propiedades del texto con el año (un número). La fuente está definida en calefecha pero podrían usarse diferentes fuentes para cada una. Lo único que hay ue tener en cuenta es que al modificar el tipo o tamaño de fuente, deberá modificarse la propiedad margin de estas clases para ubicar los caracteres donde uno quiera.

Por último, lo más probable es que al insertar la fecha como imagen gráfica, debamos retocar la posición de los títulos. Esto, por general se encuentran dentro de un etiqueta <h3 class='post-title'> y sus propiedades se encuentran en las definiciones de estilo e la plantilla:
.post h3 {
margin: arriba derecha abajo izquierda;
padding: arriba derecha abajo izquierda;
... otras propiedades
}
Deberemos probar modificando los valores de la propiedad margin para ubicarlo donde deseemos y, eventualmente, con los valores de la propiedad padding.

Una vez incluidos todos los códigos, todo esto, podemos hacerlo utilizando VISTA PREVIA, sin necesidad de guardar la palntilla hasta que estemos satisfechos con los resultados obtenidos.

205 comentarios:

CaTa  

Pucha, yo quiero tener mi fecha asi, pero creo que necesito aprenderlo con manzanitas,snif...
Me queda grande la explicación...
saludos

JMiur  

Vamos, no es tan difícil, ¡un poco de valor y espíritu aventurero! ;)

Cualquier cosa, envíame un mail y vemos como puedo ayudarte :)

CaTa  

Yaaa..

Darwin  

Desde luego las fechas así quedan muy bien, con un estilo que se sale del clásico, y de eso se trata. He de repasar a conciencia tu explicación para ver si yo también saco ese formato.
Saludos desde Madrid

JMiur  

Suerte en el intento. Recuerden que seguramente requieren ajustarse las propiedades padding y margin porque cada plantilla es diferente.

No tengo inconveniente en responder consultas por mail pero, adjunten la URL de su blog :D

Gem@  

Pues no sabía que buscabas ese dato, yo hace tiempo que lo expliqué en mi blog, el dato también lo tomé de BW.
Buena entrada si señor, merecedora de un aplauso.

JMiur  

Internet es increible, probablemente, estén todas las respuestas pero lo difícl es acertar con la pregunta adecuada que nos lleve al lugar indicado :D

Renton  

Una cosa... cómo se hace eso de "Leer más..."? me iría bien para textos que son muy largotes...


Renton

JMiur  

Hay una explicación AQUÍ.

Cualquier cosa, envíame un mail y tratamos de resolverlo.

Pere  

Hola.
Después de pelearme un buen rato con tu nuevo estilo para la fecha de las entradas, finalmente he conseguido aplicarlo en mi blog.
Me gusta como queda, gracias.

JMiur  

Acabo de verlo, quedó muy bien :)

Lamentablemente es imposible no "pelearse" con las instrucciones de estilo, no tengo forma de mostrar una solución genérica. Me alegro que hayas tenido la paciencia de intentarlo :)

Renton  

Acabo de entrar y... me ha aterrado!

Ya veré qué hago... como en los dos próximos días estaré un tanto desaparecido, ya te diré algo a partir del miércoles.

Merci amigo!


Renton

JMiur  

Cuando quieras, a tus órdenes :)

kerubin@  

Hola, en las opciones de configuración de mi blog, el formato de cabecera de fecha no tiene el que tu usaste para el scrip, el más parecido es el ejem. 28/11/07 y no queda bien.

Hay alguna forma de cambiar éste tipo de opciones en blogger para obtener el formato de cabecera de fechas? O qué puedo hacer?

Agradezco de antemano tu atención.

JMiur  

En principio, debería estar pero, podría usarse cualquier otra, lo importante es saber cuál es el caracter separador de las fechas y modificar una línea del script.

var lafecha = cual.split('-');

Fijate en ese guión en negrita; ese es el separador y puede colocarse cualquier otro, por ejemplo ña barra separadora de tu caso:

var lafecha = cual.split('/');

kerubin@  

Muchísima gracias, no se me había ocurrido, lo voy a intentar!

OctaviZ™  

Hay alguna opcion para hacer que en los posts de misma fecha no salga la imagen , es que como sabes solo pone la fecha el primer post, los siguientes no pone la fecha se queda en blanco.

Saludos.

JMiur  

Efectivamente OctaviZ, ese es un problema de Blogger. Hay una ampliación de este post AQUI y allí hay una pequeña modificación para forzar a que Blogegr coloque las fechas en todos los posts y no aparezca el calendario en blanco.

Lucía  

Hola,

Soy un poco novata y siguiendo todos los pasos, casi consigo tenerlo, me queda elhuevo perfecto y lo único que me falta es el calendario.

Creo que es porque no subo la URL de la imagen, pero es que no sé cuál es!

Seguro que es una pregunta muy tontorrona, pero cuál es la URL de la imagen?

JMiur  

La URL de la imagen es la dirección donde está alojada, a donde la hayas subido.

Si es a Blogger, sera alco como:
http://......../......../nombre

Lucía  

hola, soy yo otra vez. Como ves, aunque no consigo hacerlo sigo peleando.

Lo que no sé es dónde o cómo puedo subir una imagen a blogger. todo lo demás, consigo hacerlo, pero no sé subir la imagen y no puedo poner un enlace.

¿Me puedes echar una mano?

Gracias!

JMiur  

Las imágenes las subes desde un post cualquiera.

Lo mejor, es crear un post especial para eso. Creas un post nuevo, click en el botoncito de imágenes y listo.

Te aparecerá el código y allí lo único que necesitas es la dirección de la imagen.

Guardas el post como borrador y lo usas cada vez que quieras.

Otra posibilidad es usar algún servicio externo como ImageShack o Photobucket.

Luis  

Que tal señores de vaganbunda hace tiempo buscaba esta explicación. Lo he intentado en mi blog, todo sale bien excepto que le imagen no me sale, si me pueden ayudar. Gracias!
www.elnegociopropio.blogspot.com

JMiur  

Lo que no logro ver es si en este momento está aplicado en alguno de tus blogs.

Luis  

Que tal, revertí el efecto porque no me salía, lo quería aplicar en elnegociopropio.blogspot.com. Subí la imagen la coloque donde indicas sin embargo no sale el grafico, todo lo demás sale perfecto.

JMiur  

Lo ideal sería que la colocaras aunque no funcione para que pueda ver el código que se genera. Por lo general, el problema es sencillo de resolver.

Si puedes hacerlo, me avisas.

Luis  

Gracias! ya coloque el código, la url de la imagen (alojada en blogger) y ya está lista me sigue dando el error, lo dejo para que lo veas, esta en: http://elnegociopropio.blogspot.com

JMiur  

Perfecto, ahora está claro; el problema es que la imagen es inaccesible. Fíjate sólo en la parte final de esa dirección:

/s1600-h/almacpurp.gif

y cámbiala por esta:

/s00/almacpurp.gif

Luis  

Muchisimas gracias, la ultima fecha no me aparece pero ya la revisaré. Te incluire en mis enlaces, y te agradesco bastante. Exitos!

TOTEM  

Muy buen aporte, y e aki los resultados: trivial-cs.blogspot.com
Pero, como verás; aun tengo el problema de la ubicacion de los títulos... puedes decirme porfavor como corregis eso.

PD. Sirvio de mucho, gracias

JMiur  

Acabo de verlo pero, no sé exactamente que quieres hacer. De todos modos, hay una clase CSS que controla los títulos de tu plantilla:

.post-title {
font-size:125%;
font-weight:bold;
line-height:1.1em;
margin:0pt;
padding:0pt;
}

Si lo que quieres es desplazarlos, verticalmente, deberás modificar el padding; por ejemplo:
padding:30px 0 0 0;
lo mostaría más abajo.

Vagalume  

Hola...

Hace tiempo buscaba como cambiar lo de la fecha y gracias a tu post, lo he conseguido.. a medias. Aún tengo un pequeño problema, no consigo que salga el fondo ni el texto de la fecha centrado, me temo que no le hace caso a la función... .calefecha {float:left;margin:10px;padding:5px;text-align:center;
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;
background-color:#EEEEEE;border:1px solid #999999;}

Por que???

JMiur  

Vagalume:

Lo que tienes es un pequeño error de sintaxis. A ver si logro explicarlo. En la plantilla, hay sector:

<b:skin>
............
</b:skin>

allí van las propiedades CSS pero, también pueden colocarse así:

<style type='text/css'>
............
</style>

El error es que la etiqueta <style> </style> NO puede estar dentro de la otra.

Esto es erróneo:

<b:skin>
............
<style type='text/css'>
............
</style>
</b:skin>

Elimina esa parte en negrita.

Ulysses Nafate  

Hola :D
pues nada más
para volver
agradecerte por el tip
me salio a la primera :D
bueno seguire leyendo tu blog
a ver que mas encuentro jeje
saludos desde Chiapas, Mexico

PD: http://ilimboz.blogspot.com/

JMiur  

Saludos, Ulysses :D

KnxDT  

Excelente JMiur, gracias a tu excelente (y bien explicada teoría) pude hacerlo usando los otros formatos, en mi caso el similar a este "miercoles 23 de julio de 2008" donde usé un lacadena.split(' ') y los elementos 1, 3 y 5 del arreglo aunque ... es obvio que lo sabes.

Muy bueno. Saludos ;)

JMiur  

Sí, es cierto; cambiando el script es posible usar cualquier formato; basta saber cuál es "cada parte".

Gabriel  

¿Hay alguna manera de que este hack funcione también en Firefox? De acuerdo a las pruebas que he realizado hasta ahora, en Firefox la fecha aparece a la izquierda (en mi caso) en vez de a la derecha como debería, y el gráfico tampoco aparece.

JMiur  

Salvo contadísimas excepciones, todo lo que aparece en el blog sirve en Firefox tanto como en IE.

En tu caso particular, veo dos errores:

#fecha {
{
float:right;width:46px;height:49px; .......
}

Hay dos llaves abiertas en la declaración.

Por otro lado, se define a fecha con un ID y eso es incorrecto porque el valor de los atributos ID deben tener un valor único (no debería haber dos con el mismo nombre). Lo razonable sería cambiarlo por una clase:

.fecha {
float:right;width:46px;height:49px; .......
}

Y en el HTML, en lugar de:

<div id="fecha">

poner:

<div class="fecha">

Gabriel  

Gracias, Jmiur. Ahora parece que SI funciona con Firefox.

Gabriel Schvartz  

JMiur, el error surgió desde la fuente donde encontré (y apliqué) el truco: http://blogandweb.com/blogger/persolizar-la-forma-en-que-se-muestra-la-fecha-en-blogger/

JMiur  

Me alegro que se solucionara, Gabriel :D

conde-cristo.com.ar  

mi pregunta es, si puede eliminar la fecha del url de blogger, por que me figura asi

http://mipagina.dominio/fecha/mes/post

y quiero que figure

http://mipagina.dominio/post

que devo hacer para que figure asi

JMiur  

No, eso no puede eliminarse; es parte del sistema y no hay manera de configurarlo.

Cat  

Hoola! Intenté hacerlo pero por lo visto la plantilla que tengo en mi blog no muestra la fecha o algo asi. No soy muy buena en ese lenguaje xml pero me gustaría saber si hay alguna forma de hacer que aparezca la fecha en mis posts sin tener que cambiar la plantilla.
Muchas gracias (:

http://decibelium.blogspot.com

JMiur  

Fíjate en la Configuración de Blogger y también en la primera solapa de Diseño. Allí, haz click en Editar el elemento Entradas del Blog donde están las opciones.

Si todo eso es correcto, es posible que no esté en la plantilla aunque parece raro ya que se ve la hora de los posts.

Sharck_Bloody  

hola, bueno, hay un problma que va mas haya de mi tolerancia, ya que me costo quitar toda la personalizacio que le hice a la fecha para que se solucione y sigue alli, el tema es el siguiente, la fecha se muestra solo en el primer post, y no logro que s vea en todos, por ejemplo si en la pagina principal hay dos post el primero tiene fecha y el segundo no, espero que me puedas responder, grasias de antemano

JMiur  

Fíjate en este post.

Sharck_Bloody  

grasias loco!!!

HaCk CrAcK  

Como haria para poner una imagen por cada fecha, pero que este incluido en la imagen el mes y la fecha?. Ocea que si es 10 de agosto ponga la imagen que tenga 10 de agosto

JMiur  

La imagen es una combinación de fondo y texto. El texto es el que "escribe" la fecha.

HaCk CrAcK  

si eso ya c, pero si quiero poner una imagen incluido la fecha y el dia en la imagen. Como haria para poner una condicion de que si es tal fecha muestre tal imagen?

JMiur  

Tendrías que tener todas esas imágenes y algún script especial que las cargara, no sé, es algo en lo que no he pensado en absoluto.

HaCk CrAcK  

Ok. vere si encuentro algo de info en Google, aunque ya eh buscado y no eh encontrado nada.
A seguir buscando se a dicho

Grupo DINAMO  

A mi tambien me costo un monton pero lo hice y me quedo bien, incluso me atrevi a hacerle cambios y me gusto el resultado.

Juno  

Hola, quisiera darte un poco de lata con algo, me gustaría que en mi blog, cada que escribieras los caracteres de un icono gestual, mostrara la imagen, he intentado con el código de blogger emoticons, pero no me ha dado resultado, crees que podrias ayudarme?

JMiur  

Una posibilidad (la que yo uso) es utlilizar un script de Greasemonkey en Firefox: ESTE.

Otra posibilidad, un poco más complicada, es modificar el script de emoticones en los comentarios (habría que ver en que blog lo quieres colocar para saber el nombre del DIV que hay que leer).

Gem@  

Mi pregunta no va con los calendarios, pero si con la fecha.
Disponemos de dos sitios para añadir la fecha una es arriba de la entrada y otra en el posfooter.
La pregunta es ¿puedo eliminar de la plantilla la parte que añade la fecha arriba de la entrada respetando la de abajo?

JMiur  

Sí, Gem@, son independientes y podemos mostrarlas u ocultarlas sin necesidad de tocar el código. En Elementos de la página, si editas el elemento Entardas del blog aparecen ambas y basta tildarlas o destildarlas.

En el código, la de arriba suele estar en:
<h2 class="date-header"> .......

y la de abajo en:
<span class="post-timestamp"> .......

Gem@  

A eso me refería a eliminarlas de la plantilla para que no deje ese espacio vacío entre los títulos de las entradas.
(Me refiero al sistema que tengo de mostrar los títulos cuando clicamos en una etiqueta)
Miraré esa parte de h2 class="date-header ;)

JMiur  

Me parece ver que lo has sacado ¿puede ser?

Gem@  

Así es, pensé que ese espacio disminuiría al eliminar la fecha pero lo veo igual :(

JMiur  

¿Cuál espacio exactamente?

Gem@  

Gracias ;)

Kenneth Jack  

Epale...Saludos...este post lo tenia marcado desde hace dias...esperando tener tiempo suficiente para hacerlo con calma, pues no sabia por donde empezar y la ideas no es preguntar por cada paso, hay que intertar hasta no poder...yo me tuve que ayudar con un post de gema para saber donde iba el estilo/css/hoja de estilo Y el script...en una minima me salio como tiene usted su fecha(no me gustan los cartelitos)solo que el mes salia de primero...movia la parte del dia encima de la del mes pero nada..bueno es un detalle pequeño comparado a como me sale en el blog(el de la minima es de prueba)...para no alargar vealo usted mismo y me dice que hago...GRACIAS DE ANTEMANOS...

JMiur  

Kenneth Jack:
No veo que esté el script en el blog. Veo la parte del CSS y el espacio para colocarlo pero no el script que esrcibe la fecha.

Kenneth Jack  

listo ...habia colocado dos veces el css creyendo que era el script...ahora como le hago para colocarlo a lado del titulo de la entrada o sino como el suyo y si no es mucha molestia parece que tengo algo de mas,aparece arriba de la C de callao( este --> ),coloque una copia y ese detalle no aparece,sale despues de agregue el truco...he tratado de quitarlo pero que me sale un msj en ingles que creo que dice que esas -- van ahi, pues las colocos y si me da vista previa...Saludos y Gracias de antemanos...

JMiur  

Kenneth Jack:

Para colocar el calendario al lado de los títulos debes hacer dos cosas. Primero, agregar una definición de CSS más junto con las otras; algo así:

div.calefecha {width: 50px; float: left;}

width puede ser otro valor. Y luego, cambiar una propiedad que ya existe en los títulos:

.post h3 {
..............
allí dice margin: 0 5px;
y lo cambiamos por:
margin: 0 5px 0 40px;
el valor de 40px es la separación entre el calendario y el título y también es un valor aproximado y puede se cualquier otro.

Lo del símbolo --> es más complicado de encontrar online pero, me parece que lo que ocurre es que has colocado esto dentro de <b:skin>

<style type="text/css">
.............................................
</style>

Y esas dos etiquetas de STYLE, deben eliminarse ya que dentro de <b:skin> y </b:skin> no se colocan etiquetas (cosas que empiesan con el signo < )

Kenneth Jack  

Gracias..ya logre acomodarlo y tambien borre el exedente...ahora vere el que arregla la fecha en dos post del mismo dia..Saludos...

Vanesce  

Buen post, aunque prefiero tener la fecha con formato normal, pero que tendría que hacer para que se muestren las fechas de las entradas del mismo día?
No sé porque pero si publico por ejemplo 3 entradas hoy, en la página principal solo se ve la fecha de la primera entrada.
Gracias

JMiur  

Para eso, podrías fijarte en este post.

atajar  

hola JMiur tengo un gran problema con la fecha ,resulta que no me sale actualizada ,es decir hoy es día 14 y a mi me sale día 12 ,por favor me hechas una mano como siempre gracias y un saludo

JMiur  

No hay nada en la plantilla que haga eso. Revisa que la configuracón de las fechas sea correcta; tanto en Blogger como en la PC.

atajar  

en la pc esta correcta y en blogger tal y como lo puso rosa en su blog me estoy volviendo loca pues ayer lo tenia bien y hoy me ha salido asi

JMiur  

Para verificar que la configuración es correcta y descartar cosas. Crea un nuevo post. En Opciones de entradas, deberías ver la fecha y hora exacta. Publícalo y fíjate si la fecha de publicación coincide con al fecha del editor.

atajar  

ahora mismo lo pruebo y te digo , graciassssss;)

atajar  

eres un genio el problema estaba en Opciones de entradas estaba mal ,gracias por estar siempre ayudando un abrazo :P

JMiur  

Me alegro que lo resolvieras :D

Roudy  

JMiur, parece que tienes un error de sintaxis en el Set Nº 1 - 50x50
En el Javascript
La siguiente linea:
function calendario50x50(cual){

JMiur  

Si es eso de 50x50 sí, parece que quedó ahí y sobra :D

Yhonny E  

Despues de tanto busca, y hallar lo que esperaba. leo el articulo y me entra por los ojos pero como que rebota, en fin, para mi la explicaicon esta como en chino.nunca senti, primero has esto ahora lo otor. luego vamos a esto..nada.como empiezo.no se.pero si me cale todo el Articulo Sr Miur.quisiera en tener ese Efecto.

por cierto.que numero de color es este que tiene de fondo los comentarios.como un ris obscuro.me peude decir el codigo.por que eso de utilizar un azul tinto.o medio obscuro para el fondo de las entradas.me tiene aburrido.jejexd.con este resaltan mas la letra en el post.saludos!

JMiur  

No sé exactamente a cual color te refieres ¿será #2E353D? Hay un sitio donde colas una URL y te da una lista con los colores utilizados en ese sitio: I like Your Colors. Es una manera muy sencilla de tenerlos a mano.

Si usas Firefox, también hay una extensión muy simple llamada Colorzilla que sirve para eso.

Células Madre Adultas  

Hola, me gustaria eliminar las fechas de los post, si me puedes ayudar te lo agradeceria de gran manera mi msn es stemtech01@msn.com ...Saludos...

JMiur  

No sé en cuál de tus blogs quieres hacerlo. En términos generales, bastaría eliminar este dato o la etiqueta que lo contiene:

<data:post.dateHeader/>

DAyara  

Hola.
Gracias por los tutoriales, me han servido de mucho.
Un saludo.

JMiur  

Me alegro que sirvieran, DAyara :)

Francisco Javier Díaz  

Cuál es la URL que se debe insertar, una imagen de fondo o cuál otro... esa es mi duda.

http://revistasemifusa.blogspot.com

JMiur  

La URL de la imagen que quieras usar.

xXx4bN3rxXx  

Como puedo modificar la fecha de esta plantilla Click aqui, estare pendiente de tu respuesta...

JMiur  

No sé qué quieres modificar. Normalmente, en ese tipo de calendario, para que se vea corectamente hay que usar un tipo de formato específico que indica el orden y el separador. El diseñador de la plantilla o el que creo el script debería indicarte cuál es.

Luckitas  

Hola...podrias mirar mi blog? agregue todo pero no me aparece la fecha! nose que puede ser...lo hice primero en un blog de prueba y si me salia bien pero en el principal no me aparece la fecha!!! tienes idea de que es lo que puede ser??

Luckitas

JMiur  

Luckitas: Lo que no veo en tu página, es que esté incluido el script.

Luckitas  

Si lo puse pero capaz que mal ubicado...despues o antes de que estiqueta estaria correctamente agregado el script? y el estilo?

JMiur  

Luckitas:
En el código fuente de tu blog, no veo el script, eso me llama la atención:

<script type="text/javascript">
function calendario(cual){
.............

¿En que parte lo has puesto?

Luckitas  

Hola! ahora ya aparece!!!!! (nose que le pasaba! je)

despues de la etiqueta /head esta el script

Muchas gracias! un abrazo...

Seguire viendo tu blog porque hay muchas cosas que me interesan para el mio...

JMiur  

Ahora sí ya lo veo :D

Jorge Eduardo Olarte  

Excelente post

Sheldon  

holaa m encanta tu blog, siempre lo leo y lo uso para mejorar un poko mi blog.. a mi no me kedo muy claro como tenian que ir todos esos elementos.. yo lo puse asi:

<b:if cond='data:post.dateHeader'>
<div class='calefecha'>
<script>calendario('<data:post.dateHeader/>');</script>

<style type='text/css'>
.calefecha {float:left;width:46px;height:49px;margin:10px;text-align:center;
background-image:url(http://img5.imageshack.us/img5/1514/icalfondom105.gif);
font-family:Trebuchet MS,Arial,Helvetica,sans-serif;}
.calemes {color:#FFFFFF;display:block;font-size:12px;padding-top:2px}
.caledia {color:#000000;display:block;font-size:22px;padding-top:1px;}
</style>
<script type='text/javascript'>
function calendario(cual){
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
document.write(fmonth+fday);
}
</script>
</div>
</b:if>

sin embargo noc xq el primer post no sale cn fecha, solo a partir del segundo post sale la fecha, en el primero (y si le ago clik a un post nomas) solo sale la imagen.. me podrias ayduar cn este problemita??

theall-knowing4.blogspot.com

JMiur  

Para empezar, toda esta parte:

<style type='text/css'>
.calefecha {float:left;width:46px;height:49px;margin:10px;text-align:center;
..............
..............
..............
document.write(fmonth+fday);
}
</script>

Debes quitarla de ahí y colocarla antes de </head> pero, el script debe estar escrito así:

<script type='text/javascript'>
//<![CDATA[
function calendario(cual){
var lafecha = cual.split('-');
.................
.................
document.write(fmonth+fday);
}
//]]>
</script>

Para que Blogger lo acepte sin problemas.

Empieza con eso y seguimos viendo.

León  

este y el escaparate son sin duda los mejores lugares donde aprender todo lo que hace falta para tener un gran blog, definitivamente. Felicitaciones!!! no cualquiera se molesta en ayudar con tanto detalle y preocupación a los que no sabemos nada.

A mi con mi plantilla minima me funciono colocandolo entre /head y body, no me dejaba antes de /head, me llevo un tiempo darme cuenta pero funciono a la perfeccion!!!! millones de gracias, estoy usando el modelo sin imagenes, en realidad solo lo probé, y lo volví a sacar, por que verás, no me gusta como queda con respecto al titulo y al contenido del post. Tenes algun articulo donde dice como alinearlos?? de lo contrario, podrías explicarme donde tengo que modificar para armonizar fecha titulo contenido??? como lo tenes en tus entradas! con el titulo grande y bien acorde al motivo de la fecha! en mi perfil tenes mi blog sino podes escribirme a mi mail que figura también dentro de mi blog, realmente me ayudaría tu respuesta, ando buscando dar un giro bastante radical en cuanto al diseño de mi plantilla.

Desde ya mil gracias por todo!!! segui asi!!

JMiur  

Leçon: No hay una entrada que peuda ayudar con eso porque todo es muy subjetivo. Habría que verlo online, saber cuál es el resultado que quieres obtener y recién entonces buscar las propeidades CSS para diseñarlo.

León  

Ok, gracias!! podrías indicarme entonces cual es el codigo que modifica el titulo de los post???, y yo me encargo de probar y probar colores margenes y esas cosas hasta que quede mas o menos como me gustaria. Un saludo!

JMiur  

León:
En tu blog, el título de las entradas se controla con estas dos definiciones:

.post h3 { ........... }
.post h3 a, .post h3 a:visited, .post h3 strong { ........... }

Y la fecha (tal como está ahora) con estas dos:

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

León  

jaja que pronto, mil gracias, me pongo a investigar ya mismo!!!! :D

León  

Listo, todo a la perfección :D!!!! una última, y para cambiar solamente la fuente del titulo del post, sin alterar las demas?? por que quiero que me quede con la misma font que la fecha

JMiur  

La fuente del título iría en:
.post h3 a, .post h3 a:visited, .post h3 strong { ........... }

por ejemplo:
font-family: Tahoma;
font-size-20px;

Sólo ten en cuenta que Hx por defect es negrita así que si quieres que no lo sea, debes agregar:
font-weight:normal;

León  

Espectacularrr!! quedo todo genial y no podría agradecerte más, pero siempre aparece algo nuevo jajaja, el tema es que muestre los post que muestre por pagina, todos los que le siguen al primero respetan el formato que les di, pero el primero sale dinstinto, y un poco desordenado, que podría ser???? :S

JMiur  

Lo estuve viendo, León y hasta ahora, no le encuentro solución. Hay algo con los márgenes o paddings. Como el primer post no tiene espacio arriba, se genera eso. Por más que le doy vueltas, todavía no sé que contestarte :(

Raul  

Hola JMiur, intento poner el calendario como los del set nº2, todo va bien, excepto por el script, tú dijiste que había que ponerlo encima de </head> pero Blogger me da error porque en el head no puede haber div y el script tiene 2

JMiur  

Raul:
En realidad no tiene DIVs, l oque ocurre es que en la plantilla de Blogegr está prohibido colocar los caracteres < y > incluso dentro de los scripts así que, si vas a pegarlo allí, usa este método:

<script type='text/javascript'>
//<![CDATA[
................. y aquí pegas el contenido del archivo .................
//]]>
</script>

De esa manera CDATA hace que Blogger ignore esos caracteres dentro del script y no de error. Es lo mejor para que los scripts sean legibles y no haya que reemplazar símbolos y comillas.

León  

Bueno no importa ya le encontre una solucion, le cambie la forma de modo que queden todas parejas, alguna vez le contraré la vuelta, mil gracias de todas formas, todo lo demás funciona a la perfección!! es genial esta pagina!

pd: se puede separar el titulo de los elementos de la sidebar del elemento mismo??, por ej. el titulo de mi lista de etiquetas esta casi pegado a la primer etiqueta de la lista y me gustaría modificarlo.

Un saludo!!!

JMiur  

Si. Eso de los títulos es posible. En este momento, todos los H2 tienen las mismas propeidades así que si cambais eso, cammbiarán todas y tal vez no sea lo que busques.

h2 {
............
margin: 1.5em 0 0.75em 0;
}

El valor a cambisr es 0.75em que es el margen inferior.

Puedes hacer dos cosas, crear una definición que sólo afecte a los títulos de la sedebar:

#sidebar h2 {
............
margin: 1.5em 0 VALORpx 0;
}

o puedes hacer una que sólo afecte a uno en especial como el de las etiquetas:

#Label1 h2 {
............
margin: 1.5em 0 VALORpx 0;
}

León  

Hola Jmiur, pequeño problemilla con la fecha, si pudieras pasar a ver, me aparece la fecha con formato dia/mes/año y arriba y abajo de esta fecha me aparece dos veces la palabra undefined... que paso, y como podria solucionarse??? :S Mil gracias desde ya :D

JMiur  

Leon:
Te remito a estos dos comentarios: 1 y 2

Es el mismo problema. Parece que Blogger está haciendo algo raro. En tu caso, fecha que se genera es de este tipo:
16/10/2009 con una barra separadora

así que deberías cambiar el script. en lugar de esto:
var lafecha = cual.split('-');

poner esto:
var lafecha = cual.split('/');

Pero siempre, verifica que en la Configuración, el formato seleccionado sea ese con barras separadoras. Parece que el formato clásico que usaba guiones o ha desaparecido o tiene problemas.

Iori_k  

el formato de fecha ya no deja seleccionar 07-jun-2009

JMiur  

Iori_k: Usa otro tal como digo en el comentario anterior. Voy a tratar de explicar el tema en una entrada para que resulte más sencillo. No sé si es un problema temporal de Blogger o un cambio permanente.

Cristian  

Me aparece un error cuando coloco el script: La plantilla no es válida porque la etiqueta "div" aparece dentro de la etiqueta "head". ¿Qué hago?

Cristian  

Ya esta!! lo arregle colocando el script debajo de la etiqueta body

Iori_k  

gracias ya lo he solucionado fue de mucha ayuda el post

Cristian  

Me quedó perfecto! Aquí lo puedes ver.

Sheldon  

Holaaa.. tengo un problema.. la verdad es que esto ya estaba funcionando bien en mi blog (theall-knowing4.blogspot.com) pero hace una semana me fui de viaje y acabo de volver y al ver mi blog, parece que esto de los calendarios se a desconfigurado! y no se que pudo pasar porque ninguno de los autores entro al blog porque todos estabamso de viaje.. podrias ayudarme?

JMiur  

Fíjate en esta entrada. Al aparecer, Blogger eliminó un formato de fechas y hay que modificar un poco el script.

VK Import  

Hola JMiur!

Estoy buscando solución a algo relacionado con la fecha de los posts.
Yo no quisiera que TODO lo que publico vaya en el Feed de FeedBurner, porque a veces necesito publicar 4 cosas diferentes y es demasiado junto para mis lectores. Tampoco puedo dejarlo como borrador, porque TIENE que estar en el blog (referencias cruzadas de información científico-técnica). Ya probé de poner una fecha antigua... pero FeedBurner o Blogger (uno o ambos) tienen inteligencia necesaria como para SABER que yo lo publiqué ese día... con el consiguiente desastre (mandé un chorro de información sin saberlo... hasta que era tarde para evitarlo!).

Concluyendo: sabes si hay modo de publicar por ej. 4 artículos en Blogger, que uno salga en el Feed y que los otros tres NO salgan?

Desde ya te quedo agradecida,
Karen
www.vkimportltda.blogspot.com

JMiur  

No, VK Import, que yo sepa, no hay nada semejante para poder controlar eso.

Diequel  

Hola Jmiur, te quería hacer una consulta. Se podrá eliminar la fecha e información de posteo a una sola entrada ?. Es que quiero tener una como acceso principal al blog y no quiero que tenga ninguna info adicional, solamente la entrada libre. Desde ya muchas gracias :D

JMiur  

Si, eso es posible, debes agregar en la plantilla algún dato extra para identificar las entradas de manera individual. Algo de eso se muestra en esta entrada.

Tambiíen, si sólo se trata de una entrada, puede hacerse con un condicional. algo así:

<b:if cond='data:blog.pageName == &quot;TITULO_DE_LA_ENTRADA&quot;'>
<style>
... aquí colocas las propeidades para ocultar esa parte
</style>
</b:if>

SS  

Hola, soy SS otra vez, solucioné el tema de ver el calendario copiando el script debajo de la etiqueta body (lo leí de una de las respuestas de alguien que le pasaba lo mismo). Pero el tema es que yo no tengo el formato de fecha que recomendás, o sea, le tuve que poner el del estilo 19 noviembre 2007. Vos explicás que en ese caso tendría un problema de longitud y habría que cortar el mes, pero la verdad es que directamente el calendario está en blanco. Qué es lo que pasa?
Y puse como caracter de separación, un espacio, porque no está separado por guión.

Por favor, ayudame.

http://sonomasdepapa.blogspot.com/

JMiur  

No lo has puesto debajo de la etiqueta <body> sino debajo de la etiqueta </body> y por lo tanto, no funcionará en absoluto ya que la función se ejecuta antes.

Colócala como todas las demás, antes de </head>, usando CDATA:

<script type='text/javascript'>
//<![CDATA[
function calendario(cual){
var lafecha = cual.split(' ');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
document.write(fmonth+fday);
}
//]]>
</script>

SS  

Gracias JMiur por responder con tanta rapidez. Hice lo que me dijiste, pero el problema ahora es que como el mes está entero (supongo que será por eso) se ve mal, el mes no se lee completo (obviamente porque falta cortarlo y no se cómo) y el número aparece demasiado abajo.

Porfis, lo mirás otra vez y me decís? :D

SS  

Bueno, si sabés cómo recortar el nombre del mes, please, avisame. Por el momento, lo que hice para que no quedara desprolijo fue achicar el tamaño de la letra del mes, pero queda demasiado chico y muy "de borde a borde".

Gracias por la ayuda que venís dando con tu blog!

JMiur  

En el código anterior, en lugar de usar:

lafecha[1]

usa esto:

lafecha[1].substr(0,3)

Eso, sólo mostrará los tres primeros caracteres del mes.

SS  

Qué Maestro!!! Muchas gracias, quedó bárbaro.

Saludos.

viamontefc  

que problema puedo tener que solo me muestra el gif y no la fecha texto
http://eldecacampeon.blogspot.com/

JMiur  

En el home del blog, n oveo que esté la fecha por l oque debe faltar el código o estar condicionado de alguna manera. En los posts individuales, la fecha está al lado del título. Es un detalle que no puede verse online.

Alberto  

Hola, buenas. Estoy intentando poner la fecha tal como lo describes y me sale bien salvo por el hecho de que no se muestra el gif. Puedes ayudarme?

JMiur  

No veo el ejemplo en nunguno de tus blogs, Alberto.

Alberto  

Solucionado, ahora ya lo he conseguido. El error estaba en que, al subir una imagen a blogger para utilizarla como gif noo me la reconocia. La subi a imageshack y funciono sin problemas. Un saludo y gracias por el post.

www.santoverdinegro.com  

Jmuir necesito sacar la hora de mi blogger pertengo una plantilla con un HTML diferente, la plantilla se llama Futebol, aqui el blog:

(http://www.santoverdinegro.com/)

Como se lo puedo sacar porque lo unico que he encontrado es para los otros HTML's y no quiero cambiar la plantilla porque es la mejor que he encontrado ¡¡AYUDA-ME!! :(

JMiur  

Agregale una propeidad para ocultarla y con eso lo solucionas sin editar demasiado:

.art-PostMetadataHeader {
background-color:#FFFFFF;
border:1px dashed #D4CCAA;
padding:1px;
display:none;
}

Allí, agrega eso de display:none;

Gem@  

J.Miur se supone que si añadimos esto se debería mostrar el calendario en todas las entradas ¿no?

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>

<div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>


<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

JMiur  

Si, eso se supone. A veces, puede ser que se requira reubicar esa parte pero, en principio, si.

xcape  

3 años depues sigue siendo util.

Solo le cambie los div por span

Muchas gracias http://semexicolibre.blogspot.com/2010/02/ya-tenemos-una-fecha-decente-aqui.html

:D:D:D

Akiles  

Lindo truco, pero lamentablemente me ha funcionado hasta la mitad. No se que error habré cometido, pero justo arriba y abajo de la fecha, me aparecen 2 líneas escritas que dicen: "Undefined"

Me gustaría poder contar con tu ayuda. Gracias

Akiles  

JMiur, definitivamente no me funciona, ya lo he probado de varias maneras hasta en un blog de pruebas y nada. Por favor dime que pudoi haver fallado. Gracias...

JMiur  

No sé donde puede vérselo funcionando ya que tu perfil es inaccesible.

clasificadosoft  

Que excelente post amigo Jmiur, seguí paso a paso todo los comentarios, una pregunta, bueno no ley nada eso creo, bueno, todo bien hasta los scrips, el detalle es donde pongo los estilos, gracias por la respuesta, que maestro hermano.

JMiur  

Los colcoas en cualquier parte antes de &lt/head>

luthier  

genio Jmiur, excelente post, he eliminado lo de la fecha de publicación y autor (en blogger)
El unico incoveniente es que me queda un espacio como una caja (donde antes iba la fecha y el autor).
Mi pregunta sería, como poder eliminar esa cajita también.
muchas gracias

JMiur  

Si me muestras donde puede verse el ejemplo, me fijo; probablemente, es algún div con algún margen pero, tengo que verlo.

luthier  

Gracias por la respuesta jmiur. Mira esta plantilla
http://btemplates.com/2010/blogger-template-helios/demo/

Verás que donde dice "Posted by Claudia On Thursday, October 21, 2010 "
está todo dentro de una cajita rectangular, casi imperceptible.
Como te conté, al autor y la fecha ya lo he podido eliminar, lo que quiero ahora es deshacerme de esa cajita.
Muchas gracias

JMiur  

luthier:
Lo mejor es que busques ese DIV y lo elimines:

<div class='postmeta'>
.......
</div>

Sino, también puedes ocultarlo porque está definido acá:

.postmeta {
.......
display:none;
}

luthier  

Excelente jmiur!!!!!!!!!!!
problema solucionado
Muchísimas gracias maestro!

JMiur  

Perfecto, me alegra que lo encontraras :D

ωI£ÂN®¤§ ™  

Hola como estas, genial el blog, lo unico que no pude hacer fue cuadrar la fecha antes del titulo del post

mi blog de pruebas es este: http://betawilanros.blogspot.com/

JMiur  

Tienes que cambiar propeidades; dependerá del diseño que quieras; por ejemplo:

h3.post-title, h4 {
.................
height:70px;
margin-left:70px;
}

.calefecha {
...............
float:left;
}

L  

@JMiur
hola JMiur gracias por el tuoto me salio exactito pero como haria para que el titulo de la entrada valla al lado de la fecha...Ayudate con eso porfa
gracias de antemano

JMiur  

Para no hacer muchos lios ni cambios en tu plantilla ¿por qué no pruebas manejar la úbicación con position: absolute? Como el título está dentro de un contenedor diferente de la fecha, deberían usarse posiciones negativas; por ejemplo, algo así:

h3.post-title {
left: 65px;
position: absolute;
top: -80px;
}

L  

gracias jmiur
pero..si que soi salado si me salio pero con las entradas de un mismo dia el titulo de la segunda entrada se monta en la parte inferior de la anterior entrada...haaaa que coraje! no tengo idea de que hacer Ayudaaa!! porfaaaa

JMiur  

Entonces, no vas a tener más remedio que reubicar la fecha porque sino será imposible ya que el título de la entrada y la fecha no son parte del mismo contenedor sino de dos diferentes.

Otra alternativa es que le coloques fechas a todas las entradas.

Peter  

Hola Jmiur

Pude implementar lo de la fechas, pero en el IE tant el titulo y el contenido del post se me alinean a la parte izquierda de la imagen y me queda mucho espacio en el borde izquierdo, coasa que no me pasa con fiere fox ni chrome..., he probado varias cosas, una de ellas fue colocar en: .post-body esto "margin-left:-50;". Esto funciona pero me core muy a la izquierda el texto en los otros dos exploradores...tambien probé un comentario condicional pero no me funcionó, tampoco me funciona Clear:Both...no se yo no soy experto. Lo que he aprendido a sido gracias a tu blog.

Por favor, me puedes ayudar; he notado que manejar margenes o posiciones en IE explores es diferentes a los demas navegadores y quiero tener una solucion

mi blog de prueba es http://pvillegasy@blogspot.com
Te agradezco tu valiosa ayuda.

JMiur  

Primero que nada, debes de usar Word para escribie entradas o en todo caso, puedes hacerlo pero no copair y pegar de manera directa ya que en ese caso, se agregarán estilos varios que sbrescribirán los de tu plantilla.

No puede copairse y pegarse desde un procesador de texto de manera directa, lo que se copai y pega debe ser texto plano y sin formato. Si quieres usar algún soft en lugar de los editores del mismo blog, usa Windows Live Writer por ejemplo.

Peter  

Hola Jmiur
Saludos

¿Como puedo cambiar los margenes externos de mi blog?, he buscardo y no he podido.

Gracias

JMiur  

¿A qué llamas márgenes externos?

Spak01  

oye xq no me sale la fecha solo en cuadro mira me ayudas http://colecciondesoftware.blogspot.com/

JMiur  

Eso pasa porque no has cambiado el formato de la fecha tal como indica esta entrada.

Daniel Paredes  

¡Hola, JMiur!
He cambiado el aspecto de la fecha tomando el primero de los modelos que dejaste. Le hice algunas variantes menores y me gusta cómo quedó. Sólo tiene un detalle que probablemente pueda solucionarse: los títulos de las entradas contienen un subrayado (también lo tomé de una entrada tuya) que, ahora, atraviesa el dibujo del calendario. ¿Se puede poner el calendario por encima de esa raya? ¿Se entiende el problema? Si no se entiende, decime si puedo dejarte la dirección aquí o por mail.
¡Saludos, y muchas gracias!

JMiur  

Simplemente establece un ancho para esa etiqueta que por defecto es el 100%, de tal modo que se "corte" antes; por ejemplo:

h3.post-title {
.......
width:450px;
}

Daniel Paredes  

Muchas gracias. Con 460px queda bien. Pero en las entradas donde el título tiene dos renglones, la línea queda más abajo y se nota el corte. Igual es un detalle muy menor. Ya ha mejorado.
Saludos y mil gracias.

JMiur  

No sé cuál es el tipo de diseño que quieres tener de esa parte, cómo quieres ver el borde.

Daniel Paredes  

Cuando es título de un solo renglón, quiero que se vea así:

(jul )
Título ( 1 )
———————————————(2011)

Pero cuando el título ocupa dos renglones, quiero que se vea así:
(jul )
Título título ( 1 )
título (2011)
—————————————————————

:D ¿Sentiende? :S
¡Saludos!

Daniel Paredes  

Bueno, en el mensaje no salió lo que yo había puesto. :) No importa. Tomá sólo como referencia la línea punteada que sería el subrayado del título, y ese 2011 que representaría al rectángulo con la fecha.
Disculpá, JMiur, y mil gracias por la paciencia.

JMiur  

No creo que sea posible hacer eso con esa estructura. Sería más razonable colcoar el borde en el eelemento inferior:

.post-header {
.......
border-top: xxxxxxxx;
clear: both;
}

y darle al título la misma altura que la fecha:

h3.post-title {
.......
float: left;
height: 49px;
}

Daniel Paredes  

Ok, lo intentaré.
Muchísimas gracias.

Daniel Paredes  

JMiur: hice lo que me dijiste y conseguí lo que buscaba. Pero tuve que quitar ese "float: left;" porque el contenido del post se montaba al título. Lo quité y se ve fenómeno; bah, me parece. ¿Perjudica en algo que haya sacado eso?
Muchas gracias por compartir tu saber. ¡Y tu tiempo! ;)

JMiur  

En estas cosas, si funciona es que está perfecto. No hay consecuencias.

Spak01  

saludos me ayudas como le organiso el titulo http://colecciondesoftware.blogspot.com/

JMiur  

No sé qué quieres hacer.

kyosuke rckr  

Hey amigo, como le hago para eliminar el año, dejar el mes arriba, y el día abajo?

Desde ya, muchas gracias.

JMiur  

En el script del ejemplo, el año no se muestra; para poner al revés los otras dos datos, cambair:
document.write(fmonth+fday);
por:
document.write(fday+fmonth);

Eligor!  

Estoy provando algo similar pero me sucede un problema la fecha queda encima del post no sé como podria dejar la fecha al lado del Titulo de la entrada no se que codigo usar :S' Si podrias ayudar Te lo agradeceria Muchisimo Gracias... (http://borrador-j4.blogspot.com/)

JMiur  

<h2 class="date-header"> está afura del DIV con los posts <div class="post hentry"> así que resultará muy complicado moverlo con CSS; conviene que la fecha esté adentro.

Monchys Kapricho Artesano  

Hola muy buena explicación pero no lo consigo... monica2.6@hotmail.com le agradeceria me ayudace.

JMiur  

TEndría que saber qué has hecho o si tienes un ejemplo.

Hor@cio  

Hola JMiur, muy buen aporte y muy buena la explicacion pero no logro hacerlo, ¿será x el tipo de plantilla? o será x q a partir de los 50 somos muy torpes?jajaja, te agradeceria me ayudaras me gusta SET Nº2 AZUL.
Mi blog que esta en proyecto es:www.kokorolive.blogstop.com
Te agradeceria mucho que ayudes a los pobres viejos, lentos de cerebro y pocas neuronas.jajajaja Gracias

JMiur  

En ese blog no veo que haya entradas agregadas, Hor@cio; deberías poner alguna e intentar agregar el ejemplo aunque no funcione y así, puedo verlo online y tratar de ver cuál es el error.

http://www.kokorolive.blogspot.com/

Hor@cio  

Hola JMiur, muchas gracias x responderme, mira, he creado una entrada tal cual me has dicho para q tu veas en que estoy fallando.gracias x tu tiempo.

JMiur  

Lo que veo es que te falta llamar al script.

Reemplazar esto:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

y reemplazamos la parte marcada en rojo por esto:

<div class='calefecha'>
<script>calendario('<data:post.dateHeader/>');</script>
</div>

Además, si vas a utilizar ese formato de fecha, deberás cambair una línea de la función ay que está pensada para formatos de fecha separados por guiones y el que usas está separado por espacios así que si dejas ese, deberás modificar esto:

var lafecha = cual.split('-');

por esto:

var lafecha = cual.split(' ');

Susana  

hola JMiur, hace ya mucho tiempo que no te molesto! pero aquí estoy, en realidad bajé una plantilla que ya tenía puesto la fecha en forma de calendario, pero hay algo que no está bien y por ende no aparece bien en el post. ¿Podría pedirte el favor que revisaras la plantilla? www.lecturasnoobligatorias.blogspot.com si fuera posible para revisarla y decirme qué es lo que tengo que corregir para que se vea correctamente?? Traté de eliminar y poner lo que indicás, pero la verdad que no me sale! desde ya muchas gracias!!!!

JMiur  

Hola Susana:
Lo que ocurre es que debes configurar el formato de la fecha y elegir uno que esté separado por comas; eso lo haces en la primera pantalla de Diseño, editando el gadget Entradas del blog y buscando el cuadro que muestra la hora; si lo despliegas, allí verás los formatos disponibles y lo cambias.

Si no encuentras uno adecuado, seguramente debes ver la posibilidad de que el formato de la hora sea de tipo mes/dia/año y en ese caso, debes modificar una línea del script, la que dice:

var timesplit = timestamp.split(",");

por:

var timesplit = timestamp.split("/");

Maite  

hola.....
necesito imágenes de modelos de calendarios para poner la fecha del blog.
¿me puedes ayudar? gracias

Joomla  

¿El código JAVASCRIPT y HOJA DE ESTILO, se pone también antes de "/head"? Entiendo que la HOJA DE ESTILO puede ir separada en el apartado CSS de propiedades de la plantilla, pero ¿el JAVASCRIPT dónde va?

JMiur  

Blogger no tiene una hoja de estilo separada que sería un archivo de extensión CSS. Eso que se ve en el editor de plantillas es sólo una forma distinta de agregar las reglas de estilo que son parte de la plantilla misma así que una vez agregadas esas reglas, también las verás en edición HTML, entre <b:skin> y </b:skin>

Es indistinto hacerlo de modo directo, escribiendo en la plantilla o usando ese "editor" especial; en ambos casos será lo mismo que agregarlas con etiquetas HTML standard <style> </style>

En principio, todas las reglas de estilo se colocan antes de </head> aunque, llegado el caso, pude haber excepciones.

Los scripts se agregan en la plantilla misma, en gadgets o en las entradas, depende de lo que hagan así que debes seguir las instrucciones que tengan ya que no todos se deben ubicar del mismo modo; algunos requieren cargarse antes, otros después y en otros es indiferente.

Retro Scooter Garage  

hola, se me escapa totalmente a mis conocimientos ¡¡ llevo noches intentandolo pero no me aclaro al igual que insertar una imagen abajo de cada entrada. si pudieras ayudarme ....
mi blog es retroscootergarage.blogspot.com
o pasame un correo a raultb@hotmail.com y te paso la clave
porfa... gracias

JMiur  

Lo siento pero entrar en otro blog a colocar cosas es una responsabilidad que de ninguna manera quiero asumir.

EPIFANIO QUIROS TEJADO  

Algo no funciona. Lo he probado todo. Incluso he creado una blog nuevo de pruebas y no hay manera. Al guardar la plantilla me sale un mensaje que me dice: "No hemos podido guardar tu plantilla Por favor, corrige el siguiente error y envía la plantilla de nuevo.
La plantilla no es válida porque la etiqueta "div" aparece dentro de la etiqueta "head".Y aquí ya me atasco y no se cual será la solución. Ni con tus consejos, ni con los de Gema ni con los de El potro. Debo ser cada día más manazas. Saludos y gracias por tu atención.

JMiur  

Si el script lo vas a agregar en la plantilla, siempre agrega CDATA de este modo:

<script type="text/javascript">
//<![CDATA[
.................... aca el código
//]]>
</script>

EPIFANIO QUIROS TEJADO  

Creo que lo he hecho todo según tus instrucciones en este blog de pruebas, pero no hay manera. No sé qué hago mal. ¿Me podrías decir tu dónde meto la pata? Gracias.

EPIFANIO QUIROS TEJADO  

Perona, este es el blog de pruebas: http://probarfol.blogspot.com.es/

JMiur  

Probablemente, el problema es que tienes un error en el script, dice:

fmonth = "<div class='calemes'>"+lafecha[1]+.slice(0,3)"</div>";

y debería decir:

fmonth = "<div class='calemes'>"+lafecha[1].slice(0,3)"</div>";

EPIFANIO QUIROS TEJADO  

Lo he corregido y sigue igual. Será cuestión de la plantilla????
Gracias por tu tiempo. Saludos cordiales.

¿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