English Português

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. -Leonardo Miquilena- / Hace 10 años /

      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…

      Responder a -Leonardo Miquilena- →
    2. Anonymous / Hace 10 años /

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

      Responder a Anonymous →
    3. Sterukita / Hace 10 años /

      Hola!

      La fecha me sale abajo

      que puedo hacer?

      Responder a Sterukita →
    4. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    5. Jorge Luis Mora Rocha / Hace 10 años /

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

      saludos…

      Responder a Jorge Luis Mora Rocha →
    6. Eduardo / Hace 10 años /

      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.

      Responder a Eduardo →
    7. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    8. Bassofia / Hace 10 años /

      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

      Responder a Bassofia →
    9. Francisco / Hace 10 años /

      Poniendo los links de las etiquetas que deseas mostrar manualmente.

      Saludos!

      Responder a Francisco →
    10. Eduardo / Hace 10 años /

      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?

      Responder a Eduardo →
    11. Graciela / Hace 10 años /

      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.

      Responder a Graciela →
    12. Francisco / Hace 10 años /

      Holaa!

      Eduardo, puedes checar el artículo de como cambiar la fecha en blogger (sería algo inverso) y ahora si jugar con el float.

      Graciela, que bueno que te halla servido 🙂

      Un saludo!

      Responder a Francisco →
    13. javichu / Hace 10 años /

      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

      Responder a javichu →
    14. Francisco / Hace 10 años /

      Que tal javichu, checa nuestro artículo “iconos en blogger” y ahí se hace algo muy similar a lo de esta web, un saludo.

      Responder a Francisco →
    15. javichu / Hace 10 años /

      gracias francisco pero una cosa mas como hago para q la fecha este abajo de los post

      Responder a javichu →
    16. javichu / Hace 10 años /

      estee eee francisco disculpa por el ultimo comentario este ps a veces uno no mira bien yy bueno uee
      la ultima consulta ya estaba resuelta por ti ps graciela te hizo la misma consulta http://blogandweb.com/2007/05/11/cambiar-de-lugar-la-fecha-en-las-entradas-en-blogger/ jejej algunas veces uno no busca bien la solucion estaba en mis narices jejejej disculpa eeh

      Responder a javichu →
    17. Francisco / Hace 10 años /

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

      Responder a Francisco →
    18. Nico / Hace 10 años /

      Hola.

      Con la plantilla blogy-illacrimo, tampoco funciona la fecha al dar a entradas antiguas.

      Responder a Nico →
    19. Francisco / Hace 10 años /

      Nico, eso es por el sistema de blogger y no por el script.

      Responder a Francisco →
    20. thinchhia / Hace 10 años /

      I tried to use these bloggers hack for my blog but i could not follow your instructions 😉 can u do in english

      Responder a thinchhia →
    21. Francisco / Hace 10 años /

      Sorry, but my english is very bad!

      Responder a Francisco →
    22. MsH / Hace 10 años /

      me sale esto en el lugar de la fecha : ‘);

      Responder a MsH →
    23. Talín / Hace 10 años /

      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

      Responder a Talín →
    24. Talín / Hace 10 años /

      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

      Responder a Talín →
    25. gertru / Hace 10 años /

      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’.

      Responder a gertru →
    26. Francisco / Hace 10 años /

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

      Responder a Francisco →
    27. Fali / Hace 9 años /

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

      Responder a Fali →
    28. Priale / Hace 9 años /

      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…

      Responder a Priale →
    29. kaotika / Hace 9 años /

      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!!!

      Responder a kaotika →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad