Blogger

Personalizar la forma en que se muestra la fecha en Blogger

Blogger coloca por defecto la fecha en todos los mensajes que publicas y es muy pobre el formato en que la encajona, te la muestra en una sola linea y toda la fecha bajo la misma clase CSS. Con este método podrás mostrar la fecha de forma más estética y tendrás mayor control sobre ella.

  1. Lo primero que hay que hacer es cambiar el formato de la fecha. Vamos a la pestaña “Opciones” y a la opción “Formato”.
  2. Ahora buscamos el campo “Formato de cabecera de fecha” y ahí seleccionamos el penúltimo formato de fecha, que es continuo y sin comas, algo así como “15 marzo 2007” y guardamos con el botón de abajo “Guardar Valores”.

  3. Una vez aqui, nos vamos a la pestaña “Plantilla” y a la opción “Edición de HTML”.Aqui buscamos la etiqueta </head> y justo antes pegamos el siguiente código:
    <script>
    function remplaza_fecha(d){
    var da = d.split(&#39; &#39;);
    dia = &quot;<strong class='fecha_dia'>&quot;+da[0]+&quot;</strong>&quot;; 
    mes = &quot;<strong class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</strong>&quot;; 
    anio = &quot;<strong class='fecha_anio'>&quot;+da[2]+&quot;</strong>&quot;;
      document.write(dia+mes+anio);
    }
    </script>

    Este es el código que otorga a cada parte de la fecha, día, mes y año, una clase para poder personalizar su estilo.

  4. Ahora activa la casilla “Expandir plantillas de artilugios” y en el campo de edición de texto busca el siguiente código:
    <data:post.dateHeader/>

    Busca bien, se encuentra en la mitad baja del código aproximadamente, este podría parecer el paso más ‘tedioso’ pero al final veras que es fácil

  5. Ahora que lo encontraste, sustitúyelo con el siguiente código:
  6. <div id='fecha'>
    <script>remplaza_fecha('<data:post.dateHeader/>');</script>
    </div>
  7. Ahora buscamos el código
    ]]></b:skin>

    Y justo arriba de él pegamos los estilos siguientes:

    #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;
    }

    Sí te das cuenta hay un estilo general para la fecha y uno para elemento de esta, tu puedes cambiarle los colores de fondo y de texto modificando estos estilos.

    El resultado final, con estos estilos, es el siguiente:

    Basado en el artículo de Lastword y adaptado por Blog&Web.

29 Comentarios

  • hola amigo.. saludos.. estoy haciendo el cambio de la fecha.. segui tus pasos exactamente..y no me sale la fecha.. lo que si noto es que la fecha como antes la colocaba ya no aparece.. y se nota que el nuevo formato esta.. pero no c aprecia.. sera que hay que variar los colores.. por mi fondo negro.. echa un vistazo. y te agradeceria que me aclararas la duda.. muchas gracias…

  • EXCELENTE. MUCHISIMAS GRACIAS. SE AGRADECE EL TIP. ESO LE DA OTRO AIRE A MI BLOG. GRACIAS NUEVAMENTE

  • Que tal?

    Leonardo: Me di una vuelta por tu blog y vi que ya funcionaba bien, si sigues con el problema deja otro comentario.

    Anonimo: Si, mejora mucho la imagen de la fecha, que bueno te sirvio.

    Sterukita: Me podrias decir más sobre tu problema? y en que blog lo tienes?

    Saludos!

  • Hola Francisco. Mira, mi problema es que no me salen las fechas. Ni Día, ni año. que hago?

    saludos…

  • Hola, gracias por compartir tan buenos trucos. Realicé los pasos para cambiar el formato de la fecha y me gustó, pero hay algunos puntos que no me gustan:

    1. Quisiera que la fecha se mostrara exactamente del lado derecho del título del post, o en su defecto en la parte de abajo pero sin robarle espacio al cuerpo del post.

    2. Al dar click en el vínculo de “Entradas antiguas”, las fechas no se muestran, unicamente se ve un pequeño cuadro pero no la fecha.

    Me gustaría que me ayudaras para saber como solucionarlo, muchas gracias.

  • Hola Eduardo!

    Para cambiar la posición de la fecha se tiene que modificar el CSS, por ejemplo puedes cambiar:

    “float:left;” por: “float:right” o “align:right”.

    Sobre el error, sinceramente no sé porque algunas plantillas pasa eso y no sé si sea casual, pero es la segunda plantilla “minina” en la que vea el error. Siento no saber decirte que pasa.

    Un saludo!

  • acabo de implementar la plantilla y se ve de lujo con su fecha ok y todo… Genial

    sólo una pregunta, ¿hay alguna forma de esconder las etiquetas sin eliminarlas del todo? lo que pasa es que son demasiadas y ocupan toda mi sidebar!! jaja

    Salu2 y gracias

  • Gracias Francisco, lo de float sí lo sabía pero yo quisiera que la fecha no me apareciera en el cuerpo del post sino a un lado del título.

    No me había dado cuenta pero tampoco funcionan los Snapshots cuando me voy a “Entradas antiguas”. Que raro no?

  • Hola Francisco!!!, gracias a tu genial explicación pude realizar el cambio con éxito después de haber leído muchísimas formas en otros blogs.
    “Palomas de Papel” te agradece profundamente. Hasta cualquier momento.

  • hola q tal bacan este truco pero me gustaria mas bien algo mas sutil como la fecha q tiene este sitio
    como haria para tener la fecha tipo esta web

  • Hola javichu, que bueno encontraste la solución, precisamente te iba a hablar de ese artículo, un saludo!

  • Hola Francisco
    Quisiera darle este modelo de fecha ami blog, pero en la planilla de Neosapien no encuentro la etiqueta .
    Se que esta planilla tiene mucho en español. Podrías decirme a que corresponde exactamente. GRACIAS

  • Hola Francisco
    Por favor me puedes indicar dónde se encuentra la etiqueta . Como mencioné en el comentario anterior la mayoría viene en español y no se a qué corresponde exactamente.
    MUCHAS GRACIAS

  • Al cambiar los códigos al principio funcionó todo bien,el problema es ahora cuando quiero cambiar un elemento( por ejemplo el fondo del blog) me salta este error:

    Your template is invalid because the tag ‘div’ appears inside of the tag ‘head’.

  • Blogger, se puso a jugar lo código y ocasiono un fallo, ya corregí el código arriba y no debería tener problema.

  • Precioso día para la fecha del Post.
    Estaba yo buscándolo.
    Te visito con mucha frecuencia.
    Tienes un Blog estupendo.
    Gracias.
    Fali

  • Hola amigo queria hacerte una consulta para cambiar el formato de fecha para mi blogger resulta que la plantilla me pide de esta forma Tuesday, August 14, 2007 puse ese foramto pero no aparese la fecha ni la hora no se por que espero que me ayudes saludos gracias…

  • Una preguntita: ¿por qué me pasa que no me aparece el código ? Mi plantilla es ésta: http://japanesefleur-btemplates.blogspot.com/; aunque algo modificada. Quisiera saber como puedo personalizar la fecha en mi blog, si existe alguna otra manera…

    Espero que puedas ayudarme!! Si no te importa, contéstame en el blog, para poder solucionarlo cuanto antes, muchas gracias!!!