ပုိ႔စ္ ေန႔စြဲကုိ ျပကၡဒိန္နဲ႔ လုပ္မယ္

သည္ေန႕တင္မဲ့ နည္းလမ္းေလးကေတာ့ မိမိတို႕ ပို႕စ္ေတြရဲ႕ ေန႔စြဲေလးေတြမွာ ျပကၡဒိန္ေလးနဲ႕ ေပၚေနေအာင္  လုပ္တဲ့နည္းပညာေလးျဖစ္ပါတယ္.. ကဲ စလိုက္ရေအာင္ေမနာ္....

 

လုပ္နည္းေလးကို ပုံေလးေတြ နဲ႕ တစ္ကြ ရွင္းးျပသြားပါ့မယ္..

အဆင့္(၁)

 

ပုံမွာ ျပထားသလို ဘေလာ့ကာ ၀င္ပါ setting ကေန formatting ကိုဆက္သြားလိုက္ပါ...

အဲမွာဘဲ Date header format ဆိုတဲ့ေနရာမွာ ရွိတဲ့ date ေလးကို ၾကည့္ထားပါ။

အဆင့္(၂)

If you're using the newer interface: go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in my example below:

 

 

သည္မွာကလဲ အေပၚကအဆင့္ (၁)  နဲ႕ အတူတူပါဘဲ ပို႕တင္တဲ့ ဘေလာ့ကာ ပုံစံကို သုံးၾကတာခ်င္းမတူညီ ၾကပါဘူး  ဒါေၾကာင့္ ၂ မ်ိဳးစလုံးးတင္ျပလိုက္တာပါ.. အဆင့္ (၁) နဲ႕ (၂) က အတူတူပါေနာ္။

ကဲ ကုဒ္ေတြ ထည့္တာ စေတာ့မယ္ဗ်ာ...  Design > Edit HTML > ကိုူ အဆင့္ဆင့္ သြားပါ.. အဲမွ သတိထားစရာကေတာ့ "Expand Widget Templates" ဆိုတာကို အမွန္ျခစ္ေပးးပါ။ ေနာက္ျပီး(CTRL + F) အကူညီနဲ႕  ေအာက္ကကုဒ္ကို ရွာပါ..

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

ေတြ႕ျပီဆုိတာနဲ႕ အဲေနရာကို ေအာက္က ကုဒ္ေတြ အစားထိုးေပးလိုက္ပါ

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

ေနာက္ တဆင့္အေနနဲ႕ </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/AVvXsEh-3brP2Uhs08sxEs_A18a2ZO7Z22rNeufAsPbiKpHg80VRnJYfY2UzTP4xf1U3ZZQkCEpkxnrDY3SIAPh5o8HcX5meuTo3CKZgr9oNx5NPcUTE7oLEnCmwLihKTbZQY8HqtEo2JoyaQjpd/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>

 ျပီးးတာနဲ႕ Preview နဲ႕ ကလစ္ျပီးးၾကည့္လုိက္ပါ.... ေသျခာျပီ ဆိုတာနဲ႕  save template ကို ကလစ္ျပီးး save လုိက္ၾကပါေတာ့.