How to make a Calendar Icon Date in blogger

Today as a first sharing for Blogger Tutorial, I’m going to teach how to create a calendar icon date for blogger posts. It's very common to see calendar icon posts in blogger. Today In this tutorial, we'll learn how to create a calendar style date for Blogger posts.

Step 1: Go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in my example below (DD-MM-YYYY)

Step 2: Then go to Template > Edit HTML

Step 3: And search (CTRL + F) the following line:

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

Step 4: In case you find it twice, then you should REPLACE it twice with this code:

<div id='Date'>

<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>

</div>

<b:else/>

<div id='Date'>

<script>changeDate(&#39;&#39;);</script>

</div>

Step 5: Now search for this tag (CTRL + F to find it)

</head>

Step 6: And paste the code from below 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/AVvXsEifzSz2Yj5Puaon65LGhoeruiXmkhzodgLD3xsLUXfdtA_Xxqd8qxp4ssKZYXPtLImdDqamXbNKUm8R1V7aJn7tyjYuvrUkzUsa934DXI8xEUQWvSfWZ73lALxf6KJIQdLf-z2SXk7GNNH5/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, we can make some changes:

♥ To change the calendar float, change “left” to right

♥ 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

Step 8: Now Preview your Template and if everything is ok, click on the Save button.

You can choose any of the icons below just right click on the calendar icon to download and host it from your blog itself or you can use the default link below snippet. Enjoy!
P/S: Help to click on my ads, thanks

 download