Add 3 columns to footer

Oct 24, 2007

Footer အပိုင္းမွာ ေကာ္လံ ၃ခု ေပါင္းထည္႕ နည္းပါ။ wordpress template ေတြမွာ ေတာ္ေတာ္မ်ားမ်ား ေတြ႕နိဳင္ပါတယ္။

၁။ ပထမဦးစြာ တန္းပလိပ္ကို ဘတ္ကပ္ လုပ္ပါ။
၂။ Footer အပိုင္းမွာ widgets မ်ားတပ္ဆင္ ထားတာ ရိွရင္ အားလံုးကို ၿဖဳတ္ပါ။
၃။ Template>Edit HTML ကေန ေအာက္မွာ ၿပထားတဲ႕ အနီေရာင္ ကုတ္စာသားကို ရွာပါ။ expand widget templates လုပ္စရာမလိုပါ။

<div id="'footer-wrapper'">
<b:section class="'footer'" id="'footer'/">
</div>

အနီေရာင္ေနရာမွာ ေအာက္က ကုတ္မ်ားကို အစားထိုးပါ။

<div id='footer-column-container'>
<div id='footer2'
style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div
id='footer3' style='width: 40%; float: left; margin:0; text-align:
left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54'
width='90%'/></p>
<div id='footer-bottom'
style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div
style='clear:both;'/>
</div>

၄။ CSS section အပိုင္းမွာ ဒီကုတ္ေတြကို ထည္႕ပါ။

#footer-column-container {clear:both;}
.footer-column
{padding: 10px;}

ေအာက္ေၿခမွာ ေပၚေနတဲ႕ horizontal line က color ကို ေၿပာင္းခ်င္ရင္ color ကုတ္ကို ေၿပာင္းထည္႕ပါ။ ၿဖဳတ္ခ်င္ရင္ တခုလံုးကို ဒလိလုပ္ပါ။

<hr align='center' color='#5d5d54' width='90%'/>

အၿပည္႕အစံုေလ႕လာရန္

အလည္လာသြားၾကတဲ႕ ညီအကို ေမာင္ႏွမေတြ အားလံုးကို ေက်းဇူးအထူး တင္ရိွပါတယ္ ခင္ဗ်ာ။ ခင္မင္ေလးစားလွ်က္...