Add Calendar Style Date Format in Blogger Posts

Calendar style date format is most popular easily add in WordPress blogs but for the blogger platform its not easy to add but those who tells its impossible to add Calendar Style Date Format in Blogger Posts this tutorial and demo says that everything is not impossible. Calendar Style Date Format gives your blogger blogs posts attractive look. So learn how to add this in blogger.

You may also like this related article:

• Make Blogger Blog Date Header Styler

HOW TO ADD CALENDAR STYLE DATE FORMAT IN BLOGGER

• Go to "Blogger Settings" > "Language and Formatting" > "Date Header Format" and change date style as per showing in below image (Day,Month,Year).

• Now go in to "Template" section by pressing "Edit Html"

• Click anywhere in template code area and press CTRL+F for search.
• Write or Paste below line in search box and press enter.

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

• Mostly you find above code 2 or 3 times in your blog template so replace it with 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 search </head> tag in your template by pressing CTRL+F shortkey.

</head> 

• Paste below code just above the </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/AVvXsEiPEVD-4UB4soVEXXq6t-JEP3h41URx0iKTHijviFoxXUgrlrWqtBzZdenVS8Fz5ggjvHYTlrgeyWXhWdEg5QwuhLOxJ__0jM5mIdS_zO5g1F8ptkIBO3gGMn96wWR1Y8Dn80e8Wo5c-aY/s1600/calendar+01+isb.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -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, you can make some changes.....

1. To change/replace the calendar style change the URL in blue color.
2. If calendar does not appear as showing, change -108 to 0.
3. To change the colors of day, month or year replace with your favorite color code, showing in orange color.

• Now save your template, and preview the Calendar Style Date Format added in your blogger posts.
• Below there is some samples with url code for calendar date style.

01.   02.   03. 04.   05.

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPEVD-4UB4soVEXXq6t-JEP3h41URx0iKTHijviFoxXUgrlrWqtBzZdenVS8Fz5ggjvHYTlrgeyWXhWdEg5QwuhLOxJ__0jM5mIdS_zO5g1F8ptkIBO3gGMn96wWR1Y8Dn80e8Wo5c-aY/s1600/calendar+01+isb.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4f0uqy72L_8wXEPiXxiB1DLk2i1iPVP54rglYh9VCZD-NPrR0vY5T-zaoIYcvCTVocwHUPbTs7o-4fbyKoutvZptFnYA5AO9X1xyolV3roLXOsivwpPuTiLvmZnv_NVQmAe925dq89g/s1600/calendar02+isb.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hCWhkrTkCDlwwHczIOZPECqlZkGKv_8sgBjUx_m1TBjTA-vBrFeV-4g_fEppPuvLoIxn_Scjh9ORg2esb9U8EEykspFk7Y6POkuqrzsFb93HeKdd114YvIg1linv-1YTmGPuOVY_lv8/s1600/calendar03+isb.jpg
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHmS4LmEw_HmoVWvhqTJFUBmIePRN-p09aPTer9vP4eTDNKyCLcbrRlUPhmKzYeyQUMNOVQt8LKt-Q_SNwiBJZNtspg1W_AZG8AfEmDI-G85Y2uN2enLjXLBQDdTbFRNSFtoWKKNWLhSg/s1600/calendar05+isb.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDYQKeSinKa3FDjtLFEi0ojE3uULHVVYPMHMATtnT8fJ27ca3l2kjex69anuHhNum-VKzUr2rrwBtez-jwsIgvY_d6WSV5WYP1PT6q2Md-QDjiuwXhPO3HZgzUNSvo6y0RXJFciTHdfs/s1600/calendar04+isb.jpg

If there is any difficulty or error feel free to comment us, That's all happy blogging.