Start Coding

Coding စရေးတဲ့အခါ အရေးအကြီးဆုံး စည်းကမ်းကတော့ <div class="mcg-article"> ... <div> ဒီထဲမှာဘဲ ရေးရပါမယ်။

Post တွေအတွက် အပြင်က ဒီ Div ရဲ့ အပြင်တွေမှာ လုံးဝ ပြင်စရာမလိုပါဘူး။ ကိုယ် စိတ်ကြိုက် CSS Style ထည့်ချင်တယ်ဆိုရင်လည်း inline Style ဖြစ်ဖြစ် <style> ... </style> tag သုံးပြီး Internal Style ဖြစ်ဖြစ် အဲဒီထဲမှာဘဲ ရေးပေးပါ။

ဖြစ်နိုင်ရင်တော့ ကိုယ်ပိုင် CSS Style တွေမလိုအပ်ရင် မထည့်ပါနဲ့ ။ Uniform ဖြစ်အောင်လို့ပါ။

အောက်က ပုံမှာလည်း မြင်သာအောင် ပြထားပါတယ်။

---

Heading Text

ဒီနေရာမှ စရေးတဲ့ ကုဒ်မှာ Main Header ထည့်စရာမလိုပါဘူး။ Main Header က Blogspot မှာ တင်တဲ့အခါကျမှ သာ ထည့်ရမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် ဒီကုဒ်တွေဟာ Main Header ရဲ့ အောက်ကနေ စပြီး အလုပ်လုပ်မှာ ဖြစ်ပါတယ်။ အောက်က ပုံမှာမြင်သာအောင် ပြထားပါတယ်။

ဒါကြောင့် ဒီဇိုင်းစဉ်းစားတဲ့အခါ Main Header ရဲ့အောက်ကသာ စပြီး စဉ်းစားရမှာ ဖြစ်ပါတယ်။

ဒီ Post Content နေရာမှာ အဓိကအားဖြင့် <h2> နှင့် <h3> ကိုဘဲ အဓိကသုံးပေးရပါမယ်။ ကျန်တဲ့ heading tag တွေကို ဖြစ်နိုင်ရင် မသုံးပါနဲ့။ ဘာကြောင့်လဲ ဆိုတော့ Style မထည့်ရသေးလို့ပါ။ သင့်တော်သလို inline CSS ထည့်ပြီး သုံးမယ်ဆိုရင် အသုံးပြုနိုင်ပါတယ်။

<p> , <ul>, <ol>, <table>, <a> စတဲ့ အသုံးများနိုင်မယ့် Tag များအတွက် သင့်တော်တဲ့ Style များထည့်ပေးပြီးသားဖြစ်ပါတယ်။ ပုံမှန်ဘဲ အားလုံး‌ရေးသွားနိုင်ပါတယ်။

သို့သော် Style မပြင်ရသေးတဲ့ tag များလည်း များစွာကျန်သေးပါတယ်။ ဒါကြောင့် Style မပြင်ရသေးတဲ့ Tag များသုံးဖို့လိုလာပြီး ဆိုလျှင် inline CSS ထည့်ပြီး သုံးထားပေးပါ။ ပြီးရင် Myanmar Coder Guide Group ထဲမှာ အသိပေး, ပေးပါ။

---

Text Feed များ

ဒီထဲမှာ Text Feed နှစ်ခုဘဲ ထည့်ပေးထားပါတယ်။ အထူး သိမှတ်ဖွယ်ရာများအတွတွက် <div class="mcg-note"> ... <div> အတွင်းမှာ ထည့်သုံးနိုင်ပြီး၊ အသိပေးချက်များ အတွက်အတွက် <div class="mcg-notic"> ... <div> အတွင်းမှာထည့်သုံးနိုင်ပါတယ်။

<div class="mcg-note"> ... <div> အတွင်း ထည့်သုံးထားသော ဥပမာ ဖြစ်ပါတယ်။

<div class="mcg-notic"> ... <div> အတွင်း ထည့်သုံးထားသော ဥပမာ ဖြစ်ပါတယ်။

---

Example DIV

နောက်တစ်ခုကတော့ Example Feed ပါ။

Example မှာ အပိုင်း သုံးခုပါဝင်ပါတယ်။ အောက်ပါအတိုင်း ဖြစ်ပါတယ်။ မြင်သာအောင် အောက်က ပုံမှာ ကြည့်နိုင်ပါတယ်။

1. Example Title
2. Example Feed
3. Try it Yourselt! Button

ဒီ Feed ကြီးတစ်ခုလုံးကိုတော့ <div class="mcg-example"> ... </div> ထဲမှာ ထည့်ရေးပါတယ်။ Stracture က အောက်က Example Code အတိုင်းပါ။

Example Code

1. <div class="mcg-example">

2.      <h3>Example Title</h3>       //For Example Title

3.      <div class="mcg-example-feed"> {.. Example Feed Area code ..} </div>

4.      <a herf="#" class="mcg-primary-btn">Try it Yourself !</a>

5. </div>

Example DIV အကြောင်းကို နောက်အခန်းမှာ ပိုမိုလေ့လာရပါဦးမယ်။