How to create calendar style dates in Blogger
For adding the calendar style to our blog date header, we should firstly setup the displaying for the date. Log in into your Blogger Dashboard, go to Settings > Formatting - look for the Date Header Format option and change the date so that it is the first day, then the month and finally the year, for example: 28 July 2012 - see the screenshots below
Now go to Design > Edit HTML > thick the "Expand Widget Templates" checkbox and search (CTRL + F) the following line:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
If you find it twice, replace it twice with the code below:
<div id='Date'>
<script>changeDate('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate('');</script>
</div>
Now add the following code just ABOVE </head> (CTRL + F to find it)
<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqn7ddi6-W5YhxDdvj414Ho97k55OL6ZFWYIaPNvIAOQtn4BfnWXKZOrGa6ZiaJlxjXVLPms_d-fvkpGa3WevzYJ28bPmR1jzXOKHI6SWxUwmnGLOoRgxrUwuXVtJoO_aWrPVy8eoQPBn/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>
Before saving your Template:
- To change the calendar style, replace the url in blue with yours;
- If the calendar doesn't appear correctly, change -108 with 0;
- With green are marked the areas where you can change the color of the dates
Now Preview your Template and if everything is ok, click on the Save button.
