ေထာင့္လံုး စတုဂံျဖင့္ တန္းပလိတ္ကို တန္ဆာဆင္ျခင္း

Template မွာ အနားကို လံုးထားရင္ အျမင္အရ တကယ္ကို႔ က်က္သေရ ရွိသြားသလို ခံစားရတယ္။ က်ေနာ္တို႔ တန္းပလိတ္မွာ အနားေတြ လံုးခ်င္တယ္ ဆိုရင္ ပံုေတြနဲ႔ ခ်ိတ္ဆက္ၿပီး CSS Code ေတြနဲ႔ ပိုင္ပိုင္ႏိုင္ႏိုင္ ခ်ိတ္သံုးႏိုင္မွ စတိုင္က်တဲ့ ပံုတစ္ပံု ရႏိုင္ပါမယ္။ က်ေနာ္တို႔ ကံေကာင္း ေထာက္မစြာပဲ Spiffy Corners ဟာ က်ေနာ္တို႔ လိုခ်င္တဲ့ ေထာင့္လံုး ေဘာင္ေတြကို လြယ္လြယ္ကူကူနဲ႔ (အေရးအႀကီးဆံုးက ပိုက္ဆံမယူဘဲ) လုပ္လို႔ရတာ ေတြ႕ရပါတယ္။ တန္းပလိတ္မွာ ထည့္ဖို႔ CSS Code ေတြကို ထုတ္ေပးတာေၾကာင့္ လြယ္လြယ္ကူကူနဲ႔ ယူသံုး႐ံုပါပဲ။

Spiffy Corners ဆိုတာ ေထာင့္လံုး ေလးေထာင့္ကြက္ေတြ ေပၚႏိုင္တဲ့ CSS Code နဲ႔ HTML Code ေတြကို ထုတ္ေပးတဲ့ Online Tool တစ္ခုပါ။ ေထာင့္လံုး စတုဂံကို ရဖုိ႔ ဘာပံုမွ သံုးစရာ မလိုသလိုဘဲ ဘာ Javascript မွလည္း မသံုးပါဘူး။ သမ႐ိုးက် CSS နဲ႔ HTML ကုိပဲ သံုးထားတာေၾကာင့္ တန္းပလိတ္ တင္ခ်ိန္ကိုလည္း မေလးလံေစပါဘူး။ ေနာက္ၿပီး သံုးရတာလည္း လြယ္ကူတာေၾကာင့္ အေျခခံ အဆင့္ေလာက္ သိထားရင္ကို ဖန္တီး အသံုးျပဳႏိုင္ေအာင္ လုပ္ေပးထားပါတယ္။ က်ေနာ္လည္း အသံုးျပဳပံုကို အေသးစိတ္ ရွင္းျပ ေပးပါ႔မယ္။

ကဲ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ၾကရေအာင္။ Spiffy Corners ကုိ ကလစ္ႏွိပ္ၿပီး ၀င္လိုက္တာနဲ႔ ေအာက္မွာ ျမင္ရတဲ့ ပံုကို ေတြ႔ပါလိမ့္မယ္။

အဲဒီမွာ foreground color ဆိုတာ အလယ္ေခါင္က အနီရဲရဲ အပိုင္းကို ေျပာတာပါ။ background color ကေတာ့ နီညိဳေရာင္ အပိုင္းေပါ႔။ အဲဒီမွာ background color ကို ကိုယ့္ရဲ႕ တန္းပလိတ္ ေနာက္ခံ အတုိင္း ထားေပးရင္ ပို အဆင္ေျပပါမယ္။ foreground color ကေတာ့ ကိုယ့္သေဘာပါ။ အဲဒီမွာ class name ကေတာ့ ကိုယ္ေပးခ်င္တဲ့ နာမည္ ေပးေပါ႔။ ပံုစံႏွစ္မ်ဳိး သံုးခ်င္ရင္ေတာ့ မတူတဲ့ နာမည္ႏွစ္ခု ေပးဖုိ႔ မေမ့ပါနဲ႔။ အေရာင္ေတြ စိတ္ႀကိဳက္ ျဖစ္ၿပီဆိုရင္ေတာ့ ေအာက္က 5px ဆိုတာကို ႏွိပ္ေပးပါ။ စာမ်က္ႏွာကို ျပန္တင္ၿပီး ေအာက္မွာ ျမင္ရတဲ့ CSS Code ေတြ ေပၚလာပါမယ္။  က်ေနာ္ ဒီ ဥပမာမွာ background ကို အျဖဴေရာင္သံုးခ်င္လို႔ FFFFFF လို႔ ႐ိုက္ထည့္ၿပီး foreground ကေတာ့ C3CCEE အေရာင္ကို သံုးပါ႔မယ္။ အေရာင္နံပါတ္ မသိရင္ ေဘးမွာ ေဆးပံုး ရွိပါတယ္။ ႏွိပ္ၾကည့္လိုက္ပါ။

အေရာင္ကေတာ့ အထက္က ပံုအတုိင္း ေပၚမယ္ေပါ႔ဗ်ာ။ သူ႔ရဲ႕ ေအာက္မွာ CSS Code နဲ႔ HTML Code ေပးထားပါတယ္။ အဲဒါေတြကို က်ေနာ္တို႔ ဘယ္လို ယူသံုးရမလဲ ဆိုတာ ဆက္ေဆြးေႏြး ရေအာင္ဗ်ာ။ ကဲ က်ေနာ္တို႔ Blogger.com ကို ၀င္ၿပီး Layout >> Edit HTML ထဲကို သြားေပးပါ။

Spiffy Corner မွာ ေပးထားတဲ့ CSS Code ရဲ႕ အေပၚဆံုး Code ျဖစ္တဲ့ <Style type="text/css"> နဲ႔ ေအာက္ဆံုး Code ျဖစ္တဲ့ </style> က က်ေနာ္တို႔အတြက္ အသံုးမ၀င္ပါဘူး။ အဲဒါ ႏွစ္ခုကို မယူဘဲ က်န္တာေတြကို ကူးၿပီးေတာ့ Style Sheet မွာ သြားထည့္ေပးပါ။ <b:skin><![CDATA[ နဲ႔ ]]></b:skin> ၾကားလို႔ Style Sheet လုိ႔ ေခၚပါတယ္။ ေအာက္မွာ နမူနာ ျပထားပါတယ္။

.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#C3CCEE}
<------------- [more code here]
.spiffy5{
  border-left:1px solid #d2d8f2;
  border-right:1px solid #d2d8f2}
.spiffyfg{
  background:#C3CCEE}

က်ေနာ္တို႔ HTML Code အသံုးခ်ပံုကို ဆက္ေျပာရေအာင္။ အထက္က ပံုလို က်ေနာ္တို႔ သူ ေပးထားတဲ့ HTML Code ကို ႏွစ္ပိုင္းခြဲၿပီး ျမင္ၾကည့္ရေအာင္။ က်ေနာ္တို႔ Sidebar က Page Element ေတြကို ေထာင့္လံုး စတုဂံ ျဖစ္ေအာင္ လုပ္လို႔ ရသလိုပဲ ပို႔စ္ေတြ ေပၚမယ့္ main-wrapper ကိုလည္း ေထာင့္လံုး ျဖစ္ေအာင္ လုပ္လို႔ရပါတယ္။ ပထမဆံုး အေနနဲ႔ main-wrapper ကို ေထာင့္လံုး ဘယ္လုိ လုပ္မလဲ အရင္ ရွင္းျပပါ႔မယ္။ ေအာက္မွာ ျပထားတဲ့ Code ေတြကို Template မွာ သြားရွာၿပီး အနီေရာင္ စာတန္း ေနရာမွာ HTML Part 1 ကို ျဖည့္ေပးၿပီး အျပာေရာင္ စာတန္း ေနရာမွာ HTML Part 2 ကို ျဖည့္ထည့္ေပးပါ။

<div id='main-wrapper'>

Paste Part 1 of the HTML Code Here!

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Paste Part 2 of the HTML Code Here!

</div>

Template ကို Save ၿပီး ဘေလာ့ဂ္ကို ျပန္ေခၚၾကည့္လုိက္ပါ။ ေအာက္က ပံုအတိုင္း ေပၚလာႏိုင္ပါတယ္။

ျဖစ္ေလ့ ျဖစ္ထ ရွိတဲ့ ျပႆနာ တစ္ခု ရွိပါတယ္။ တကယ္လို႔ ေအာက္က ပံုလို ကြက္တိကြက္ၾကား ေပၚေနရင္ေတာ့ .spiffyfg ကို ရွာၿပီး အနီေရာင္ စာေၾကာင္းကို ျဖည့္ေပးပါ။

.spiffyfg{

  background:#C3CCEE;

  margin: -15px 0 -20px 0;}

top margin နဲ႔ bottom margin ကို ဆြဲညိႇလိုက္တဲ့ သေဘာပါ။

Sidebar မွာ ေထာင့္လံုး ျဖစ္ခ်င္ရင္ေတာ့ ေအာက္က Code ေတြကို ရွာၿပီး အနီေရာင္ စာတန္းေနရာမွာ HTML Part 1 ထည့္ၿပီး အျပာေရာင္ စာတန္း ေနရာမွာေတာ့ HTML Part 2 ထည့္ေပးပါ။

<div id='sidebar-wrapper'>

<!-- Paste Part 1 here -->

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id=' ........
<b:widget id=' ........

</b:section>

<!-- Paste Part 2 here -->

</div>

ဒါဆိုရင္ က်ေနာ္တို႔ ေထာင့္လံုးနဲ႔ သပ္သပ္ရက္ရက္ ရွိလွတဲ့ Template တစ္ခုကို ပိုင္ဆုိင္ႏိုင္ပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။