ဘ​ေလာ့ပို႔စ္​ရဲ႕ ​ေဘးမွာ calendar ပံု​ေလးထည္​့ခ်င္​ရင္​

How to create calendar style dates in Blogger

Step 1. Go to "Settings" > "Language and Formatting" - "Date Header Format" and change the date format as you can see in this example below (first add day, month and finally year)
  

Step 2. Go to Template > click the "Edit HTML" button

Step 3. Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 4. Type or paste the following line inside the search box and hit Enter to find it:

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

Step 5. အ​ေပၚက ကုဒ္​၂​ေၾကာင္​းဟာ ၂ခါ​ေတြ႔ပါလိမ္​့မယ္​ ၂​ေနရာလံုးမွာ ​ေအာက္​ကကုဒ္​ကိုအစားထိုး​ေပးလိုက္​ပါ

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

Step 6. Now type this tag inside the search box and hit Enter to find it:

</head>

Step 7.  </head> ကို​ေတြ႔ရင္​ သူ႔ရဲ႕အထက္​က ​ေအာက္​ကကုဒ္​ကို ထည္​့ရမွာပါ  

<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/AVvXsEgyIW4RtvKDJZNMBPssnCpfLze_C-5pSN9LRzdskrwg1WcqQaEUabsXdCUpubd5MURca-irW5YYYeNrabW8cpitP3DEoj4BdwTig4kNfT8-d63P0bkB3PJZ_eHSyrLn6Rjrxy12uIdLz6ao/s1600/calendar07.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>