3 colum လုပ္ၾကမယ္

ဘေလာ့နဲ႕အဆက္သြယ္နည္းနည္းျပတ္ေနတယ္ .... အလုပ္ေတြရႈပ္လို႕လား အရႈပ္ေတြလုပ္တာဆိုတာ ကိုယ့္ကိုယ္ကို မခြဲျခားတတ္ စိတ္ေတြကလဲ တစ္စုတစ္စည္းမရွိေတာ့ ဒီေတာ့ ဘာလုပ္လို႔ ကိုင္ရမွန္လည္းမသိေတာ့ဘူး .... စိတ္ညစ္တယ္ဆိုပီ ထိုင္ေအာေနလို႕လဲ သနားမဲ့သူမရွိ ... ဘ၀ ကို ဒီလိုဘဲ ျဖတ္သန္းရအံုးမွာေပါ့ ... ေအာ္ သူငယ္ခ်င္းမ်ာကို ေျပာရအံုးမယ္ ... 3 colum ေတြကိုလုပ္ခ်င္တယ္ေပါ့ဆိုရင္ .. ဘေလာ့ကိုေရးတာ အခ်ိန္ၾကာလာတာနဲ႕အမွ် အခ်က္လက္ေတြက မ်ားတထက္မ်ားလာ ကိုယ္ကလည္းမျဖဳတ္ခ်င္ ဆိုေတာ့ သူတို႕ေပးထားတဲ့ Template က ေကာလန္က ႏွစ္ခုဘဲဆိုေတာ့ အခက္ေတြ႕ပီေပါ့ ... ဒီျပင္ 3 colum သူမ်ားေရးထားတာကို ယူသံုးမယ္ဆိုရင္လဲ ကိုယ့္ စိတ္ႀကိဳက္ ရခ်င္မွ ရလိမ့္မယ္ ... ဒီေတာ့ ဘာလုပ္ရမလဲ ... ကၽြန္ေတာ္တို႕ ေကာလန္တစ္ခု ထပ္တိုးမွာေပါ့ ... ဘယ္နားမွာ သြားတိုးမလဲ .... လက္တို႕ေမးေနမလား ...

ကၽြန္ေတာ္တို႕လို ကြန္ပ်ဴတာကို ငယ္ကတည္းက ပိုက္ပီေမြးလာတဲ့သူ css code ကို ၀ါးမ်ဳိမယ္ သေယာင္ေယာင္ English စာ စကားဆိုတစ္လံုးမွမရေအာင္ ကၽြမ္းက်င္သူေတြဆိုေတာ့ ဟိုလုပ္ဒီလုပ္နဲ႕ ဘယ္က ဘာေတြေပ်ာက္သြားလဲမသိ ေနာက္ဆံုးဘာမွမက်န္ေတာ့ .... အဲအခုေတာ့ရသြားပီ ... ျပန္ေျပာျပမယ္ ... ဒီလိုပံုစံကိုရသြားေအာင္ကူညီေပးသူကေတာ့ .... ကၽြန္ေတာ္ေကာင္မေလးပါ ... သူက လမ္းခြဲစကားေျပာေတာ့ ... gtalk ကို မဖြင့္ျဖင့္ေအာင္ ကိုယ့္ကိုယ္ကို အားတင္ရင္နဲ႕ ရသြားတာပါ ... ဒါဆို ဒီပံုစံဟာ ကၽြန္ေတာ္ ရဲ႕ နွလံုးသားကို ခင္းၿပီ လုပ္ခဲ့တာပါလို႕ ေျပာရင္ ယံုၾကမွာလား ... မယံုလဲေနပါ အေၾကာင္းမဟုတ္ .... အခ်ိန္မရတဲ့ၾကားက ဘေလာ့ကိုေရးေနရတဲ့ သူငယ္ခ်င္းေတြအဆင္ေျပေအာင္လို႕ ဒီဟာေလးကို အေျခခံပီ ကၽြန္ေတာ္လုပ္ လာခဲ့တဲ့ အေတြ႕ႀကံဳေလးေတြကိုေျပာျပမယ္ .... အို စမယ္ေနာ္ ... အာလူနည္းနည္းမ်ားသြားတယ္ ....

ဘေလာ့တစ္ခုကို လုပ္ေတာ့မယ္ဆို ကၽြန္ေတာ္တို႕ ပထမဆံုးနားလည္းထားရမွာက Blog Layout ရဲ႕ လုပ္ေဆာင္မႈ အပိုင္းေလးေတြကိုသိရမယ္ ... ဘေလာ့ တစ္ခုရဲ႕ အေျခခံအစိတ္ပိုင္းမွာ ေတာ့ Header- section, Main-section, Sidebar section ႏွင့္ Footer-section ဆိုပီ ပါ၀င္ပါတယ္ .... ဒီေတာ့ ကၽြန္ေတာ္တို႕ တစ္ေတြ ယူသံုးေနတဲ့ Layout က ဒီပံုစံမဟုတ္လား .... အဲဒီအထဲမွာ ဘဲ အပိုင္းေလးပိုင္းကို ခြဲျမင္တတ္ဖို႕ လိုမယ္ .... ဒီအထဲမွာ ပါ၀င္တဲ့ HTML code ေတြကိုေတာ့ ဒီေနရာမွာၾကည့္လိုက္ပါ ..
ၾကည့္ရတာ လြယ္ကူေအာင္ဆိုပီ နံပတ္ေတြ ထည့္ေပးထားတယ္ .... နံပတ္ 010 ကေန 0320 အထိဟာ body-tags ျဖစ္ပါတယ္ .... အာလူက မ်ားလြန္ေတာ့ သူငယ္ခ်င္းေတြ ၿငိေငြ႕ေနေတာ့မယ္ .. ဒါဆို စလုပ္ၾကရေအာင္ ... အေပၚက ရွင္းျပခဲ့တဲ့ အပိုင္းေတြကို နားလည္ေလာက္ပီေပါ့ေနာ္ ....
ေအာက္ က formatting code ေတြကို ရင္းႏွီးေအာင္ၾကည္ထားပါ ...
#outer-wrapper {
with: 660 px;
padding: 10px
........... }
#main-wrapper{
width: 410px;
float: left;
...........}
#sidebar-wrapper {
width: 220px
float: right;
...........}

ဒီေလာက္ဆို စၿပီး ...
ပထမဆံုးက ေတာ့ Edit Template ကို သြားၾကမယ္ .....
ဒုတိယကေတာ့ sidebar code ကို ဒီလိုေလး (#right-sidebar-wrapper)
(b: section class='sidebar' id='right-sidebar' preferred='yes')
(/div)
ျဖစ္ေအာင္ေျပာင္းလိုုက္ပါ ... သူနဂုိ #sidebar-wrapper) ကို # right-sidebar-wrapper အျဖင့္ ေျပာင္းလိုက္ျခင္းပါ ... တတိယ အဆင့္မွာေတာ့ (div id=left-sidebar-wrapper)
(b: section class= 'sidebar' id='left-sidebar-wrapper' preferred='yes'/)
(/div)
ဆိုပီ ေနာက္ထပ္ အသစ္ ထည့္ေပးလိုက္ရပါ့မယ္ ဘယ္မွာ သြားထည့္ရမလဲဆိုေတာ့ (div id= main-wrapper အေ၇ွ႕မွာထည့္လိုက္ပါ .... ေနာက္ save ... ဒီေတာ့ ဒီပံုစံေလးကိုရလာတာေပါ့ ......
အဆင့္ေလးကိုေရာက္လာပီေနာ္ . ..
#left-sidebar-wrapper {
width:220px;
float:left;
word-wrap:break-word;
overflow:hidden;
........}
ကို #main-sidebar-wrapper ရဲ႕ အေပၚမွာထားပါ ..... ဒါဆိုရင္ ရခါနီးပီေပါ့ ... စိတ္ဓါတ္မက်ပါနဲ႕အံုး ....
ေနာက္ဆံုး ဘာက်န္ေသးလဲဆိုရင္ ... ဒီအေပၚပံုက အဆင္ေျပေနပီ .. ဒါေပမဲ့ ညာဘက္က ဘာ ဘာလို႕ ေအာက္ေရာက္ေနရတာလဲ ... ရွင္းရွင္းေလးပါ .. သူ႕ရဲ႕ outer-wrapper ကိုခ်ဲ႕ေပးလိုက္ပါ ... သူ႕နဂုိ က 660 ရွိရင္ ရွိလိမ့္မယ္ ... ဒါကို 860 ေလာက္ေျပာင္းေပးရင္ အဆင္ေျပႏိုင္ပါတယ္ ..... အဲလိုဆိုရင္ ... ေနာက္ဆံုး အသံုးျပဳလို႕ရတဲ့ ဒီပံုေလးရပီေပါ့ ..... အဆင္ေျပၾကပါေစ ရင္နာနာနဲ႕ ဘဲ ေရးလိုက္ရတာပါ ... မရရင္ ျပန္ေျပာေနာ္ ... သိတာေလးကို မွ်ေ၀ ေပးဖို႕ ၀န္မေလးပါဘူး .....

(မွတ္ခ်က္ ။ ။ ေရးထား တာေတြကို တဆင့္ခ်င္း လုပ္ေဆာင္ပါ .... ကြင္ေလးေတြကိုလည္း ျပန္ျပင္ေရးေပါ့ေနာ္ ...)