Add Beautiful Calendar Style Date Widget for Your Blog Post


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Adding calender style date for your blog post would make easy to understand your readers about your blog post date as well as month. You have seen such a calender in WordPress blogging platform. Now feel free, because you can also add a beautiful calender style post widget to your blogger blog posts. Its quite simple and Interesting. You can add this by making some simple changes in your blogger template. So lets make It in real.


How to create calendar style dates in Blogger How to create Calendar Style Date in Blogger posts
Anxious to see the demo? You can click on the below Demo Icon ▼ for a preview of this calendar Style Date widget.

Calendar Style Date widget demo

For adding this calendar Style Date widget we have to make a small change in our blogger settings before adding the html. So at first Log in into your Blogger account and go to Dashboard > Settings > Formatting. Now just look for the Date Header Format option and change the date in dd/mm/yyyy Format (select second one, l'm using new blogger template and in old template its so easy to set).

If you are using the new blogger template just go to Settings > Language and Formatting (in the left side) > Date Header Format.


Add Beautiful Calendar Style Date Widget for Your Blog Post


Now lets add the html code into your blogger template. To add this follow below steps carefully.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

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

You may find the above code twice in your blogger template. So what you have to do is replace the both code 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 you may please add the following code just Above/Before </head> (use Ctrl+F to find the code)

<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(http://1.bp.blogspot.com/-NVj6tUKJgLo/UBShW2dCLSI/AAAAAAAACZk/3TkTa8Hzqt0/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>


add calendar style date to blog post Please note the following things
Before you saving your template, please do read the following points. 

warning icon.png
  • Line no 22: If you wanna change the style of your calender replace the image url with yours
  • Line no 27: If the calendar widget doesn't appear properly, change -108 with 0;
  • Line no 38, 46 and 53: Have you seen green marked areas? You can change the month color, days color and year color by changing the html color code.

Now save your template and Its ok. You are done. Happy blogging:)