How to Add a Calender Date For Posts in Blogger

It's Quite Common to Have the Dates in the Blogger Posts.in this Tutorial iam going to Show you How to Add a Calender Style Dates Next to Blogger Posts.

For adding the calendar style to our blogger Posts, first we should Enable the displaying the Date for the Posts in Blogger Settings.


Log in into your Blogger Dashboard, go to Settings > Formatting - look for the Date Header Format option and change the date.
If you're using the newer interface: go to Settings > Language and Formatting - Date Header Format and change the date format


How to Add a Calender Date For Posts :.


Now go to Design > Edit HTML > Check "Expand Widget Templates".
Now Search for the Following Code in the Template.

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

You May Find it Twice,Replace it Twice With the Below Code..

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Now add the following code just ABOVE </head> Tag

<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 != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYFqxnVewHpwzhueIBf33dB2F3Y03krjvBEric0D_BFLMwc5YyZErEAcEeRcuG0LyWH6loHEJ8-I7bOrvkm9Nwm_VVPp76JzQ6yU2UeyGMel8X085brY3fyDNh-5jiX264n8sQAq8Wsxk/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>

Make Some Changes :.

• To change the calendar style, replace the url in Red with yours;
• If the calendar doesn't appear correctly, change it Width or Replace -108 with 0;
• You Can Change the Color of the Calender By Changing the Codes Which Are Marked in Green