3 column template

အသစ္မတင္တာက မအားလို႔ပါ (ဒီစကားလဲ ဘေလာ့ဂါေတြရဲ႕ လက္သံုးျဖစ္ေတာ့မယ္) အသစ္တင္မထားရင္ သြားမေမးနဲ႔ ေမးရင္ "မအားလို႔ပါ" ဆိုတာေတာ့ ျပန္ေျပာမွာပါ စိတ္ခ်။ ညေလးလဲ ဒီလိုပဲ အခ်ိန္ေလး နည္းနည္းရတာနဲ႔ မကလိတာ ၾကာၿပီျဖစ္တဲ့ ဘေလာ့ဂ္ေလးကို ဒီဇိုင္းေျပာင္းဖို႔ စဥ္းစားရင္း ဒီေန႔ ေျပာင္းျဖစ္ပါတယ္။ ၃ ေကာ္လံက လိုခ်င္ေနတာ ၾကာလွၿပီေလ၊ လုပ္ခ်င္ေနတာလဲ ၾကာၿပီေပါ့၊ ဖတ္ထားတာလဲ ၾကာေနၿပီ (အင္း ၾကာ၃ၾကာ ေပါင္းသြားလို႔) ဒီေန႔ေတာ့ ရေအာင္ တင္မယ္ဆိုၿပီး စမ္းၾကည့္တာ ရသြားတာပါပဲ။ နားလည္လြယ္ေအာင္ ေျပာျပထားတဲ့ "ဦးခ်စ္သူ" ကို ေက်းဇူးတင္ပါတယ္။ အရင္တုန္းကလဲ ရွင္းျပထားၾကတဲ့ သူေတြ ရွိပါတယ္။ စိတ္မ၀င္စား အားေသးလို႔ လုပ္မၾကည့္ျဖစ္ဘူး ဒီတစ္ေခါက္ေတာ့ မရရေအာင္ လုပ္မယ္လို႔ ဆံုးျဖတ္ထားလို႔ လုပ္ျဖစ္ရင္း ရသြားတာပါ။ ညေလး ထပ္ရွင္းျပရင္လဲ စိတ္မဆိုးၾကဘူးဟုတ္။ မလွ လွေအာင္၊ မညီ ညီေအာင္ ညႇိ လုပ္တာေတာ့ ညေလးက ျဖစ္ပါတယ္။
*****
စစခ်င္းမွာ Expand Widget Templates ကို အမွန္ေလးျခစ္ဖို႔ မေမ့နဲ႔ေနာ္၊ မျခစ္လဲ ရပါတယ္ ။ ၿပီးရင္ေတာ့ <div id='sidebar-wrapper'> ဆိုတာကို ေတြ႕ေအာင္ရွာပါ။ ၿပီးရင္ ေအာက္မွာ ဆက္ၾကည့္ေနာ္ ျပင္စရာရွိတာေတြကို အနီေရာင္ နဲ႔ ျပထားပါမယ္ ထပ္ျဖည့္လိုက္ပါ။

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
********* ဒီၾကားထဲက Coding ေတြ ေျပာင္းစရာ မလိုပါဘူူး။
*********
*********
</b:section>
</div>

ဒါက နဂိုရွိေနတဲ့ sidebar ကို ဘယ္၊ ညာ ခဲြေပးလိုက္တာပါ။ ညာဘက္ရွိသူမ်ား right နဲ႔ ဘယ္ဘက္မွာ ရွိေနသူမ်ား left လို႔ေပးလိုက္ပါ။ ဒီအဆင့္ထိ ၿပီးသြားရင္ တဆက္တည္း ေအာက္မွာ ေရးထားတဲ့ Coding ေတြကို <div id='main-wrapper'> ရဲ႕ အေပၚမွာ ကူးေရးလိုက္ပါ။ <div id='main-wrapper'> ရဲ႕ အေပၚမွာ ရွိေနတဲ့သူမ်ားကေတာ့ ေအာက္မွာ ကူးေပါ့၊ လြယ္လြယ္ေလး ။

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
</b:section>
<div>

ဒီအဆင့္ထိ ၿပီးသြားရင္ေတာ့ Template အေပၚဆံုးကို သြားၿပီး ပထမရွိေနတဲ့ #sidebar-wrapper { ဆိုတာကို #right-sidebar-wrapper { အျဖစ္ ေျပာင္းေပးလိုက္ပါဦး။ ၿပီးသြားရင္ #main-wrapper { ရဲ႕အေပၚမွာ #left-sidebar-wrapper { ကို အသစ္ေရးလိုက္ပါ။ ပထမ sidebar နဲ႔ တူတူပဲ ျပန္ကူးၿပီး left အျဖစ္ ေျပာင္းေပးလိုက္ယံုပါပဲ။ ေအာက္မွာေတာ့ ညေလးရဲ႕ Coding ကို နမူနာျပထားတယ္။

(((ဒီတိုင္း ကူးရမယ္မေျပာဘူးေနာ္။ ကိုယ့္ရဲ႕ Template နဲ႔ တိုက္ၾကည့္ခိုင္းတာပါ။ width ကေတာ့ လိုသေလာက္ေပါ့။)))

#left-sidebar-wrapper {
width: 300px;
float: left;
margin: auto;
font:normal 100% 'Zawgyi-One', Comic Sans MS, Arial,Verdana, Sens-Serif, Zawgyi1;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
width: 465px;
float: left;
font:normal 100% 'Zawgyi-One', Comic Sans MS, Arial,Verdana, Sens-Serif, Zawgyi1;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#right-sidebar-wrapper {
width: 300px;
float: right;
margin: auto;
font:normal 100% 'Zawgyi-One', Comic Sans MS, Arial,Verdana, Sens-Serif, Zawgyi1;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

ဒါပဲေလ ၿပီးရင္ သိမ္းၿပီး ၾကည့္ၾကည့္ပါဦး၊ မရေသးဘူး ဟုတ္။ ဘယ္ရဦးမလဲ Column က သံုးခုဆိုေတာ့ အရင္ေပးထားတဲ့ Width ေတြက ႀကီးေနမယ္ ဒီေတာ့ width:***px; ေလးေတြကို လိုသလို ခ်ိန္ညႇိၾကပါ။ ဘေလာ့ဂ္ရဲ႕ Screen size ကို ဘယ္ေလာက္ထိ ခ်ဲ႕လို႔ရလဲဆိုရင္ 1200 px ထိ ခ်ဲ႕လို႔ ရပါတယ္ (ဒါ ညေလး စမ္းခ်ဲ႕ၾကည့္တာ အဆံုးပါပဲ၊ ဒီ့ထက္ရရင္လဲ ေျပာၾကပါ ) #outer-wrapper { မွာ width: 1150px; ဆိုတာကို ႀကီးေပးလိုက္ပါ။

ၾကည့္ၾကည့္ပါဦး ၿပီးၿပီလားလို႔၊ မၿပီးေသးဘူး ဟုတ္ ဘာျဖစ္ေနလဲ။ Left sidebar နဲ႔ Post နဲ႔ ၾကားထဲမွာ ဘယ္ေလာက္မွ မျခားပဲနဲ႔ ကပ္ေနၾကတယ္ ဟုတ္ (အရမ္းခ်စ္ေနတာေလ)။ ဒါကိုလဲ ဒီလိုေလး ေပးလိုက္ရင္ အဆင္ေျပသြားမွာပါ။ သူ႔ကို margin ျပန္ခ်ိန္ေပးရပါတယ္။ ညေလးကေတာ့.....

#main-wrapper {
margin: 5px 40px 5px;
width: 465px;
float: left;
font:normal 100% 'Zawgyi-One', Comic Sans MS, Arial,Verdana, Sens-Serif, Zawgyi1;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

ဒီလိုေလးထည့္လိုက္တာ အဆင္ေျပသြားေရာ။ ေတြ႕လား main-wrapper မွာ margin ထပ္ထည့္လိုက္တာ။ က်န္တာမ်ား ကိုယ့္ဖာသာ လိုသလို ၾကည့္ၿပီး ညႇိလိုက္ၾကပါေတာ့ေနာ္။
*****
ေၾသာ္ ေျပာဖို႔ ေမ့ေနလို႔ ညေလးသံုးတဲ့ Template က Minima White ပါ။ က်န္တဲ့ Template ေတြ ရမရေတာ့ မေျပာတတ္ဘူး။ ဒီ Template သံုးရင္ေတာ့ ရၾကမွာပါ။ ေနာက္မွပဲ ေဘာင္လိုက္ရွာၿပီး ဘယ္လိုကြပ္လဲ တင္ေတာ့မယ္။ ခုေတာ့ အားလံုးပဲ တာ့တာ.....

ဘေလာ့ဂ္ကို ညေလးလိုပဲ ေပ်ာ္ရႊင္စြာ ကလိႏိုင္ၾကပါေစ........။

*****