Tutorials, tips and tricks about Blogger

28 Nov

Customize the way date is shown on Blogger

7 Comments | by in Design, Tips and Tricks | 2009

Español Português

Blogger puts default date to every published message, but this format is very poor. It’s shown in the same line, and with the same CCS style. With this method you could show the date in a nicer way and have total control over it.

  1. First of all, you have to change the date format. Go to the "Options" tab and then to "Formatting".

    Now look for "Head date format" field and select the one before the last one, which is continuous and without commas. Then we save the changes we have made, with the "Save Values" button.


  2. Once here, go to "Layout" tab, and then to "Edit HTML".

    Layout Blogger

    Here we search the <head> label, and just before paste the following code:

    function remplaza_fecha(d){
    var da = d.split(&#39; &#39;);
    dia = &quot;&lt;strong class='fecha_dia'&gt;&quot;+da[0]+&quot;&lt;/strong&gt;&quot;;
    mes = &quot;&lt;strong class='fecha_mes'&gt;&quot;+da[1].slice(0,3)+&quot;&lt;/strong&gt;&quot;;
    anio = &quot;&lt;strong class='fecha_anio'&gt;&quot;+da[2]+&quot;&lt;/strong&gt;&quot;;

    This is the code that gives every part of the date, day, month and year one class soyou can customize your style.

  3. Now check the "Expand widgets templates" box, and in the text edition field, search for the following code:

    Look carefully, it is almost in the end of the code. It may look like the most annoying step, but in the end you will see it was pretty easy.

  4. Now you found it, replace it with the following code:
    <div id='fecha'>

    Now we search for:


    And just on top of it, we past the following styles:

    #fecha {
    display: block;
    margin:0 10px;
    padding: 5px;
    color: #464646;
    background: #e4e3ad;
    border:#d7d675 3px solid;
    .fecha_dia {
    display: block;
    font-size: 16px;
    .fecha_mes {
    display: block;
    font-size: 10px;
    .fecha_anio {
    display: block;
    font-size: 10px;

You can realize there’s a general style for the date, and one for every date’s element. You can change the background colors and text colors by changing those styles.

The final result, with those styles is as follows:


7 Comments, leave a reply · Feed
  1. i want to show this kind of date on posts which are published on a same day

  2. Stephanie October 11, 2011

    Thank you for this tutorial. Exactly what I was looking for. It looks great!

  3. Do you know how hard I’ve been searching for a tutorial like this that actually worked? I’ve tried at least 5 different ones now and all of them were complete failures! This tutorial was quick, simple, and worked like magic. Thank you so much for sharing!

  4. It works but you can see it only at the top post. What about the rest posts of the day??? Please help…

  5. no lo pude lograr, muestra la fecha, pero no los colores del css

  6. Ahmed Shawan June 27, 2013

    I knew about styling date section on blogger but i couldn’t find the exact script, this tutorial really helpful in vein

  7. Hi,
    i have used this code, but on post loop the date is only visible on first and last posts!
    On the the other posts, the script code is not executed!
    the code in html:
    remplaza_fecha(‘ ‘);

    why this is happening?



You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger