CHANGE POST DATE BECOME CLANDER ICON

မဂၤလာပါခင္ဗ်ာ........
ကြၽန္ေတာ္အခု ေျပာျပမွာကေတာ့ ကိုယ့္ရဲ ့POST ထိပ္ဆံုးမွာေပၚေနတဲ့
POSTING DATE ေလးကို CLANDER ICON ပံုစံေလး ေျပာင္းႀကည့္
ရေအာင္ခင္ဗ်ာ။ကြၽန္ေတာ္ကေတာ့ ညမအိပ္ပဲနဲ ့ လုပ္လိုက္ရပါတယ္ ။
ကြၽန္ေတာ္ ကိုကလည္း ညံ့တာပါတယ္ေလ :Dကြၽန္ေတာ္ POSTDATE
ကေန CLANDER ICON ေလးေျပာင္းတာကို ေျပာျပပါ့မယ္ ခင္ဗ်ာ။ :P
အဆင့္ေလးကေတာ့ နည္းနည္းေတာ့ ရႈပ္တယ္ခင္ဗ်ာ။ ကြၽန္ေတာ္တက္
ႏိုင္သမွ် အေကာင္းဆံုး ျဖစ္ေအာင္ ေရးေပးပါမယ္ ခင္ဗ်ာ။ေအာက္ကအ
ဆင့္ေလးေတြ အတိုင္း လုပ္ႀကည့္လိုက္ရေအာင္ဗ်ာ။

၁။ Setting > Formatting မွာ "date header format" ဆိုတဲ့ေနရာေလး
ရွိပါတယ္။ (1.24.2008).ပံုစံေလးျဖစ္ေအာင္ ေျပာင္းလိုက္ပါ ခင္ဗ်ာ။ျပီးရင္
Save Settings ကိုႏွိပ္လိုက္ပါခင္ဗ်ာ။

၂။ ဒုတိယ အဆင့္ကေတာ့ "Template --> Edit HTML" ကိုသြားပါ။ေရာက္
ျပီဆိုရင္ေတာ့ "Expand Widget Templates" ေလးကို အမွတ္ေလးျခစ္လိုက္
ပါ ခင္ဗ်ာ။အမွတ္ေလး ျခစ္ျပီးရင္ေတာ့<TITLE><data:blog.pageTitle/>
</TITLE>ဆိုတာေလးကိုရွာပါ ၊ ေတြ ့ျပီဆိုရင္ေတာ့ အစိမ္းနဲ ့ ေရးထားတဲ့
CODE ေတြကို ေအာက္ကေန ကပ္ျပီး ထည့္လိုက္ပါ။
ကိုယ္လိုခ်င္တဲ့ Code ကိုရွာရင္ Ctrl+F ေလးကို အသံုးျပဳျပီးရွာပါ ခင္ဗ်ာ။

<SCRIPT type='text/javascript'>
//<![CDATA[

function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

၃။ေအာက္ကေပးတဲ့ Code ေတြကိုရွာပါ။

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
မေတြ ့ဘူးလား၊ဒါဆိုရင္ မပူပါနဲ ့
h2.date-header {
margin:1.5em 0 .5em;
}
ေလးကို ထပ္ရွာလိုက္ပါ ခင္ဗ်ာ။
ေတြ ့ျပီလား ? ေတြျပီဆိုရင္ေတာ့ အစိမ္းေရာင္ Code ေလးေတြကို ေအာက္ကေန ကပ္ျပီး
ထည့္ေပးပါဦးခင္ဗ်ာ။

.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}

အဲဒီမွာ တစ္ခုျဖတ္ျပီးေျပာပါရေစ။ http://blogoholic.info/files/kalender/bluecalend.gif
ဆိုတာကို ေတြ ့မွာပါ၊bluecalend.gif ေနရာမွာ ေအာက္ကေပထားတဲ့ ပံုစံေတြထဲက ႀကိဳက္ရင္
bluecalend.gif ဆိုတဲ့ ေနရာေလးမွာ orangecalend.gif ဆိုျပီး ေျပာင္းလိုကေပ့ါ ခင္ဗ်ာ။
တတိယ အဆင့္ျပီးပါျပီ ခင္ဗ်ာ။ေနာက္တစ္ဆင့္ပဲ လိုပါေတာ့တယ္၊ :) :L

၄။ေနာက္ဆံုပိတ္ အဆင္ပါ ခင္ဗ်ာ။ ထံုးစံအတိုင္း <data:post.dateHeader/> ေလးကိုရွာလိုက္ပါ
ေတြ ့ရင္ <data:post.dateHeader/> ေနရာမွာ
<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
အစိမ္းေရာင္ Code ေလးကို အစားသြင္းေပးပါ ။
ေန ့ကေအာက္က လကို အေပၚမွာ ရွိေနေစခ်င္ရင္ padding: 4px 0px 0px 0px; ဆိုတာေလးကို
.month { ေအာက္မွာတည့္ ၊ျပီးရင္ .day { ဆိုတာေလးရဲ ့ေအာက္မွာပါ ထည့္ေပးလိုက္ပါ။ PREVIEW
နဲ ့ႀကည့္ အဆင္ေျပျပီဆိုရင္ Template ကို Save လို ့ရပါျပီ။
အဆင္မေျပတာရွိရင္ Cbox ကေန ေျပာခဲ့ပါ ခင္ဗ်ာ။ ကြၽန္ေတာ္ ထပ္ျပီးေျပာျပေပးပ့ါမယ္။

ဒါေတြလည္းေရးထားေသးတယ္ဗ်ာ။