Blog Footer ကို (၃) ေကာ္လံ ခြဲျခင္း

Contributor: ေမွာ္ဆရာ

မိမိဘေလာ့ဂ္ မွာ Footer ကို (၃) ေကာ္လံခြဲလိုက္ျခင္းအားျဖင့္ ထပ္ေဆာင္း Widget ေတြထည့္ဖို႔ အပိုေနရာေတြ ရရွိလာေစရံုမွ်မက၊ Blog ရဲ့ ဒီဇိုင္းကိုလည္း ယခုေနာက္ဆံုး Modern Web Design ေရးျခင္းမွာ အသံုးျပဳမႈအမ်ားဆံုးျဖစ္ေနတဲ့ Web 2.0 ပံုစံအျဖစ္ Upgrade လုပ္ၿပီးသားျဖစ္ေနပါလိမ့္မယ္။ ၎အျပင္ မိမိဘေလာ့ဂ္ ကို Page Loading လုပ္တဲ့ေနရာမွာ ျမန္ဆန္သြက္လက္လာေစျခင္း၊ စတဲ့ ထပ္ေဆာင္း အက်ိဳးေက်းဇူး ေတြကိုပါ ခံစားရဦးမွာပါ။

Blog Footer ကို (၃) ေကာ္လံခြဲဖို႔အတြက္ ေအာက္ပါအဆင့္မ်ားအတိုင္း လုပ္ေဆာင္နိဳင္ပါတယ္။


(၁) မိမိ Template ကို Backup ျပဳလုပ္ျခင္း

ဒါဟာ ဘေလာ့ဂၢါေကာင္း တစ္ေယာက္မွာ ရွိေနသင့္တဲ့ အေရးႀကီး အမူအက်င့္တစ္ခုပါပဲ။ ဘာျဖစ္လို႔လဲဆိုေတာ့ အကယ္၍ Backup လုပ္မထားခဲ့ရင္ မိမိ Template ကို ျပဳျပင္မႈလုပ္ရင္း မွားယြင္းမႈတစ္စံုတစ္ရာ ျဖစ္ပြားခဲ့ပါက အႀကီးအက်ယ္ မဟုတ္သည့္တိုင္၊ အနည္းအက်ဥ္းေတာ့ ဒုကၡေရာက္တတ္လို႔ပါပဲ။မိမိမွာ Backup လုပ္ထားတဲ့ Template ရွိခဲ့ရင္ေတာ့ မွားယြင္းသြားလ်င္ပင္ သက္ေတာင့္ သက္သာေျဖရွင္းနိဳင္ပါလိမ့္မယ္။ Edit HTML စာမ်က္ႏွာမွာ Download Full Template ကို ကလစ္ၿပီး Template XML ဖိုင္ကို ေဒါင္းလုဒ္ ျပဳလုပ္ထားလိုက္လ်င္ Template Backup လုပ္ျခင္းကိစၥၿပီးပါၿပီ။

(၂)Footer Section ရွိ ယခင္ Widget Contents မ်ားကို Backup ျပဳလုပ္ျခင္း

Blogger Dashboard မွတဆင့္ Layout ကိုသြားၿပီး၊ မိမိ Footer Section မွာယခင္ထည့္ထားတဲ့ Widget Content မ်ားအားလံုးကို Edit ကိုကလစ္၍ Copy လုပ္ကာ Notepad တစ္ခုခ်င္းစီႏွင့္ သိမ္းဆည္းထားပါ။ ၿပီးလ်င္ ၎ Footer Content မ်ားအားလံုးကို Remove လုပ္ပါ။ ဤသို႔မလုပ္လ်င္ Template အား Footer Section 3 -Columns ခြဲ၍ ရမည္မဟုတ္။ New Footer Section ေတြခြဲၿပီးသြားတဲ့ အခ်ိန္က်ေတာ့ အလြယ္တကူ အားလံုးကိုျပန္ထည့္နိဳင္ပါလိမ့္မယ္။ (ယခင္ကတည္းက Footer Section မွာ ဘာမွထည့္မထားတဲ့ သူမ်ားအေနနဲ႔ကေတာ့ ဒီအဆင့္ကို လုပ္ေဆာင္ရန္လိုမည္ မဟုတ္ပါ။)

(၃)Footer Section အတြက္ CSS(Cascading Style Sheets) တြင္ ျဖည့္စြက္ေၾကညာျခင္း

Blogger Dashboard မွ တဆင့္ Layout ကိုသြားၿပီး Edit HTML Box ထဲတြင္ "</b:skin>" ဆိုေသာ Tag ကိုေတြ႔ေအာင္ရွာပါ။ ၎ကို ေတြ႔သည္ႏွင့္ ထို Tag မတိုင္မွီ ေအာက္ပါကုဒ္မ်ားကို အေပၚမွ ေပါင္းထည့္ေပးပါ။

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


(၄)ထပ္ေဆာင္းကုဒ္မ်ား Footer Section တြင္ထည့္သြင္းျခင္း

Blogger Dashboard မွတဆင့္ Layout->Template->Edit HTML ကိုသြားပါ။ ေအာက္ပါကုဒ္မ်ားကို ေတြ႔ေအာင္ရွာပါ။

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

အထက္ပါကုဒ္မ်ားကို ရွာေဖြရာမွာ မိမိရဲ့ Template ေပၚမူတည္ၿပီးေတာ့ အနည္းငယ္ကြဲလြဲမႈ ရွိေကာင္းရွိနိဳင္ပါတယ္။ ဥပမာ- 'footer-wrapper' အစား 'footer' ပဲျဖစ္ေနတာမ်ိဳးေတြရွိတတ္ပါတယ္။အားလံုးဟာ အတိအက် ေနရာတိုင္းမွာ မတူပဲကြဲျပားမႈ ရွိနိဳင္တယ္ဆို တာေလးကို မွတ္ထားဖို႔အတြက္ပါ။

၎ Footer Section ကိုေတြ႔ၿပီဆိုလ်င္ ကၽြန္ေတာ္တို႔လုပ္ဖို႔လိုတာကေတာ့ အနီႏွင့္ျပထားတဲ့ ကုဒ္မ်ားအားလံုးကို ေအာက္ပါကုဒ္မ်ားျဖင့္ အစားထိုးရန္ပါပဲ။

<div id='footer-column-container'>

<p>
<center><b>{ <i>YOUR TEXT</i> }</b></center>
<hr align='center' color='#cccccc' width='90%'/>
</p>


<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>

အထက္ပါကုဒ္မ်ားထဲမွာ အနီႏွင့္ေရးထားတဲ့ Your Text Here ဆိုတာကေတာ့ The Whole Footer Section ႀကီးတစ္ခုလံုးအတြက္ ေခါင္းစဥ္တပ္ထားေပးျခင္းျဖစ္၍ မိမိႀကိဳက္ႏွစ္သက္ရာ နာမည္တစ္ခုခုေပးနိဳင္ပါတယ္။
အားလံုးၿပီးတာနဲ႔ မိမိ Template ကို Save လုပ္နိဳင္ပါၿပီ။ Blog View တြင္ Footer Section ကို (၃) ေကာ္လံျဖင့္ေပၚေနတာကို ေတြ႔ရပါလိမ့္မယ္။ Layout ထဲကို သြားၿပီး ႀကိဳက္နွစ္သက္ရာ Widget Contents မ်ားထပ္ေဆာင္းေပါင္းထည့္နိဳင္ပါၿပီ။



အကယ္၍ Footer Section ကိုပိုင္းျခားထားေသာ ေရျပင္ညီမ်ဥ္းအေရာင္ကို မိမိဘေလာ့ႏွင့္လိုက္ဖက္ညီေအာင္ေျပာင္းလဲလိုပါက ေအာက္ပါကုဒ္ကို ေတြ႔ေအာင္ရွာၿပီး အနီျပထားေသာ ကာလာကုဒ္ ကိုစိတ္ႀကိဳက္ေျပာင္းလဲသတ္မွတ္နိဳင္ပါတယ္။

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

ကာလာကုဒ္ေတြကို အတိအက်နဲ႔ အလြယ္တကူ သိခ်င္တယ္ဆိုရင္ေတာ့ ဒီေဆာ့ဖ္၀ဲလ္ ေလးက ကူညီနိဳင္ပါလိမ့္မယ္ခင္ဗ်ား။ ၎မ်ဥ္း ပါရွိတာကုိပင္ မလိုလားဘူးဆိုပါကလည္း အထက္ပါ စာေၾကာင္းတစ္ေၾကာင္းလံုးကို Delete လုပ္လိုက္ရံုသာျဖစ္ပါတယ္။

Sources: BLogU | BloggerBuster

Technorati Tags: Blogger Hackz | How to | 3 columns footer | footer | blog 3 columns footers | hack