Wednesday 15 September 2010

ဘေလာ့ဒ္ရဲ႕ ေန႔စြဲ ေလးေတြကုိ ပုံစံ ေျပာင္းမယ္

ဒီစာမ်က္ႏွာ ကလုိ ေျပာင္းထားလုိက္တဲ့ ေန႔စြဲ ပုံစံ မ်ိဳး လုပ္ခ်င္ေနသူေတြ အတြက္ ထပ္မံ လုိက္ဆင့္ ကမ္းလုိက္ပါတယ္။
Dashboard > Layout > Settings > Formatting မွ Date Header Format ကုိ ေအာက္ကလုိေျပာင္းေပးပါ။
မိမိေရြးထားေသာေနစြဲ စာတန္း ပုံစံ တြင္ spaces သာပါရမည္ျဖစ္ျပီး၊ က်န္ေသာ commas, - ပုံစံ တုိ႔ကုိ သုံးစြဲရန္မရပါ။


ေနာက္ျပီးေတာ့ Template > Edit HTML > Expand Widget Templates အမွတ္ေပးပါ။ ျပီးရင္ေတာ့

<head>
ရဲ႕ ေနာက္မွာ

<script>
function date_replace(d){
var da = d.split(' ');
day = "<span class='theDate'>"+da[0]+"</span>";
mon = "<span class='theMonth'>"+da[1].slice(0,3)+"</span>";
year = "<span class='theYear'>"+da[2]+"</span>";
document.write(day+mon+year);
}
</script>
အေပၚက ကုဒ့္ေတြ ကုိထည့္ေပးပါ။ ျပီးရင္ ေတာ့
div#post-date {
display: block;
margin-top:20px;
float:left; /* မိမိထားခ်င္ေသာ ေနရာ ဘယ္ဘက္ (သုိ႔မဟုတ္) ညာဘက္ကုိ ေရြးေပးပါ */
padding-right: .5em; /* ေန႔စြဲစာလုံးမ်ား၏ ညာဘက္ျခမ္း အကြာအေ၀း */
padding-left: .5em; /* ေန႔စြဲစာလုံးမ်ား၏ ဘယ္ဘက္ျခမ္း အကြာအေ၀း */
background-color: #CCC; /* မိမိထားခ်င္ေသာ ရုပ္ပုံအားထည့္ရန္ေနရာ */
border: 3px double gray; /* ေန႔စြဲကုိ ေဘာင္ခတ္ထားရန္မ်ဥ္း ေၾကာင္း */
}


div#post-date span.theDate {
display: block; /* to put this in a different line */
font-size: 13px; /* to make the date stand out */
font-weight:bold;
background-color: transparent; /* to let the background show through */
color: #000; /* ရက္စြဲ ၏ အေရာင္ /*
}


div#post-date span.theMonth {
display: block;
font-size: 10px; /* smaller compared to the date */
background-color: transparent;
color: #000; /* လ ၏ အေရာင္ /*
}


div#post-date span.theYear {
display: block;
font-size: 10px; /* smaller compared to the date */
background-color: transparent;
color: #000; /* ႏွစ္ ၏ အေရာင္ /*
}

ေတြကုိ

/* Page Structure အေပၚမွာ ျဖစ္ေစ၊

<b:skin>
ရဲ႕ေနာက္မဆုံးခင္ ၾကားထဲမွာ ျဖစ္ေစ ထပ္ထည့္ေပးပါ။
ေနာက္ဆုံးအေနနဲ႔က

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

ကုိရွာျပီးေတာ့

<data:post.dateHeader/>
ေနရာမွာ

<div id='post-date'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>

နဲ႔ အစားထုိးပါ။ ဒါဆုိရင္လုံေလာက္ပါျပီ။ Preview သြားၾကည့္ႏုိင္ျပီးေတာ့ ၾကိဳက္ရင္ Template ကုိ save လုပ္လုိ႔ရပါျပီ။
မူရင္း။ ။http://lastword.blogspot.com/

0 comments:

Post a Comment