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.
Busca la etiqueta <body> y justo debajo pégale este script:
<script>
function Fecha_casilla(d){
var da = d.split(' ');
dia = "<div class='dia'>"+da[0]+"</div>";
mes = "<div class='mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='anio'>"+da[2]+"</div>";
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
Hola Jaime!
Ya aplique este truco en mi blog, me encanto! mil gracias!
Saludos!
Shirubia! ¡cuánto me alegra que lo hayas puesto! :-D es más elegante :-D
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?
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; ^_^
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
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 :)
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.
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
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?
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 !!!
Te paso a tu correo un mail con las dos impresiones de pantalla para que lo veas.
Un abrazo,
Marga
Marga, estaré atento al correo y en cuanto pueda te respondo.
¡Saludos!
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
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
Hola Cocofansclub. Veo que ya lo has solucionado aplicando otra imagen de fondo ;). Si necesitas alguna otra cosa dímelo y te ayudaré.
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....
Akiles, accede a Configuración>Formato y comprueba que tienes la misma configuración de la siguiente imagen:
http://i47.tinypic.com/2rxw8j6.png
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
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.
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
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!
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
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
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!
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
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!
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
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