Una fecha original en el blog
Haciendo mi ronda de visitas diarias a otros blogs interesantes, me encontré en el blog de Gem@ con un post donde explica como personalizar la fecha del blog.
En primer lugar tenemos que cambiar el formato de nuestra fecha en plantilla-opciones-formato, en el desplegable "formato de cabecera de fecha" escogemos la penúltima opción, es decir, la que se ve así: 8 mayo 2007.
Guardamos cambios.
Vamos a Plantilla-HTML y justo después de <body> copiamos este script:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>"; //Le otorgamos una clase al día
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>"; //Le otorgamos una clase al mes
anio = "<div class='fecha_anio'>"+da[2]+"</div>"; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>
Guardamos cambios.
Vamos a Plantilla html, Expandimos la plantilla de artilugios, buscamos esta línea del código: <data:post.dateHeader/> y lo sustituimos por:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
Añadimos en el CSS dela plantilla, por ejemplo, antes de ]]></b:skin>
este código:
#fecha {
display: block;
margin:0 10px;
float:left;
padding: 5px;
color: #464646;
background: #e4e3ad;
border:#d7d675 3px solid;
text-transform:capitalize;
}
.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}
.fecha_mes {
display: block;
font-size: 10px;
}
.fecha_anio {
display: block;
font-size: 10px;
}
Guardamos los cambios y si todo ha ido según lo previsto, la fecha de nuestras entradas debería verse así:
Como bien dice Gem@ en su post, podemos modificar los colores y estilos en esta parte del css que hemos añadido, así que me puse a "trastear" en el css y pensé que porque no añadirle una imagen entre otras modificaciones.
No quería que la imagen, por grande, me "despatarrara" la fecha, así que se me ocurrió usar FavIcon from Pics para que fuera pequeñita (32x32), luego modifiqué algunas distancias y colores en el CSS para adaptarlo lo mas posible al estilo de mi blog, aunque de momento, he decidido no usarlo en El Escaparate. Y este fue el resultado:
Os dejo la parte del CSS para añadir, acordaros de cambiar en background:url, la url de mi imagen por la de la vuestra.
#fecha {
display: block;
margin:0 10px;
float:left;
padding: 1px;
color: #464646;
background: url(http://2.bp.blogspot.com/_8PJ-pgoBhWQ/Rj0Blj1UghI/AAAAAAAABR8/JTooNQr3wu8/s400/favicon.JPG)no-repeat;
border:#CC0000 3px solid;
text-transform:capitalize;
}
.fecha_dia {
display: block;
font-size: 10px;
font-weight:bold;
margin-top:20px;
}
.fecha_mes {
display: block;
font-size: 10px;
}
.fecha_anio {
display: block;
font-size: 10px;
}
¡Suerte! ;-)
a las
Etiquetas:
Entradas,
Favicon,
Trucos Blog
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
30 comentarios:
Hola Rosa!
Lo he hecho, pero como puedes ver en mi blog:
1. no me sale mi imagen, y eso q tb la hice de 30x32 px! (si no me sale la imagen, prefiero el otro fondo)
2. No me sale tan bien como a ti: el texto no está centrado y no sale en arial
asias!
Las aventuras de Charly Brown – The Adventures of Charly Brown
Charly, creo que no has escogido la opción correcta en la fecha...
Gracias por citar la fuente ;) no todo el mundo lo hace.
Rosa, estoy preparando una nueva plantilla pero esta no tiene fecha del Post, solo aparece en el pie del post la hora. Quisiera quitar la hora y que saliera la fecha, para luego en una segunda etapa poner la fecha al lado del título de esa forma original que has descrito en este post. La he configurado en el elemento pero aun así no sale. Gracias.
Talín, ¿la plantilla que estás usando es original de Blogger?
Suele pasar que si han sido adaptadas de Wordpress, por ejemplo, no incluyan ese dato...
Así es Rosa, es una plantilla original de Worpress y adaptada para Blogger.
Lo raro y extraño es que la original de Worpress si que tiene fecha.
¿Entonces no puedo hacer nada?
Saludos y GRACIAS
Rosa, ¿crees que al final se podrá hacer algo con esto de la fecha?
Talin, pues no se, para serte sincera jamás he intentado adaptar una plantilla de Wordpress a Blogger (no por falta de ganas, sino de tiempo) y no tengo demasiada idea del tema...
¿No sabes quién adaptó la plantilla?
Si es de Blog and Web, por ejemplo, podrías ponerte en contacto con ellos y explicarles el tema...
No te preocupes, GRACIAS de todos modos. Lo intentaré como dices vía los que adaptaron la página, a ver si me dan una mano.
Gracias de nuevo por el fabuloso papel de ayuda que ofreces, pero te seguiré preguntando ya que me quedan un par de cositas que deseo mejorar.
Rosa: me he permitido chafardear en el código de tu página y creo que he salido airoso en el plagio, para imitar la forma actual en que aparece la fecha, a la derecha, que es lo que yo buscaba, más que nada para que luego, en la presentación de comentarios agrupados por etiquetas, ocupara menos espacio.
Sin embargo, no acabo de saber colocar el margen derecho y no se ajusta totalmente a la derecha; también me parece que la fecha sale algo "levantada" por encima del título.
¿Serías tan amable de dar un vistazo y decirme qué tengo que modificar?
Gracias y perdona por el plagio.
Josep, mira en:
.post h3 {
margin:.25em 0;
line-height: 1.4em;
font: normal bold 81% Verdana,Sans-serif;
font-size: 120%;
font-weight: bold;
color:#cc0000;
background:#000;
padding:0 0 1px 45px;
}
En la última línea cambia 45px por 0px
Muchas gracias, Rosa.
Al final, lo he retocado y lo he dejado así:
h2.date-header {
float:right;
padding:0px 0px 0px 0px;
color:#236c95;
font-size:70%;
margin:1.0em 0 0.0em;
}
.post {
margin:.2em 0 0.2em;
border-bottom: 1px solid #CC0000;
}
.post h3 {
margin:.25em 0;
line-height: 1.4em;
font: $headerfont;
font-size: 120%;
font-weight: bold;
color:$posttitle;
background:#000;
padding:0 0 1px 45px;
}
Curiosamente, la fecha sólo queda pegada al margen derecho en la lista de comentarios por etiquetas, pero ya me va bien, porque es ahí donde más me interesaba.
Muchas gracias.
Saludos
Josep. perdona, yo entendí que querías arrimar la fecha al resto del post por la izquierda. XD, si es que me lancé a mirar tu blog y lo primero que vi fue esa separación...perdona :-$
Intento poner el primer script y me sale que no se puede por que el "div" está dentro de "head". QUE HAGO?
Fernandooo1, si es cierto. Voy a tener que modificar un montón de entradas...resulta que Blogger ahora ya no permite ningún div dentro del <head>.
Prueba a colocarlo justo después de <body>
Ok, perfecto :) Lo haré y te aviso ^^ Suerte editando... es bastante, supongo.
Saludos,
Este comentario ha sido eliminado por el autor.
Fernandooo1, ¿sabes que aún no había visto tu blog? acabo de estar allí y me ha sorprendido gratamente, está preciosa la combinación de colores, el negro y ese tono de marrón combinan de forma espectacular. ¡Enhorabuena por la elección!
UN MES DESPUÉS VENGO A LEER ESTO... y ni preguntes cómo llegué :P Pero pues bien: más vale tarde que nunca, ¿no?
:D ¡Gracias!
(Por suerte el negro con marrón sigue "vigente" ;))
Saludos,
Hola Rosa
Hoy te escribo totalmente abatido y desolado: los de gmail han deshabilitado mi cuenta, y con ella el blog que le he dedicado a mi hijo. No sé porqué, supongo que es porque he estado recibiendo cientos de ataques de spam en mi dirección de gmail, pero yo no tengo la culpa!!!
pero no podrán conmigo. Pienso volver a empezar.
Pero ahora tengo un problema. Me gustaba este formato de fecha, pero no me deja grabarlo porque me dice que no pued haber una tag div dentro de head. ¿Como es que antes pude hacerlo y ahora no deja?
Gracias y un beso
Natxo, tranquilo, el problema es de Blogger.
Verás, han hecho cambios en los códigos de las nuevas plantillas, es decir, las de los nuevos blogs que se crean, hace un mes o así...
Resulta que las plantillas que se suban a partir de esa fecha, no admiten ninguna etiqueta div en el <head> o sea, que cualquier código que contenga esa etiqueta, hay que colocarlo después de <body> para que Bloggerlo admita.
Siento mucho lo del blog, la verdad, es una faena:-(
Hola Rosa, hace bastante tiempo añadí este código para cambiar el aspecto de la fecha de mi blog y me quedo muy bien, pero ya me he cansado de verla siempre igual y me gustaría volver a como era antes, es decir en texto, para poder ponerle ese mini-icono tan chulo que nos explicaste como hacer en otra entrada, peeero resulta que no sé como hacerlo... como podría volver al inicio otra vez? que tengo que borrar o poner? borro todo los códigos que has puesto aquí? cual era el original? :$
Un beso y ojala me puedas echar una manita ;)
Alexia, pues bien fácil, solo leer la entrada, localizar lo añadido y eliminarlo, eso el script y el css.
La parte que dice "localiza esto y cambialo por esto otro" pues al revés, localizas "esto otro" que añadiste y lo vuelves a poner como el "localiza esto":D
Ya esta cambiado, gracias por la ayuda Rosa :D
Hola! Wow tu blog es increible!! La verdad es que se encuentran pocos como éste!
Mira, es que estaba probando este truco y me ha ido muy bien, lo que pasa es que me ha salido un problemilla. El dibujito de la fecha me sale en todos los posts, pero la fecha en sí, sólo sale una vez, dejando en blanco a los demás. Así que se podría solucionar o quitando los dibujitos en los post que no sale la fecha o poner la fecha en todos los post. Lo que pasa es que no sé cómo solucionarlo....espero que puedas ayudarme porque estoy muy apurado.
Muchísimas gracias y me seguiré pasando ;)!
Saludos!^^
Diego Supongo que sabes que en Blogger de las entradas que se publican el mismo día solo la última lleva fecha...
Para tener fecha en todas las entradas y al mismo tiempo usar una manera de mostrar la fecha de este estílo, esta entrada no te sirve, ya que habría que modificar el scrip...
No se si has visto esta:
http://elescaparatederosa.blogspot.com/2008/11/fecha-tipo-calendario-en-todas-las.html
Oh, muchas gracias por el enlace, esa puede ser una opción.
Pero, ¿No se podría hacer que el dibujito sólo se mostrase en la última entrada tal y dónde sólo se muestra la fecha? En vez de que esté en todas las entradas.
Bueno, no sé si me explico. Si eso no se puede hacer, intentaré lo que comentas en ese enlace ;)
Muchas gracias, chau!
Diego Tal como está construido el script, no, no puede hacerse :(
Holis Rosa!
Bueno, vuelvo a tener problemas con data:post.dateHeader, como no lo incorporado en la plantilla, ¿qué es lo que tendría que sustituir?
Por las molestias que te tomas... muchas gracias!! :D
Shide Me suena...pero no puedo recordar todos los casos...qué problema tienes exactamente.
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo