Replace Date with a cool new calendar type layout in blogger

Lauren asked me to show how to add a calendar to dates in blogger and i liked the idea and so i am posting about it. I also want to say that my readers can also contact me via the contact form or twitter (@virtuosoblogger) or even discuss on the facebook page.

The default text for date in blogger might look a little too simple to some, so for those blogger users who want to spice their layout by adding a calendar to their post dates, this post will help you achieve that.

Date Header in Calendar Style in Blogger
Preview of the date in calendar style


Follow these steps to replace the default with the date in calendar layout:
1. Go to Settings->Formatting and change the Date Header Format with the format DD-MM-YY
2. Go to layout, then click on Edit Html
3. Download the Full Template (So that you don’t lose any date).
4. Search for the following code:

[xml]
<data:post.dateHeader/>
[/xml]
5. Replace the code above with the following code:
[xml]
<div id=”date”><script type=”text/javascript”>// <![CDATA[
replace_date(&#39;<data:post.dateHeader />&#39;);
// ]]></script></div>
[/xml]
6. Search for the following code:
[xml]
</head>
[/xml]
7. Paste The following code above it:
[css]
<style>
/* To view the year change the &quot;none&quot; to &quot;block&quot; */
#date {
display: block;
float:left;
margin: 0 5px 0px 0;
padding: 1px 15px 15px 10px;
color: #333;
background: transparent url(http://bloggertipspro.googlepages.com/Calendar.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.month {
margin: 0px 5px 0px 9px;
color: #fff;
display: block;
font-size: 10px;
font-weight:bold;
}

.year {
margin: 0px 5px 0px 6px;
display: block;
font-size: 10px;
}

.day {
margin: 5px 5px 0px 7px;
display: block;
font-size: 20px;
font-weight:bold;
}
</style>
[/css]
This the CSS code, this governs the look of the calendar. If you know a little bit programming you can make modifications to this code and add your own image.

8. Search for the following code:
[xml]
<body>
[/xml]
9. Just below the code paste the following code:
[java]
<!-date image background–>
<script>
function replace_date(d)
{
var da = d.split(&#39; &#39;);
month = &quot;<div class=’month’>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
day = &quot;<div class=’day’>&quot;+da[0]+&quot;</div>&quot;;
year = &quot;<div class=’year’>&quot;+da[2]+&quot;</div>&quot;;
document.write(month+day+year);
}
</script>
<!-date image background–>
[/java]
This javascript diaplays the date. You can change the order of display in document.write function.

10. Save the template.
And now your date in calendar style is up and running.

Facing problems? Tell me!!

  • Lauren

    Awesome, thanks so much! Will use this fur sure in a template design!

  • Mencari Blogpreneur Sejati

    thank you so much Gautam….

  • poorblogger

    oo. you mean blogger.com or blogspot..
    NIce tips and I'll try at my blogspot blog

  • Mike Tok

    Nice tutorial. I had my done too. Have a look at http://www.miketok.com

  • Mia

    Hi Gautam , great little script for the calendar date – I'm trying to figure out how to display the year though – where do I have to change the script line to denote 'block' in order for the year to be displayed ? other than that : thanks a lot for the script πŸ™‚

  • gautam

    @Mia: Hey the year should appear if u have used the same code as above but there may be problem due to css of your blog. I prefer u try to change the font sizes so that you get the desired reults.

  • Brian

    How can i put it in spanish?

  • gautam

    @brian: I think you should use spanish as your blog language and then you might see the date in spanish

  • Mia

    Hi Gautam , thank you for your response , I had changed the font size & everything – but it simply just refused to appear – maybe Time is really standing still for me πŸ™‚ as you can see I am using Cheth's Template ( and that boy has so much code in there , that I fear touching or altering anything in case it just EXPLODES ! πŸ™‚ LOL – when I get up the nerve , I will attempt this again . Thank you for your response . Happy blogging G. πŸ™‚

  • gautam

    @Mia: Ya it becomes difficult to alter if you have little info and your template is fully loaded but you can still try by first downloading the template for backup purposes and edit the code

  • element

    Guatam – That's great, I had wondered how you setup the calendar to post as you do. πŸ™‚ I will have to try that out on my site.

  • Carmen Chan

    Thanks for the tutorial!
    Somehow, I can't find the first set of codes, which is:

    <data:post.dateHeader/>

    And then when I tried posting the 2nd set:
    <div id='date'>
    <script> replace_date('<data:post.dateHeader/>');
    </script>
    </div>

    It said they had an error interpreting blog template.
    Help?
    Thank you.

  • gautam

    If you can't find the code, try to place it above <post.body> or below <post.header>. you have to try and after some trials it will be functioning properly

    Recent blog:=- Win 100$ by leaving comments at TechZoomIn

  • manju

    i couldn't do it as well πŸ™
    like carmen chan, there wasn't any
    <data:post.dateHeader/>
    and when i tried what you suggested it still didn't work *sigh* :'(

    Recent blog:=- Shut up and Drive

  • gautam

    Manju if it desn't work that means either yur template doesn't have the code or either you have to paste the code just below <data:post.title>. You need to try and after a few, you would be able to add the cutom date.

  • Haresh

    Your post indirectly helped me clear a bug in my code after I'd worked around the HTML code of my blog's template a bit. That's because I could know that data:post.dateHeader is used for showing date πŸ˜›

    Thanks anyway πŸ™‚

  • Peter

    Please tell me how to move the entire calendar about 1 centimeter to the left (how to move left), because i have a photo blog and the first picture is pushed to the right. Please help me with this one !

  • Dee@GoodMorningAmerica

    Thanks so much for this post. I had a devil of a time customizing my custom template but it finally worked! Looks just great!

  • Chris

    How would you make the date header to appear in multiple posts on the same day with changing the date from header to timestamp.

  • gautam

    You will have to split it according and also difent css tags for it seperately, though i would recommend you use this hack.

  • Ciccio

    I've done as you said but it doesn't show anything

  • I’m good until step 9, then I get the following error message:

    We were unable to save your template
    Please correct the error below, and submit your template again.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.

  • We were unable to save your template
    Same response:

    Please correct the error below, and submit your template again.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.

    How do i solve this?

  • Hello Gautam,

    I cannot find the “” code in my HTML script. I suppose it has already been replaved by another code in my template.

    Could you help me to find what to do in order to get this calendar?

    Thank for your help & time

    Regards
    Xavier
    .-= Xavier Wallach´s last blog ..Photographying sports: soccer =-.

  • I read all of the previous post, and I cannot finf neither
    nor
    nor
    in my script
    πŸ™‚
    .-= Xavier Wallach´s last blog ..Photographying sports: soccer =-.

  • Greats content. awesome customize date. but i got error on step no 4. I try to recheck again. thank..
    .-= cuaryos´s last blog ..Best Ways to Save Automotive Fuel =-.

  • I tried several times to get this one to work but never was able to. I’m bummed! I love the calander look!

  • Rizqy

    Anyone know why it doesn’t work???

  • Ben

    Thanks. very awesome…

  • Hey Mate,

    I was trying what u said but got stuck at the body part. Which body (line) are u referring to? I searched and the result displayed total of 36 lines that contain body word. A little help please?

    • Ika

      Same as Affan. I can’t find the body part !

      • Jiieh

        It’s impossible to find 36 lines that contain body. Probably you did it wrong. You have to search the whole “” and not just the word because it’s a tag. Hope this helps. There’ll be (that’s the beginning) and (the closing tag).

        • Jiieh

          all in all you have to search

  • Hi, I try as you suggested but i get this message error:

    We were unable to preview your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.

    Help. Thank you.

    • Michael Evans

      He used weird quotations around the words day, month, and year, e.g.:

      month = ""+da[1].slice(0,3)+"";

      Replace the quotes so that it’s <div class="month" or class='month'

  • abel

    Not working for me on:

    http://www.blogdecamisetas.com

  • I have tried this on my blog, not working. I dont know why. I am using a customized Code Red blog of Brain Gardner. See http://www.tooth-n-nail.blogspot.com

    Please advise

  • Pingback: Cool date ideas - Do You Woo?()

  • i didn’t found the first code and when i click on the Expand widget i found 3 ??

  • Thanks very awesome

  • where is the codes in step 7?

  • rndtechnologies786

    Good thought..