Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Fecha en una casilla como la del balcón

Con este truco podrás tener la fecha estilo casilla como la que ves en todas las entradas del balcón.

Antes de comenzar debes cambiar el formato de la fecha.

Para cambiarlo dirígete a Configuración > Formato




Una vez allí busca el menú desplegable de Formato de cabecera de fecha y selecciona la siguiente opción:




Cuándo hayas seleccionado la opción y Guardado cambios podrás empezar con el truco.


Dirígete a Diseño > Edición HTML y expande la plantilla de artilugios.


Busca la etiqueta <body> y justo debajo pégale este script:

<script>
function Fecha_casilla(d){
var da = d.split(&#39; ');
dia = "<div class='dia'>&quot;+da[0]+"</div>&quot;;
mes = &quot;<div class='mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
anio = &quot;<div class='anio'>&quot;+da[2]+"</div>&quot;;
document.write(dia+mes+anio);
}
</script>

Ahora busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que aplicarán el estilo:

#Casilla {
text-transform:capitalize;
font-family:Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
margin:0 8px;
float:right;
padding: 4px;
color: #626364;
display: block;
border:#919191 1px solid;
background:#e8e8e8;
}

.dia {
display: block;
font-weight:bold;
font-size: 16px;
}

.mes {
font-weight:normal;
font-size: 10px;
display: block;
}

.anio {
font-weight:normal;
font-size: 10px;
display: block;
}

Por último localiza la línea <data:post.dateHeader/> y sustitúyela por esto:

<div id='Casilla'>
<script>Fecha_casilla('<data:post.dateHeader/>');</script>
</div>

Guarda cambios y listo.

Si tienes alguna duda o quieres personalizar un poco más la casilla y necesitas ayuda házmelo saber. ^_^

Véase también: Fecha estilo calendario en el blog

Tutorial e imágenes por Jaime Trujillo Escobedo

Shirubia dice...

Hola Jaime!

Ya aplique este truco en mi blog, me encanto! mil gracias!

Saludos!

Jaime Trujillo Escobedo dice...

Shirubia! ¡cuánto me alegra que lo hayas puesto! :-D es más elegante :-D

Anónimo dice...

Hola Jaime, me llamo Miguel y déjame decirte que esta es una de las mejores páginas que he visitada.

Puse este tipo de fecha, pero quiero ponerla en la parte superior, al igual que tu, lo tengo en el lado derecho, pero quiero subirlo, me puedes decir como?

Jaime Trujillo Escobedo dice...

Hola Miguel, muchas gracias por dedicar esa frase al balcón =)

Ya modifiqué el código, ya aparece en el lado derecho.

Si no quieres volver a poner el truco, simplemente busca en el primer bloque la línea float: left; y cámbiala por float:right; ^_^

Marga dice...

Hola Jaime !!!

Estaba intentando poner la fecha, pero en el último paso tengo un problemilla ...
No encuentro data:post.dateHeader
Puedo encontrarlo de otra forma ??
Gracias,
Marga

Marga dice...

Hola Jaime, de nuevo a molestarte :S

Ya encontré "data:post.dateHeader/" y lo puesto.Pero quería preguntarte como puedo moverlo un poquito hacia la derecha para que me quede en línea con el título de la entrada ??
Y podría dejar un espacio entre el título y el texto, queda muy pegado ....

Gracias de nuevo por tu paciencia :)

Jaime Trujillo Escobedo dice...

Marga, ¿molestarme dices? ¡para nada! y es más, siento no haber tenido tiempo de responderte antes, para heberte ayudado a encontrar la etiqueta ;).

Para alinearlo a la derecha con el título borra el márgen (de 8 px a 0px) en el bloque "Casilla" como te muestro a continuación:

#Casilla {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EECBAD none repeat scroll 0 0;
border:2px solid #919191;
color:#626364;
display:block;
float:right;
font-family:Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
margin:0px;
padding:8px;
text-transform:capitalize;
}

Para dejar un espacio entre el título y el texto busca:

.post-body {
line-height:1.6em;
margin:0 0 0.75em;
}

Y cámbialo de manera que te quede así:

.post-body {
line-height:1.6em;
margin:2em 0;
}

Si necesitas algo más, ¡dímelo! :D.

Marga dice...

Eres un crak Jaime !!!!!
Tendré que empezar a pensar en hacer un cursillo de lenguaje HTML jajaja !!!

Si quieres pásate por el blog para ver el resultado. Yo lo veo muy bien :)

El que me tiene mosqueada es el tema de la transparencia .... pierde toda la gracia la plantilla. No se porqué el blog de pruebas funciona perfecto y el otro no :S

Graaaaaaaaaaaaacias.
Marga

Jaime Trujillo Escobedo dice...

Marga, jajaja ¡Gracias!

Lo del cursillo HTML no es mala idea ;) yo realicé el mio hace tiempo y debo decir que es de lo más sencillo.

En cuanto a la transparencia... ví tu mensaje. No se a que te refieres, lo veo transparente (en ambos blogs). ¿Es alguna zona en particular?

Marga dice...

Pues es lo que ya te comenté, Jaime. En el blog de pruebas funciona a la perfección, pero en el otro al principio se ve, pero a los pocos segundos ya desaparece ....
Es tanto en la cabecera, como la zona de las entradas y la sidebar ... Jo que rabia me da !!!

Marga dice...

Te paso a tu correo un mail con las dos impresiones de pantalla para que lo veas.

Un abrazo,
Marga

Jaime Trujillo Escobedo dice...

Marga, estaré atento al correo y en cuanto pueda te respondo.

¡Saludos!

Cocina dice...

HOLA Jaime,he puesto fecha en una casilla,y en mi blog de pruebas quedo perfecto,pero cuando lo implente en mi blog no me quedo,se ve a a la izquierda y sin la casilla,te puedo aseguar que revise codigo por codigo y lo veo exacto,puedes ayudarme??
saludos!!
clau

Cocina dice...

Hola Jaime otra vez yo por aqui...jeje
te cuento que he puesto la fecha en casilla como ta tienes en el blog,segui los pasos tal cual lo indicas,pero me queda sin la casilla o sea que no se ve,podras ayudarme si no es molestia??
saludos
clau

Jaime Trujillo Escobedo dice...

Hola Cocofansclub. Veo que ya lo has solucionado aplicando otra imagen de fondo ;). Si necesitas alguna otra cosa dímelo y te ayudaré.

Marcelo Mendoza dice...

Hola Jaime, un gusto nuevamente pasar por estos lares. Tengo un problema, no logro poner bién la fecha al estilo wordpress. Me aparecen 2 líneas "Undefined". Me gustaría contar con tu ayuda gracias....

Jaime Trujillo Escobedo dice...

Akiles, accede a Configuración>Formato y comprueba que tienes la misma configuración de la siguiente imagen:

http://i47.tinypic.com/2rxw8j6.png

teofermi dice...

Hola Jaime, yo tengo la fecha que vi en "el escaparate de Rosa" pero tengo un problema que no se como arreglar, no tengo ni idea y es que el titulo de la entrada me queda muy abajo de la fecha y no me gusta como queda, me gustaria que quedara la fecha justo al lado, si pudieras ayudarme te lo agradeceria infinitamente, llevo tiempo intentandolo y no encuentro la manera, soy muy torpe para estas cosas jajja
un saludo
teo

Jaime Trujillo Escobedo dice...

Teofermi, busca este bloque de CSS en tu plantilla y edítalo como te muestro:

h3.post-title, h4 {
color:#EB0909;
font:bold 20px 'Trebuchet MS',Trebuchet,sans-serif;
margin-left:40px;
margin-top:-80px;

}

Haz vista previa para comprobar el resultado y listo.

Unknown dice...

Madre miaaa Jaime...¿como no te encontre antes?
¡¡eres mi idolo!!he modificado como me has dicho y mi fecha ha quedado mucho mejor, solo que he tenido que cambiar donde tu me ponias 80px he puesto menos, porque sabes?tengo una linea de separacion entre los post y los titulos del mismo dia, donde no tengo fecha..me salian encima del separador, si tienes una solucion para que el separador quede a la misma distancia pues te lo agradeceria...

Gracias mi idolo

EL SÁHARA DE LOS OLVIDADOS

Jaime Trujillo Escobedo dice...

Teofermi, necesito investigar algo más las nuevas plantillas de blogger. En tu blog únicamente veo títulos que está excesivamente cerca de la barra verde, mientras que otros mantienen la distancia. ¿Te refieres a igualar dicho espacio?

Un placer que me hayas encontrado. ¡Abrazos!

Unknown dice...

Gracias Jaime por tu contestacion, eres un cielo..
si me refiero a lo que tu has visto, me gustaria igualar la distancia de los articulos a la barra verde de separacion, quedan mal..unos muy cerca y otros bien, no se a que puede deberse
un beso

Unknown dice...

Hola Jaime, si pudiera ser me gustaria a ver si me puedes dar solucion a mi problema de poner la barra verde que tengo de separador a la misma distancia, te escribi el otro dia, igual no te llego mi comentario
muchas gracias y un beso

Jaime Trujillo Escobedo dice...

Teofermi, aquí tienes la solución: busca en tu plantilla (con los artilugios expandidos) este bloque de CSS y añade la línea que ves en negrita:

.post-footer {
border-bottom:4px solid #0CD40C;
margin:1.5em 0 0;
}

Ahora encuentra un código similar a este:

<hr style="background: none repeat scroll 0% 0% rgb(12, 212, 12); border: 0px none; height: 4px; width: 65%;">

Y bórralo por completo.

Guarda la plantilla y el problema quedará resuelto ;). ¡Saludos!

Unknown dice...

Hola de nuevo Jaime, uffffffffff, he probado lo que me dices pero no se arregla, como veras, la fecha no la puedo poner en todos los articulos, solo se ponerla una sola vez por dia, los demas articulos de la misma fecha es donde tengo el problema, tambien he pensado, si puede ser, dejar la barra separadora para que separe solo los dias en vez de todos los articulos, seria que todos los articulos del mismo dia no tendrian separador.
Siento darte la paliza jajja ¿me dirias como puedo poner la fecha en todos los articulos y creo que asi el problema estaria arreglado?
Gracias, gracias, gracias

EL SÁHARA DE LOS OLVIDADOS

Un beso Jaime

Jaime Trujillo Escobedo dice...

Teofermi, creo que lo que comentas acerca de la barra será lo mejor. Para mostrar la fecha en todas tus entradas, visita este tutorial.

Si tienes alguna duda avísame. ¡Abrazos!

C. Black dice...

Hola Jaime, estoy intentando poner esto en mi blog de pruebas pero no encuentro la etiqueta body le doy a inspeccionar y busco pero esa no sale, ¿puede ser que no esté en mi plantilla? Ojala puedas ayudarme, un saludo

Jaime Trujillo Escobedo dice...

Carol, todas las plantillas de blogger, por muy modificadas que estén poseen la etiqueta <body> en su interior. Tal vez haya sido modificada para la instalación de algún truco (el de proteger el blog por ejemplo).

Prueba a escribir en el buscador de tu navegador (abriéndolo con las teclas Ctrl y F) sólo el principio: <body

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo