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:

<data:post.dateHeader/>

5. Replace the code above with the following code:

<div id=’date’>
<script> replace_date(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>

6. Search for the following code:

</head>

7. Paste The following code above it:

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

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:

<body>

9. Just below the code paste the following code:

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

This javascript diaplays the date. You can change the order of display in document.write function.

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

Facing problems? Tell me!!