ပို႔စ္အတြင္း၌ မာတိကာ ထည့္ျခင္း

မာတိကာ

1. မာတိကာ ဒီဇိုင္း (CSS) သက္မွတ္ျခင္း
2. မာတိကာ အၫႊန္း ထည့္ျခင္း
3. စာကိုယ္တြင္ အၫႊန္း တပ္ျခင္း
4. အားလံုးကို ခ်ံဳငံု သံုးသပ္ျခင္း

က်ေနာ္တို႔ ပို႔စ္ေရးတဲ့ အခါမွာ တခ်ဳိ႕ပို႔စ္ေတြကို ေခါင္းစဥ္ ခြဲၿပီး ေရးဖို႔ လိုအပ္တဲ့ အခါေတြ ရွိပါတယ္။ အေၾကာင္းအရာ ခပ္မ်ားမ်ားကို တစ္ေနရာတည္း စုေရးမယ္ဆိုရင္ တစ္ခုနဲ႔တစ္ခု မေရာေႏွာေစခ်င္တဲ့ ရည္ရြယ္ခ်က္တဲ့ ေခါင္းစဥ္ေတြ ခြဲထားတတ္ပါတယ္။ တခါတေလ စာဖတ္သူဟာ တခ်ဳိ႕ ေခါင္းစဥ္ကိုပဲ သီးျခား ေရြးၾကည့္ခ်င္တဲ့ စိတ္ကူးမ်ဳိး ေပၚလာတတ္ပါတယ္။ ေပၚလာေပမယ့္လည္း သူ႔ခမ်ာ ပို႔စ္တစ္ခုလံုးကို အစကေန အဲဒီ ေခါင္းစဥ္ေရာက္တဲ့ အထိ ဆြဲခ်ၿပီး ရွာၾကရတယ္။ ဒီအခက္အခဲေတြကို ေက်ာ္လႊားႏိုင္ဖို႔ စာဖတ္သူ လြယ္လင့္တကူ ရွိေစဖို႔ က်ေနာ္တို႔ လိုအပ္ရင္ ပို႔စ္အထဲမွာပဲ မာတိကာ ထည့္ေပးဖို႔ လိုအပ္လာပါတယ္။ က်ေနာ့္ပို႔စ္ရဲ႕ ညာဘက္ကို ၾကည့္ၾကည့္ပါ။ က်ေနာ္ မာတိကာေလး တစ္ခု လုပ္ထားတယ္။ အဲဒီမွာ ေခါင္းစဥ္ေတြကို စီစဥ္တက် စီထားၿပီး ကိုယ္ ေရြးဖတ္ခ်င္တဲ့ ေခါင္းစဥ္ကို ကလစ္ႏွိပ္႐ံုနဲ႔ အဲဒီ ေခါင္းစဥ္ရွိရာကို သူ႔အလိုအေလ်ာက္ ေရႊ႕ေပးသြားပါတယ္။ ဒါေပမယ့္ တစ္ခုရွိတာ အကယ္၍ ပို႔စ္ကို ခ်ံဳ႕ထားမယ္ ဆိုရင္ေတာ့ အဲဒီ မာတိကာက အလုပ္ မလုပ္ပါဘူး။ ဒီအားနည္းခ်က္ေလး ရွိေနေပမယ့္ အသံုးတည့္မယ္လို႔ ယူဆပါတယ္။ က်ေနာ္တို႔ မာတိကာေလး ဘယ္လို လုပ္မလဲဆိုတာ စၿပီး ေဆြးေႏြးၾကရေအာင္။

အဆင့္ (၃) ဆင့္ကို တစ္ခုၿပီး တစ္ခု လုပ္သြားလိုက္ရင္ က်ေနာ္တို႔ လိုခ်င္တဲ့ မာတိကာေလး တစ္ခု ရႏိုင္ပါၿပီ။

အဆင့္ (၁) မာတိကာ ဒီဇိုင္း (CSS) သက္မွတ္ျခင္း

.pullquote
{width: 145px;
background:gold;
color:black;
float: right;
border:1px solid maroon;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}

အထက္က Code ကို Style Sheet မွာ ထည့္ေပးပါ။ Layout ထဲက Edit HTML မွာ ပါတဲ့ <b:skin><![CDATA[ နဲ႔ ]]></b:skin> ၾကားကို Style Sheet လို႔ ေခၚပါတယ္။ Head Section မွာ ရွိပါတယ္။ အက်ယ္ (width)၊ ေနာက္ခံေရာင္ (background)၊ စာလံုးအေရာင္ (color) နဲ႔ ေဘာင္ (border) ကို ကိုယ္ ႀကိဳက္သလို ေျပာင္းလဲ သက္မွတ္ႏုိင္ပါတယ္။

အဆင့္ (၂) မာတိကာ အၫႊန္း ထည့္ျခင္း

ဒီအဆင့္မွာ က်ေနာ္တို႔ မာတိကာ တစ္ခု လက္ေတြ႕ တည္ေဆာက္မွာပါ။ အခု ဒီအဆင့္နဲ႔ ေအာက္ပိုင္း အဆင့္ေတြက ကိုယ္ေရးမယ့္ ပို႔စ္ထဲမွာ ထည့္ေပးရမွာပါ။ Create New Post လုပ္ၿပီး အဲဒီအထဲမွာ သြားေရးၾကမယ္။ ဥပမာေလးနဲ႔ က်ေနာ္ ရွင္းျပသြားပါ႔မယ္။ ဆိုၾကပါစို႔။ က်ေနာ္တို႔ ပို႔စ္မွာ ေခါင္းစဥ္ သံုးခု ရွိမယ္ ဆိုရင္ ေခါင္းစဥ္ (၁) ကို ႏွိပ္လိုက္ရင္ ေခါင္းစဥ္ (၁) ကို ေက်ာ္သြားမယ္ေပါ႔။ က်ေနာ္တို႔ Code ကို ၾကည့္ၾကည့္ရေအာင္။

<p class="pullquote">
<span style="color:maroon;font-size:x-small;">မာတိကာ</span>
<br>
<a href="#title1">ေခါင္းစဥ္ (၁)</a>
<a href="#title2">ေခါင္းစဥ္ (၂)</a>
<a href="#title3">ေခါင္းစဥ္ (၃)</a>
</p>

အေပၚက Code ေတြကို က်ေနာ္တို႔ မာတိကာ ေပၚခ်င္တဲ့ ေနရာမွာ သြားထည့္ရပါ႔မယ္။ အကယ္၍ ပို႔စ္အေပၚဆံုးမွာ ေပၚခ်င္တယ္ ဆိုရင္ေတာ့ ပို႔စ္တစ္ခု စစေရးတဲ့ ေနရာမွာ ထားေပးပါ။ က်ေနာ့္ ပို႔စ္မွာ ပါတဲ့ မာတိကာဟာ အေပၚဆံုးမွာ ထားထားတာပါ။ ေခါင္းစဥ္ ၁၊ ၂၊ ၃ ေနရာမွာေတာ့ ႀကိဳက္တဲ့ နာမည္ ထည့္လို႔ရပါတယ္။ #title1 ဆိုတာကလည္း သင့္ေလ်ာ္တဲ့ နာမည္တစ္ခု ေရြးေပးႏိုင္တယ္။ ဒီမွာ လြယ္ကူေအာင္လို႔ title1 လို႔ပဲ ေပးထားတယ္။

အဆင့္ (၃) စာကိုယ္တြင္ အၫႊန္း တပ္ျခင္း

ေခါင္းစဥ္ (၁) ကို ႏွိပ္ရင္ ဘယ္ကုိ ေရြ႕ၿပီး သြားေပၚရမလဲ ဆိုတာ က်ေနာ္တို႔ ဒီအဆင့္မွာ သက္မွတ္ပါမယ္။ က်ေနာ္တို႔ အရင္က Post Editor ထဲမွာ ေအာက္မွာ ပါတဲ့ စာေတြကို ဒီအတိုင္း ႐ိုက္ထည့္လိုက္ၾကတယ္။ ဒါ အရင္လို ခပ္႐ိုး႐ိုး လုပ္လိုက္တာပါ။

ေခါင္းစဥ္ (၁)
ဤေနရာတြင္ ေရးသားထားေသာ စာမ်ားသည္ ေခါင္းစဥ္ (၁) ၏ စာကိုယ္ ျဖစ္ပါသည္။

ေခါင္းစဥ္ (၂)
ဤေနရာတြင္ ေရးသားထားေသာ စာမ်ားသည္ ေခါင္းစဥ္ (၂) ၏ စာကိုယ္ ျဖစ္ပါသည္။

ေခါင္းစဥ္ (၃)
ဤေနရာတြင္ ေရးသားထားေသာ စာမ်ားသည္ ေခါင္းစဥ္ (၃) ၏ စာကိုယ္ ျဖစ္ပါသည္။

အခု က်ေနာ္တို႔က မာတိကာထည့္မယ္ ဆိုေတာ့ မာတိကာမွာ ပါတဲ့ အၫႊန္းကို က်ေနာ္တို႔ ၫႊန္ေပးရေတာ့မယ္။ ေခါင္းစဥ္ (၁) ကို ႏွိပ္ရင္ ေခါင္းစဥ္ (၁) ရွိတဲ့ ေနရာကို ၫႊန္ေပးရမယ္။ အဲလို ၫႊန္ႏိုင္ဖို႔ က်ေနာ္တို႔ရဲ႕ ေခါင္းစဥ္ကို ဒီလိုေလး နည္းနည္း ျပင္ေပးရလိမ့္မယ္။

<a href='YOUR BLOG ADDRESS' name='title1'> ေခါင္းစဥ္ (၁) </a>
ဤေနရာတြင္ ေရးသားထားေသာ စာမ်ားသည္ ေခါင္းစဥ္ (၁) ၏ စာကိုယ္ ျဖစ္ပါသည္။

အဲဒီလို ျဖစ္သြားမယ္။ အဲဒီမွာ သတိျပဳရမွာက အဆင့္ (၂) တုန္းက က်ေနာ္တို႔ #title1 လို႔ သံုးထားတာေၾကာင့္ အခု name='title1' ျဖစ္ေနတာပါ။ ေခါင္းစဥ္ (၂) အတြက္ ၫႊန္ခ်င္ရင္ေတာ့ name='title2' လုပ္ေပးရပါ႔မယ္။

အားလံုးကို ခ်ံဳငံု သံုးသပ္ျခင္း

အထက္က ဥပမာနဲ႔ပဲ က်ေနာ္ Code အားလံုးကို တစ္ၿပိဳင္နက္တည္း ေဖာ္ျပေပးပါ႔မယ္။

.pullquote
{width: 145px; background:gold; color:black; float: right; border:1px solid maroon; font-weight:bold; line-height:140%; padding:5px; margin-top:10px; margin-left:10px; }

အထက္က Code ကို Style Sheet ထဲ ထည့္ေပးပါ။ တစ္ႀကိမ္ပဲ ထည့္ေပးဖို႔ လိုပါတယ္။ ေနာက္ပို႔စ္ေတြ အတြက္ ထပ္ထည့္စရာ မလုိပါဘူး။

Create New Post လုပ္လိုက္ပါ။ ၿပီး Post Editor မွာ ေအာက္ပါ အတိုင္း ကူးထည့္ေပးပါ။ ၿပီးရင္ Publish လုပ္ၾကည့္ပါ။

<p class="pullquote">
<span style="color:maroon;font-size:x-small;">မာတိကာ</span>
<br>
<a href="#title1">ေခါင္းစဥ္ (၁)</a>
<a href="#title2">ေခါင္းစဥ္ (၂)</a>
<a href="#title3">ေခါင္းစဥ္ (၃)</a>
</p>

နိဒါန္း
နိဒါန္း
နိဒါန္း
နိဒါန္း
နိဒါန္း
နိဒါန္း
နိဒါန္း

<a href='YOUR BLOG ADDRESS' name='title1'> ေခါင္းစဥ္ (၁) </a>
ဤေနရာတြင္ ေရးသားထားေသာ စာမ်ားသည္ ေခါင္းစဥ္ (၁) ၏ စာကိုယ္ ျဖစ္ပါသည္။
အပိုင္း (၁)
အပိုင္း (၁)
အပိုင္း (၁)
အပိုင္း (၁)
အပိုင္း (၁)
အပိုင္း (၁)

<a href='YOUR BLOG ADDRESS' name='title3'> ေခါင္းစဥ္ (၂) </a>
ဤေနရာတြင္ ေရးသားထားေသာ စာမ်ားသည္ ေခါင္းစဥ္ (၂) ၏ စာကိုယ္ ျဖစ္ပါသည္။
အပိုင္း (၂)
အပိုင္း (၂)
အပိုင္း (၂)
အပိုင္း (၂)
အပိုင္း (၂)
အပိုင္း (၂)

<a href='YOUR BLOG ADDRESS' name='title3'> ေခါင္းစဥ္ (၃) </a>
ဤေနရာတြင္ ေရးသားထားေသာ စာမ်ားသည္ ေခါင္းစဥ္ (၃) ၏ စာကိုယ္ ျဖစ္ပါသည္။
အပိုင္း (၃)
အပိုင္း (၃)
အပိုင္း (၃)
အပိုင္း (၃)
အပိုင္း (၃)
အပိုင္း (၃)

xxxxxxxxxxxxxxxxxx

အဆင္ေျပမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ မရွင္းတာ ရွိရင္လည္း အားမနာတမ္း လြတ္လြတ္လပ္လပ္ ေမးျမန္းႏိုင္ပါတယ္။