Custom Post Feed

ဒီပိုစ့်မှာတော့ Writer တွေအတွက် ကိုယ်ရေးတဲ့ပိုစ့်တွေကို ကိုယ့် စတိုင်လေးနဲ့ကိုယ်ရေးချင်သူများ အတွက် ဖြစ်ပါတယ်။

Course Outline တွေရေးတဲ့အခါမှာ‌ သင်ခန်စာတစ်ခုနှင့်တစ်ခုဟာ Uniform ဖြစ်နေတာဟာ လေ့လာသူတွေအတွက် ပိုကောင်းပါတယ်။ ဒါကြောင့် Course Outline ရေးသူတွေ အနေနဲ့ အရမ်းကြီးကွဲထွက်သွားတဲ့ Design မျိုးတွေတော့ မလုပ်ကြဖို့ ကြိုတင်တိုက်တွန်းပါရစေ။

Knowledge Sharing နှင့် Mini Course တွေရေးသူတွေကတော့ မူရင်း Theme နဲ့ လိုက်ဖက်မယ့် ဒီဇိုင်းများကို စိတ်ကြိုက် ဖန်တီးနိုင်ပါတယ်။

CSS Overwrite

အရင်ဆုံး ကိုယ့်စတိုင်နဲ့ကိုယ် ကြိုက်သူများသိသင့်တာကတော့ ကျနော် ရေးထားတဲ့ CSS တွေကို Overwrite လုပ်ရမှာဖြစ်ပါတယ်။ CSS Overwrite လုပ်ပုံလေးအနည်းငယ်ကို ပြောပြချင်ပါတယ်။

CSS တွေမှာ အောက်က ကောင်က အပေါ်ကကောင်ကို Over write လုပ်ပါတယ်။
ဥပမာ အားဖြင့် -
.mcg-article{color: red;}
.mcg-article{color: gray;}
- ဆိုရင် အပေါ်က Color: red ကို အောက်က Color: gray က Overwrite လုပ်ပြီး Result မှာ Gray ကဘဲ အလုပ်, လုပ်သွားပါလိမ့်မယ်။

class နဲ့ select လုပ်တာကို id နဲ့ select လုပ်တာက Overwrite လုပ်ပါတယ်။
ဥပမာ အားဖြင့် -
#id{color:red;}
.class{color: gray;}
<h1 class="class" id="id"> Hello Myanmar Coder<h1>
- ဆိုရင် color: gray; ဟာ အောက်မှာရေးထားပေမယ့် #id နဲ့ Select လုပ်ထားတာကို Overwrite မလုပ်နိုင်ပါဘူး။ ဒိတော့ Result က Red နဲ့ထွက်ပါလိမ့်မယ်။

!important ပါတဲ့ကောင်က အားလုံးကို Overwrite လုပ်နိုင်ပါတယ်။
ဥပမာ အားဖြင့် -
.mcg-article{color: red !important;}
.mcg-article{color: gray;}
- ဆိုရင် class ကိုဘဲ Select လုပ်ထားတယ် ဒါပေမယ့် !important ပါတဲ့ကောင်က အောက်မှာ ဘာဘဲလာလာ Overwrite မလုပ်နိုင်ပါဘူး။ (အကြမ်းအားဖြင့်ပေါ့လေ)

တော်တော်များများကတော့ သိပြီးသားဖြစ်မှာပါ ဒါပေမယ့် အားလုံးသတိထားမိအောင် ရေးလိုက်တာပေါ့နော်...။

ဟုတ်ပြီဆိုတော့ မူရင်း CSS တွေကို Overwrite လုပ်နိုင်ဖို့ ပထမဥပမာနဲ့ ဒုတိယ ဥပမာကို အဓိကထားပြီး သုံးသွားပါမယ်။

!important ကို အတတ်နိုင်ဆုံးမသုံးပါနဲ့။ ကျွန်တော်လည်း Important ကို အတတ်နိုင်ဆုံးမသုံးထားပါဘူး။ မသုံးမဖြစ်သုံးရမယ် ဆိုရင်တော့ သုံးပါ။ လုံးဝ မသုံးရလို့ မပြောပါဘူး။

---

ပထမဆုံး Id select ကို သုံးချင်တဲ့အတွက်ကြောင့် <div class="mcg-article"> မှာ Id ထည့်လိုက်ပါ။

Id ကို Unique name ဖြစ်‌‌‌အောင် ကိုယ့် Name အတိုကောက်။ စသည်ဖြင့်ပေးပါ။ ဥပမာ ကျနော်ဆိုရင် <div class="mcg-article" id="zayar"> လို့ပေးပါမယ်။ ကိုယ့်ဆိုင်ရာဆိုင်ရာ အဆင်ပြေတာပေးကြပါ။

Internal CSS

Internal အနေနဲ့ ထည့်ဖို့တော့ အားမပေးပါဘူး။ သို့သော် Option တစ်ခုအနေနဲ့ ထည့်လိုက်တာပါ။ github မသုံးချင်တဲ့သူတွေ သုံနိုင်‌အောင်လို့ပါ။

Example Code : Internal CSS

1. <style>

2.      #your-id > ... { Your Style}

3. </style>

5. <div class="mcg-article" id="your-id">

6.      Your Article Code

7. </div>

ဒီနည်းကိုသုံးပြီးတော့ ကိုယ်ပိုင် Article Feed ကို Customized လုပ်ပါ။ ခင်ဗျားပိုစ့်မှာ ခင်ဗျားက နတ်ဘုရားပါဘဲ။

Post တင်တဲ့အခါ <style> tag ကနေစပြီးတော့ ထည့်ပေးပေါ့..... Post Html ထဲကို။

---

External CSS

External CSS သုံးမယ်ဆိုရင်တော့ Github ကိုသုံးပါမယ်။ github.com သွားပြီး အကောင့်ဖွင့်ပါ။ Repositories တစ်ခုဆောက်ပါ။ ပြီးရင် ကိုယ့် css file ကို Upload လုပ်လိုက်ပါ။

ပြီးရင် raw.githack.com မှာ သုံးလို့ရတဲ့ CSS Link ဖြစ်အောင် သွားပြောင်းပါ။ ပြီးရင် <div class="mcg-article" id="zayar"> ရဲ့ အပေါ်မှာ CSS Link လုပ်လိုက်ပါ။

Github သုံးတာ အခက်အခဲရှိရင် လာမေးပါ။

1. <link rel="stylesheet" href="https://raw.githack.com/zayar-1994/developerjournary/main/mcg_writer-css-update.css">
2. <div class="mcg-article" id="zayar">
3. Your Article Code
4. </div>

အပေါ်က Example Code တွေကို Blogger Post မှာ တင်လိုက်ရုံပါဘဲ။

---

Is really God in My Posts 😏😏😏 ?

တကယ်ပါ။

အဲဒီ CSS တွေဟာ Post အတွင်းမှာဘဲ ရှိနေတယ်ဆိုပေမယ့် ပိုစ့်အပြင်က Element Style တွေအားလုံးကို ပြောင်းသတာလန်အောင် ပြင်လို့ရပါတယ်။

ခင်ဗျားရဲ့ ပိုစ့်က W3School က ယူတာမဟုတ်လို့ Site Description ဖြစ်တဲ့ Course Outline from w3school.com ကိုဖျောက်ထားချင်လား ဖျောက်ထားလို့ရပါတယ်။

Writen by YourName ကြီးက ရိုးလွန်းလို့ မူရင်းကို ဖျောက်ထားပြီး၊ ကိုယ့် ပုံလေးနဲ့... ကိုယ့် နာမည်လေးနဲ့... ဘေးမှာ Follow ဆိုပြီး Facebook Profile Link ကိုညွှန်းမလား ရပါတယ်။

အဲဒိနည်းနဲ့ CSS နဲ့ပြင်လို့ရတဲ့ Element Style အားလုံးကို ပြောင်းဆန်အောင် ပြင်လို့ရပါတယ်။

ဒါပေမယ့် တောင်းပန်ပါတယ်...။ တအားကြီးတော့ မပြင်ကြပါနဲ့ .....

Oki .... အားလုံးအဆင်ပြေမယ်လို့ မျှော်လင့်ပါတယ်။ မရှင်းတာရှိရင် Comment ရေးခဲ့ပါ။ ကျေးဇူးတင်ပါတယ်။