Website ေရးနည္း HTML+CSS (အပုိင္း ၄+၅+၆)

Website ေရးနည္း HTML+CSS (အပုိင္း ၄)

x

မဂၤလာပါ …ဒီတစ္ပတ္ေတာ့ အားလပ္ရက္ ပုိရလို႔ ကၽြန္ေတာ္ footer အတြက္ပါ video record လုပ္ထားလုိက္ပါတယ္။ ဒီသင္ခန္းစာက website တစ္ခု တည္ေဆာက္ျခင္းရဲ႕ အပုိင္း (၄) လုိ႔ ေျပာလို႔ရပါတယ္။ က်န္အပုိင္းမ်ားကုိ မဖတ္ဖူးေသးရင္ ဒီသင္ခန္းစာကုိ မေလ့လာခင္ က်န္အပုိင္း သုံးပုိင္းကုိ အရင္ဖတ္ရမွာျဖစ္ပါတယ္၊ က်န္တဲ့အပုိင္းေတြကေတာ့ ေအာက္ပါအတုိင္းျဖစ္ပါတယ္။

အပုိင္း (၁) — Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer

အပုိင္း (၁)၊ (၂)၊ (၃) ကုိ ဖတ္ၿပီးသားလူေတြကေတာ့  အခုသင္ခန္းစာအတြက္ ေအာက္က video ကုိ ၾကည့္ပါ။

Website ေရးနည္း HTML+CSS (အပုိင္း ၅)

x

jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)

မဂၤလာပါ …အရင္တစ္ပတ္ကေတာ့ ကြၽန္ေတာ္တုိ႔ Myanmar Web Designer ရဲ႕ main body အပုိင္းကုိ ခ်န္ထားခဲ့ၿပီး footer ကုိ အရင္ သင္ျပေပးခဲ့ပါတယ္၊ ဒီတစ္ပတ္မွာေတာ့ main body ထဲက content ေတြကုိ layout ခ် တာကုိ သင္ျပေပးမွာျဖစ္ပါတယ္။

အခု သင္ခန္းစာကုိ ဘယ္သူေတြ လုိက္ႏုိင္မလဲ ?

အခု ေျပာျပေပးမယ့္ သင္ခန္းစာကုိေတာ့ ေအာက္က အပုိင္း ၁၊ ၂၊ ၃၊ ၄ ေတြကုိ ဖတ္ၾကည့္ၿပီး လုိက္လုပ္ဖူးတဲ့ လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္၊

အပုိင္း (၁) — Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၄) — Coding footer of Myanmar Web Designer

ဒါဆုိရင္ ကြၽန္ေတာ္တုိ႔ သင္ခန္းစာ စလိုက္ၾကရေအာင္ဗ်ာ …

Website ေရးနည္း HTML+CSS (အပုိင္း ၆)

x

မဂၤလာပါ …ဒီတစ္ပုိင္းကေတာ့ website ေရးျခင္းရဲ႕ ေနာက္ဆုံး အပုိင္းျဖစ္ပါတယ္၊ ကၽြန္ေတာ္ တင္ေပးထားတဲ့ သင္ခန္းစာေတြကုိ ေတာက္ေလွ်ာက္ လုိက္လုပ္တဲ့လူဆုိရင္ေတာ့ အခု သင္ခန္းစာ ၿပီးရင္ website တစ္ခုကုိ ေရးတတ္မွာ ေသခ်ာပါတယ္။ ဒီ post အခုမွေတြ႕တဲ့လူေတြအတြက္လည္း အရင္သင္ခန္းစာေတြကုိ ျပန္ညႊန္းေပးပါ့မယ္။

အပုိင္း (၁) — Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၄) — Coding footer of Myanmar Web Designer
အပုိင္း (၅) — jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)

ဒီေန႔ video ကေတာ့ သုံးပုိင္းရွိပါတယ္၊ သုံးပုိင္း ဆုိလို႔ လန္႔မသြားပါနဲ႔ သုုံးခုေပါင္းမွ ၂၇ မိနစ္ေလာက္ပဲ ရွိတာပါ၊ အဲဒီ video ေတြကေတာ့ –

ဗီဒီယုိ အပုိင္း ၁

ဗီဒီယုိ အပုိင္း ၂

ဗီဒီယုိ အပုိင္း ၃

http://www.myanmarwebdesigner.com/blog/ မွ ကူယူျဖန္႔ေ၀ပါသည္။

ဆက္လက္ဖက္ရႈရန္

Website ေရးနည္း HTML+CSS (အပုိင္း ၁+၂+၃)

Website ေရးနည္း HTML+CSS (အပုိင္း ၁)

x

Website ေရးနည္း (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)

Website ေရးနည္း သင္ခန္းစာ အက်ဥ္း

ဒီ post ဟာ website ေရးျခင္းကုိ စိတ္ဝင္စားတဲ့ လူေတြအတြက္ ပထမဆုံး ေျခလွမ္းျဖစ္မယ္ထင္ပါတယ္။ အခု သင္ခန္းစာမွာ website တစ္ခုရဲ႕ တည္ေဆာက္ပုံကုိ ခြဲျခမ္းစိတ္ျဖာ ေလ့လာမွာ ျဖစ္ပါတယ္။

ဘယ္လိုလူေတြက ဒီသင္ခန္းစာကုိ လုိက္ႏုိင္မလဲ?

အခု သင္ခန္းစာကုိ website တစ္ခုကုိ ျမင္ဖူးတဲ့လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။

ကၽြန္ေတာ္ ဒီ blog ကေနၿပီးေတာ့ တစ္ပတ္ တစ္ခါ အားတဲ့အခ်ိန္ေတြကုိ အသုံးျပဳၿပီး static website တစ္ခုေရးပုံကုိ အစအဆုံး လမ္းညႊန္သြားေပးဖုိ႔ စဥ္းစားထားပါတယ္။ static website ဆုိတာ ဘာလဲ မသိရင္ google မွာ “what is static website” လို႔ ရုိက္ရွာၾကည့္ပါ။ ကၽြန္ေတာ့္ post ထဲမွာ ထည့္မေရးတာက မလုိအပ္ပဲ post ရွည္သြားမွာ နဲ႔ လမ္းညႊန္မယ့္လူမရွိရင္ မလုပ္တတ္မွာစုိးလုိ႔ ထည့္မေရးရတာပါ။ ေနာက္ပုိင္းမွာလည္း မသိတဲ့ စကားလုံးမ်ား ပါခဲ့မယ္ဆုိရင္ ဒီလုိပဲ google မွာ ရွာၾကည့္ပါ၊ ရွာၾကည့္လို႔မွ နားမလည္ဘူးဆုိရင္ေတာ့ comment ခ်န္ၿပီး ေမးပါ။ ေနာက္ၿပီေးတာ့ ဒီ blog မွာ post အသစ္တင္လား မတင္လား ခဏခဏ လာဝင္ၾကည့္ဖုိ႔ မအားဘူးဆုိရင္ေတာ့ blog ရဲ႕ ညာဘက္အျခမ္းမွာ post အသစ္တင္တုိင္း ေမးလ္ပုိ႔ပါမည္ ဆုိတဲ့ ေဘာက္စ္ထဲမွာ e-mail ထည့္၊ subscribe  ႏွိပ္လုိက္ပါ၊ ၿပီးရင္ အဲဒီ ထည့္လုိက္တဲ့ email ရဲ႕ inbox ကုိသြားပါ၊ Myanmar Website Tutorials ကပုိ႔ထားတဲ့ ေမးလ္ေရာက္ေနပါလိမ့္မယ္၊ အဲဒီေမးလ္ကုိဖြင့္ၿပီး confirm ကုိ ႏွိပ္လိုက္ပါ။ ဒါဆုိရင္ ဒီ blog မွာ post အသစ္တင္တုိင္း သူငယ္ခ်င္းတုိ႔ရဲ႕ inbox ထဲကုိ ေရာက္လာမွာ ျဖစ္ပါတယ္။ ဒီတစ္ပတ္ ကၽြန္ေတာ္တုိ႔ရဲ႕ ပထမဆုံး ေျခလွမ္းက code ေရးတာေတြ ဘာေတြ လုံးဝ မဟုတ္ေသးပါဘူး၊ သူမ်ားေတြ ေရးထားၿပီးသား website ကုိ ဝင္ၾကည့္တဲ့အခါမွာ အဲဒီ website ေတြရဲ႕ တည္ေဆာက္ပုံကုိ ေလ့လာျခင္းပဲျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ အခုေလ့လာမယ့္ website ကေတာ့ Myanmar Web Designer website ပဲ ျဖစ္ပါတယ္၊ အခု post မွာလဲ ပုံနဲ႔တကြ ရွင္းျပေပးမွာျဖစ္ပါတယ္၊ ဒါေပမယ့္ website ကုိ ကုိယ္တုိင္သြားၿပီးေတာ့ အေသးစိတ္ လိုက္ေလ့လာမယ္ဆုိရင္ေတာ့ ဒီသင္ခန္းစာကုိ အေကာင္းဆုံး နားလည္မွာ ျဖစ္ပါတယ္။

static website တစ္ခုေရးဖုိ႔ဆုိရင္ ကၽြန္ေတာ္တုိ႔ တတ္ထားရမွာက html နဲ႔ css ဆုိရင္ ရပါၿပီ၊ ဟုိးအရင္တုန္းကေတာ့ css မေပၚေသးေတာ့ html တစ္ခုနဲ႔ပဲ ေရးခဲ့ၾကရတာ ျဖစ္ပါတယ္၊ html language ထဲက  table ကုိ အသုံးျပဳၿပီးေတာ့ ေရးခဲ့ၾကရတာျဖစ္ပါတယ္၊ table နဲ႔ ေရးတဲ့အခါမွာ ေရးရတာမ်ားတဲ့အတြက္ေၾကာင့္ ေရးခ်ိန္ၾကာျခင္း၊ code မ်ားျခင္း၊ အရင္တုန္းက ဆုိေတာ့ internet connection ေႏွးျခင္း၊ browsers မ်ား version နိမ့္ျခင္း စတဲ့အခ်က္ေတြေၾကာင့္ website ကုိ online ေပၚတင္လုိက္တဲ့အခါမွာ website အတက္ေႏွးျခင္း (slow website download speed) ဆုိတဲ့ ျပႆနာကုိ ေတြ႕ႀကဳံရတဲ့အခါမွာ အဲဒီအတြက္ အေျဖရွာရင္း css ဆုိတဲ့ language အသစ္ကုိ တီထြင္လိုက္ၾကပါတယ္၊ တစ္ဘက္ကလည္း browser ေတြကုိ version ျမွင့္လာၾကပါတယ္၊ connection ကေတာ့ အခုအခ်ိန္ထိ သားစုိး သီခ်င္းလုိပဲ “လိမ္ဖယ္၊ လိမ္ဖယ္” ေပါ့ဗ်ာ … 

အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔ တတ္ရမယ့္ဟာကုိေတာ့ သိပါၿပီ၊ တတ္ရမယ့္ language ေတြကုိ မေလ့လာခင္ website တည္ေဆာက္ပုံကုိ ေလ့လာၾကတာေပါ့၊ website ေရးတဲ့အခါမွာ menu အပုိင္း၊ banner (facebook မွာဆုိရင္ေတာ့ cover photo) အပုိင္း၊ body အပုိင္း စသည္ျဖင့္ အပုိင္း အပုိင္းေတြ ခြဲၿပီး ေရးၾကပါတယ္။ အဲဒီ အပုိင္းေတြကုိ အဂၤလိပ္လို “division” လို႔ ေခၚပါတယ္၊ html မွာေတာ့ အဲဒီ division ကုိ အတုိေကာက္ “div” လုိ႔ သုံးပါတယ္။ ေအာက္က ပုံကုိၾကည့္ပါ။ (ကလစ္ႏွိပ္ၾကည့္ပါက ပုံကုိ အႀကီး ျမင္ရပါမည္)

ပုံအရဆုိရင္ ကၽြန္ေတာ္တုိ႔ ေလးေထာင့္က်က် အကြက္မ်ဳိးဆုိရင္ div တစ္ခုလုိ႔ေတာင္ အၾကမ္းဖ်င္း သတ္မွတ္လို႔ ရပါတယ္။ ဒါကေတာ့ Myanmar Web Designer website ရဲ႕ home page ကုိ analysis လုပ္ၾကည့္တာပါ။ div တည္ေဆာက္ပုံကုိ coding အေနနဲ႔ပါ ေလာ့လာခ်င္တယ္ဆုိရင္ေတာ့ “firebug” ဆုိတဲ့ addon ေလးကုိ firefox မွာ တင္ရပါမယ္၊ firebug ကုိ တင္ခ်င္တယ္ဆုိရင္ေတာ့ “firebug addon for firefox” မွာ သြားတင္လိုက္ပါ။ ၿပီးရင္ေတာ့ home menu ေပၚမွာ right click ႏွိပ္ၿပီးေတာ့ “Inspect element with firebug” ဆုိတာကုိ ႏွိပ္လိုက္ပါ။

အဲဒီလုိ ႏွိပ္လိုက္မယ္ဆုိရင္ေတာ့ browser ရဲ႕ ေအာက္ေျခနားမွာ ေအာက္က ပုံအတုိင္း ေပၚလာမွာ ျဖစ္ပါတယ္။

ေပၚလာတဲ့ပုံမွာ အကန္႔ႏွစ္ကန္႔ ပါပါတယ္၊ ဘယ္ဘက္အျခမ္းက html code ေတြကုိ ေဖာ္ျပတဲ့ဘက္ျဖစ္ၿပီးေတာ့၊ ညာဘက္ အကန္႔ကေတာ့ css code ေတြကုိ ေဖာ္ျပတဲ့ အျခမ္းျဖစ္ပါတယ္၊ css ေတြကုိ အစီအစဥ္မက် ျပေပးတာ မဟုတ္ပါဘူး၊ ဘယ္ဘက္ အျခမ္း html code ေတြထဲက ကၽြန္ေတာ္တုိ႔ ႏွိပ္လိုက္တဲ့ html code နဲ႔ ဆုိင္တဲ့ css code ေတြကုိပဲ ျပေပးတာ ျဖစ္ပါတယ္ ( html နဲ႔ css က တြဲသုံးရတာပါ)၊ ဘယ္ဘက္က html code နဲ႔ ဆုိင္တဲ့ css ေတြ ေပၚလာေအာင္ ဘယ္လို လုပ္ရလဲဆုိေတာ့ <div, <ul, <li, <a, … စသည္ျဖင့္ ရွိၾကတဲ့ထဲမွာ ေထာင့္ကြင္း “<” ေနာက္ကပ္ရပ္က စာလုံးကုိ ကလစ္ႏွိပ္လိုက္တာနဲ႔ ညာဘက္မွာ သူနဲ႔ဆုိင္တဲ့ css ကုိ ျပေပးမွာ ျဖစ္ပါတယ္။ css ဘက္အျခမ္းမွာေတာ့ css တစ္ခ်ဳိ႕ကုိ css စာေၾကာင္း ေရွ႕က stop icon ကုိ ပိတ္လိုက္ ဖြင့္လုိက္ လုပ္ၿပီး error ရွာတာတုိ႔ ဘာတုိ႔ လုပ္ၾကည့္လို႔ရပါေသးတယ္၊ အခုကေတာ့ error ရွာစရာ ကုိယ္တုိင္ေရးထားတဲ့ code မရွိေတာ့ css အပိတ္ အဖြင့္ လုပ္ၿပီး ေလ့လာၾကည့္ၾကေပါ့ဗ်ာ၊ ကၽြန္ေတာ္ကေတာ့ firebug ကုိ အခ်ိန္နည္းနည္းပုိေပးၿပီး ေလွ်ာက္စမ္းၾကည့္ေစခ်င္တယ္ဗ်၊ တစ္ျခား site ေတြကုိ ဝင္ၾကည့္တဲ့အခါမွာလဲ သူတုိ႔ site ေတြကုိ firebug နဲ႔ ဝင္ကလိၾကည့္ေပါ့ဗ်ာ၊ ဒါမွ မ်ားမ်ားတတ္မွာဗ်။ firebug က အရမ္းအသုံးဝင္တဲ့ tool တစ္ခုျဖစ္လာတဲ့ေနာက္ပုိင္းမွာ browser တုိင္းလိုလုိက firebug လုိ element ေတြကုိ inspect လုပ္လို႔ရတဲ့ tool ေတြကုိ default အေနနဲ႔ ထည့္သြင္းလာၾကပါတယ္၊

firefox မွာဆုိ ctrl+shift+i

google chrome နဲ႔ IE မွာဆုိ f12 နဲ႔

opera မွာဆုိ right click ႏွိပ္ၿပီး inspect element ကုိ ေရြးၿပီးေတာ့ default inspect tool ေတြကုိ အသုံးျပဳႏုိင္ပါတယ္၊ ကၽြန္ေတာ္ကေတာ့ firebug ကုိ အႀကိဳက္ဆုံးပါပဲ။

ကဲ … website analyzing ကေတာ့ ဒီေလာက္ပါပဲဗ်ာ၊ ေနာက္လာမယ့္ သင္ခန္းစာမွာေတာ့ html, css code ေတြကုိ စေရးသားပါေတာ့မယ္၊ ေနာက္တစ္ပတ္ေလာက္မွ ေရးျဖစ္မယ္ ထင္တယ္ဗ်၊ အဲဒါေၾကာင့္ subscribe လုပ္ၿပီးေတာ့ ေအးေအးေဆးေဆး ေစာင့္ၾကပါဦး၊ ေက်းဇူးတင္ပါတယ္။

Website ေရးနည္း HTML+CSS (အပုိင္း ၂)

x

မဂၤလာပါ …ဒီတစ္ပါတ္ေတာ့ ကၽြန္ေတာ္တုိ႔ html နဲ႔ css code ေတြကုိ စေရးရပါေတာ့မယ္။ မေရးခင္ ဘယ္ language က ဘာအတြက္ သုံးတယ္ဆုိတာေလး ေျပာခ်င္ပါတယ္။ html ဆုိတာကေတာ့ “Hyper Text Markup Language” ရဲ႕ အတုိေကာက္ျဖစ္ၿပီးေတာ့ website မွာ content (စာ, ဓာတ္ပုံ, ..) ေတြထည့္ဖုိ႔ သုံးရတဲ့ language ျဖစ္ၿပီးေတာ့၊ css (Cascading Style Sheet) ကေတာ့ style sheet ဆုိတဲ့အတုိင္း html က ထည့္ထားတဲ့ content ေတြကုိ ပုံစံေျပာင္းျခင္း၊ အလွဆင္ျခင္း အစရွိတာေတြကုိ လုပ္ႏုိင္တဲ့ language ျဖစ္ပါတယ္။ဒီသင္ခန္းစာကုိ ဘယ္လိုလူေတြ လုိက္ႏုိင္မလဲ?

ဒီသင္ခန္းစာကုိ “Analyzing a website” ကုိ ဖတ္ဖူးတဲ့လူေတြ လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။

သင္ခန္းစာ အက်ယ္
အေျခခံ static website တစ္ခုျဖစ္ဖုိ႔အတြက္ ဆုိရင္ေတာ့ Photoshop, HTML, CSS အစရွိတာေတြကုိေတာ့ အနည္းဆုံး တတ္ေျမာက္ထားရမွာ ျဖစ္ပါတယ္၊ ဒါေပမယ့္ အခု ကၽြန္ေတာ္တုိ႔က online ကေနသင္ၾကားေနတာက တစ္ခ်က္၊ ဘာမွမသိေသးတဲ့လူေတြပါ လုိက္လုပ္ႏုိင္ေစခ်င္တာက တစ္ခ်က္ စတဲ့အခ်က္ေတြေၾကာင့္ Photoshop နဲ႔ design ဆြဲတဲ့အပုိင္းကုိ ကၽြန္ေတာ္ ခ်န္ထားခဲ့ပါရေစ။ ပုံမွန္အတုိင္းဆုိရင္ေတာ့ design ဆြဲ customer သုိ႔မဟုတ္ website လာအပ္တဲ့သူကုိျပ၊ သူတုိ႔က ႀကိဳက္တယ္၊ အုိေခ ဆုိမွ က်န္တဲ့ html, css နဲ႔ တစ္ျခားဟာေတြကုိ ဆက္ေရးရတာ ျဖစ္ပါတယ္။ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔မွာ ၾကည့္ဆြဲရမယ့္ design ဆြဲထားတာ မရွိပါဘူး။ ဆြဲထားတာ မရွိေတာ့ ရွိၿပီးသား ဒီဇုိင္းတစ္ခုကုိ ၾကည့္ဆြဲမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ ၾကည့္ဆြဲမယ့္ design ကေတာ့ online ေပၚမွာ ရွိၿပီးသားျဖစ္တဲ့ “Myanmar Web Designer” website ျဖစ္ပါတယ္။ ဒီတစ္ေခါက္ သင္ခန္းစာမွာေတာ့ Myanmar Web Designer ရဲ႕ header div အထိကုိ ၿပီးေအာင္ ေရးမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ စ မေရးခင္ Myanmar Web Designer ရဲ႕ header div ကုိ အေသးစိတ္ analysis လုပ္မွာျဖစ္ပါတယ္။ ေအာက္ကပုံကုိ ၾကည့္ပါ။ အေပၚပုိင္းက header div တစ္ခုလုံးကုိ ျပထားတာပါ၊ ေအာက္ပုိင္းကေတာ့ header div ကုိ အေသးစိတ္ ျပထားတာပါ၊ တစ္နည္းအားျဖင့္ ေအာက္က div ေတြ အကုန္လုံးက header div ထဲမွာ ပါရွိမွာ ျဖစ္ပါတယ္။ 

ဒါဆုိရင္ ကၽြန္ေတာ္တုိ႔ စေရးလို႔ရပါၿပီ၊ code စေရးတဲ့အခါမွာ ေရးဖို႔ software (text editor လို႔ ေခၚပါတယ္) လိုပါတယ္၊ အခုအခ်ိန္မွာေတာ့ open source text editor ျဖစ္တဲ့ “notepad++” ကုိ download လုပ္ၿပီး သုံးပါ။ ဒီ သင္ခန္းစာ အစအဆုံး ၿပီးသြားၿပီဆုိရင္ေတာ့ notepad++ ထက္ ပုိေကာင္းတဲ့ text editor ေတြသုံးပါ၊ ကဲ .. ကၽြန္ေတာ္တုိ႔မွာ text editor လည္းရွိေနၿပီဆုိေတာ့ coding စေရးၾကတာေပါ့။ notepad++ မွာ ေအာက္က code ေတြကုိ လုိက္ေရးပါ။

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

အဲဒီလိုေရးၿပီးၿပီဆုိရင္ေတာ့ notepad++ မွာ flie>save ကုိ သြားၿပီးေတာ့ ေရးၿပီးသားကုိ သိမ္းလိုက္ပါ၊ file name ကုိေတာ့ index.html လို႔ ေပးလိုက္ပါ။ file name ကုိ အႀကီးမသုံးရပါ၊ space မျခားရပါ၊ space အစား “_” ကုိ သုံးပါတယ္။ online ေပၚတင္တဲ့အခါ server ေတြက linux server ေတြမ်ားပါတယ္၊ linux မွာက အေပၚက စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးရပါတယ္၊ server အေၾကာင္းရွင္းျပတာ မဟုတ္လို႔ အက်ယ္ေျပာမေနေတာ့ပါဘူး၊ အဲဒီ စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးပါ၊ အလ်ဥ္းသင့္ရင္ server အေၾကာင္း ေရးပါဦးမယ္။ ဒါဆုိ ကၽြန္ေတာ္တုိ႔ သိမ္းၿပီးၿပီဆုိရင္ code ကုိ ရွင္းျပေပးပါမယ္။

ပထမဆုံး တစ္ေၾကာင္းျဖစ္တဲ့ “<!DOCTYPE html>” ဆုိတာက browser ေတြကုိ ဒီ document အမ်ဳိးအစား (document type) က html အမ်ဳိးအစားျဖစ္တယ္လို႔ ေျပာလုိက္တာျဖစ္ပါတယ္။

ဒါဆုိ ကၽြန္ေတာ္တုိ႔လည္း အခုကၽြန္ေတာ္တုိ႔ ေရးေနတာ html ဖုိင္ဆုိတာ သိသြားၿပီေပါ့၊ html ဖုိင္ျဖစ္တဲ့အတြက္ “<html>” နဲ႔ ဖြင့္ၿပီေးတာ့ “</html>” နဲ႔ ျပန္ပိတ္ေပးရပါတယ္။ အဲဒီ html အထဲမွာမွ head နဲ႔ body ကုိလည္း အဖြင့္ tag, အပိတ္ tag ေတြနဲ႔ ထည့္ေပးရပါတယ္၊ ေခါင္းနဲ႔ ကုိယ္ တပ္ေပးလိုက္တာေပါ့  ။ tag ဆုိတာ ဘာႀကီးလဲ ဆုိေတာ့ ကၽြန္ေတာ္တုိ႔ ေထာင့္ကြင္း “<” နဲ႔ “>” ပါရင္ tag လုိ႔ ေခၚပါတယ္။ tag ေတြမွာမွ slash “/” မပါတာက အဖြင့္ျဖစ္ၿပီးေတာ့၊ ပါရင္ အပိတ္ tag ျဖစ္ပါတယ္၊ (ဥပမာ။        ။ <head> သည္ head အဖြင့္ tag ျဖစ္ၿပီး </head> သည္ head အပိတ္ tag ျဖစ္ပါသည္။)

ဒါဆုိရင္ ကၽြန္ေတာ္ဖုိင္ထဲမွာ head ပုိင္းနဲ႔ body ပုိင္း ဆုိၿပီး ႏွစ္ပုိင္းရပါၿပီ၊ အဲဒါေတြကုိ div ေတြနဲ႔ သြား မေရာပါနဲ႔၊ div တစ္ခုမွ မပါေသးပါဘူး၊ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔ div ေတြကုိ body ထဲကုိ ထည့္ပါေတာ့မယ္၊ ေတာင္းပန္ပါတယ္၊ ေအာက္က ဗီဒီယုိကုိ ဆက္ၾကည့္လိုက္ပါ၊ စာေရးရတာ အရမ္းအခ်ိန္ၾကာၿပီး နားမလည္မွာစုိးလို႔ပါ။

ဗီဒီယုိ အပုိင္း ၁

ဗီဒီယုိ အပုိင္း ၂

ဗီဒီယုိ အပုိင္း ၃

ဗီဒီယုိ အပုိင္း ၄

ဗီဒီယုိ အပုိင္း ၅

Website ေရးနည္း HTML+CSS (အပုိင္း ၃)

x

မဂၤလာပါ …အရင္တစ္ေခါက္ကေတာ့ ကၽြန္ေတာ္တုိ႔ “Coding header of Myanmar Web Designer”

ကုိ ေရးခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ေခါက္ post မွာေတာ့ mainmenu အပုိင္းကုိ ေရးမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ့္အေနနဲ႔ “firebug” addon ကုိ မိတ္ဆက္ေပးခဲ့ၿပီး အသုံးျပဳပုံကုိ ရွင္းျပခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ခါ firefox addon ေနာက္တစ္ခုကုိ ကၽြန္ေတာ္ မိတ္ဆက္ေပးမွာျဖစ္ပါတယ္၊ firefox addon ျဖစ္တဲ့အတြက္ firefox မွာပဲ အလုပ္လုပ္မွာပါ၊ တစ္ျခား browser ေတြအတြက္လည္း ရွာရင္ေတာ့ ရွိႏုိင္ပါတယ္၊ အဲဒီ addon ကေတာ့ …

“web developer” addon ျဖစ္ပါတယ္။ ဒီ addon က လုပ္ႏုိင္တဲ့ လုပ္ငန္းေတြကေတာ့ အမ်ားႀကီးေပါ့။ အဲဒီထဲကမွ ကၽြန္ေတာ္က အလ်ဥ္းသင့္သေလာက္ပဲ ေဖာ္ျပသြားမွာ ျဖစ္ပါတယ္၊ က်န္တာေတြကုိေတာ့ ကုိယ့္ဘာသာ စမ္းသပ္ၾကည့္ႏုိင္ရင္ ပုိေကာင္းတာေပါ့။ အစကေတာ့ ကၽြန္ေတာ္ internet connection ကုိ ငဲ့ၿပီး စာေတြနဲ႔ပဲ သင္ေပးဖို႔ လုပ္ခဲ့ပါတယ္။ ဒါေပမယ့္ တစ္ကယ္တန္းက်ေတာ့ စာနဲ႔ သင္မယ္ဆုိရင္၊ စာေတြအမ်ားႀကီးေရးရတဲ့အတြက္ အခ်ိန္ပုိကုန္ပါတယ္၊ အခ်ိန္ပုိကုန္ေတာ့ တစ္ပတ္ တစ္ပတ္ကုိ နည္းနည္းပဲ သင္ႏုိင္ပါတယ္၊ ေနာက္တစ္ခုက စာနဲ႔ရွင္းျပေတာ့ နားမလည္ဖုိ႔ ရာခုိင္ႏႈန္းပုိမ်ားပါတယ္၊ video နဲ႔က်ေတာ့ သင္ျပေပးတာကုိ လုိက္ၾကည္လို႔ရေတာ့ ပုိနားလည္မယ္ထင္ပါတယ္။ video ေတြကုိ download လုပ္ရတာ အဆင္ေျပေအာင္ ၁၀ မိနစ္ဝန္းက်င္ အပုိင္းေလးေတြ record လုပ္ေပးထားပါတယ္။ ေနာက္ပုိင္းမွာ ျမန္မာႏုိင္ငံရဲ႕ IT ေလာကမွာ web က ေတာ္ေတာ္ေလး တြင္က်ယ္လာဖုိ႔ ရွိပါတယ္၊ ဒါေၾကာင့္ ေနာက္ပုိင္းက်ရင္ web design နဲ႔ ပတ္သတ္ၿပီးေတာ့ အလုပ္အကုိင္ အခြင့္အလမ္းေတြ မ်ားလားမွာပါ။ ကုိယ့္ဘက္က အဆင္သင့္ ျဖစ္ေနဖုိ႔ လုိပါတယ္။ ေလ့လာရတာ အဆင္မေျပတာရွိရင္ email တုိ႔ chat တုိ႔ကေန မေမးပဲ comment မွာ ေမးခဲ့ႏုိင္ပါတယ္၊ ဒါမွသာ တစ္ျခားသူေတြလည္း ပုိ ဗဟုသုတ ရႏုိင္မွာ ျဖစ္ပါတယ္။youtube မွာက default အေနနဲ႔ ၁၅ မိနစ္ထက္ပုိတဲ့ video ေတြဆုိ ေပးမတင္ပါဘူး၊ ကုိယ့္ဘာသာ limit ကုိ တုိးလုိ႔ေတာ့ ရပါတယ္၊ ဒါေပမယ့္ သူက ႏုိင္ငံအေပၚမူတည္ပါတယ္၊ ျမန္မာႏုိင္ငံလည္း တုိးလို႔ေတာ့ရပါတယ္၊ ဖုန္းနံပါတ္ နဲ႔ verify လုပ္ခုိင္းပါတယ္၊ ကြၽန္ေတာ့္ ဖုန္းနံပါတ္နဲ႔ verify လုပ္လို႔မရလို႔ ေနာက္ထပ္ google service တစ္ခုျဖစ္တဲ့ “google drive” မွာ ကြၽန္ေတာ္ တင္ၿပီးေတာ့ share လုပ္ထားတာျဖစ္ပါတယ္၊ အက်ယ္ၾကည့္ခ်င္ရင္ “How to create menu with html and css” ကုိ ကလစ္ႏွိပ္ၿပီး သြားၾကည့္လို႔ရပါတယ္။Google Drive မွာ download လုပ္ဖုိ႔ အဆင္မေျပတဲ့သူမ်ားအတြက္ http://www.youtube.com/watch?v=2emQv4s20XY&feature=youtu.be မွာ ထပ္တင္ေပးထားပါတယ္၊ ၂ ေနရာလုံးက download လုပ္လို႔ရပါတယ္။

http://www.myanmarwebdesigner.com/blog/ မွ ကူယူျဖန္႔ေ၀ပါသည္။

ဆက္လက္ဖက္ရႈရန္

Blogspot ျပဳလုပ္နည္း – How to make a blogger website

မဂၤလာပါ..
သင္ခန္းစာ မစခင္ ကၽြန္ေတာ္တုိ႔ blogger ကုိ ဘာလို႔ ေရြးရသလဲ၊ ခင္ဗ်ားတုိ႔ေကာ website ျပဳလုပ္တဲ့ အခါမွာ blogger ကုိ ဘာေၾကာင့္ ေရြးသင့္လဲ ဆုိတာကုိ မိတ္ဆက္အေနနဲ႔ အနည္းငယ္ ေျပာျပပါမယ္။
ကၽြန္ေတာ္က blogger ကုိ ဘာေၾကာင့္ ေရြးသလဲဆုိေတာ့ ကၽြန္ေတာ္ကုိယ္တုိင္ကုိက google ကေပးတဲ့ services ေတြကုိ ႀကိဳက္လုိ႔ပါ။ Blogger ဆုိတာက google က ေပးတဲ့ services ေတြထဲက တစ္ခုျဖစ္ပါတယ္။ Blogger ကုိ လူတုိင္းမသိႏုိင္ေပမယ့္၊ google ကုိေတာ့ လူတုိင္း သိမွာပါ။

ခင္ဗ်ားတုိ႔ကေရာ blogger ကုိ ဘာေၾကာင့္ ေရြးသင့္သလဲဆုိေတာ့ အဓိက အေၾကာင္းအရင္းကေတာ့ google ပါပဲ။ Blogger က google product တစ္ခုျဖစ္တဲ့အတြက္ေၾကာင့္ google ရဲ႕ မ်က္ႏွာသာေပးျခင္း ခံရပါတယ္။ ဘယ္လုိမ်က္ႏွာေပးခံရလဲဆုိေတာ့ –

– Google ရဲ႕ hosting မွာ website run ခြင့္ရတဲ့အတြက္ website အျမန္ႏႈန္း စိတ္မပူရျခင္း။
– SEO ေကာင္းမြန္ေအာင္ အလြယ္တကူ ျပဳလုပ္ႏုိင္ျခင္း။
– Google Plus social network နဲ႔ ခ်ိတ္ဆက္ၿပီး မိမိ website ကုိ လူဝင္မ်ားေအာင္ ျပဳလုပ္ႏုိင္ျခင္း။
– ပုံတင္တဲ့အခါမွာ Google Picasa ကုိ ေရာက္သြားတဲ့အတြက္ ပုံေတြ တစ္စုတစ္စည္းထဲ ျပန္ၾကည့္ႏုိင္ျခင္း။

အဲဒီလို မ်က္ႏွာသာေပးျခင္း ခံရတဲ့အျပင္၊

– blogger က interface ေကာင္းမြန္တဲ့အတြက္ အသုံးျပရလြယ္ကူပါတယ္။ (interface ဆုိတာက ေတာ့ တစ္စုံတစ္ခုကုိ ခင္းက်င္းျပသပုံ နဲ႔ design ကုိ ေရာေခၚတာပါ။ interface ေကာင္းတယ္ဆုိရင္ design လည္း ေကာင္းရမယ္၊ layout လုိ႔ ေခၚတဲ့ ခင္းက်င္းျပသပုံလည္း ေကာင္းရပါမယ္။ ဒါမွသာ အသုံးျပဳသူေတြက ေကာင္းေကာင္း သုံးတတ္မွာျဖစ္ပါတယ္။)
– adsense နဲ႔ ခ်ိတ္ဆက္ကာ မိမိ blog မွာ ေၾကာျငာထည့္သြင္းၿပီး ေငြရွာႏုိင္ျခင္း။
– Widgets မ်ားေကာင္းမြန္ျခင္း။

စတဲ့အခ်က္ေတြေၾကာင့္ blogger ကုိ အသုံးျပဳသင့္ပါတယ္။ ဒီအခ်က္ေတြကုိေတာ့ ေနာက္လာမယ့္ post မွာ အေသးစိတ္ ရွင္းျပပါမယ္။ အခု post ရဲ႕ အဓိက အေၾကာင္းအရာက blogger website တစ္ခု ဘယ္လုိလုပ္မလဲ ဆုိတာ ျဖစ္တဲ့အတြက္ blog လုပ္ပုံကုိ ဆက္ရွင္းျပပါမယ္။ Blogger blog တစ္ခု ျပဳလုပ္ဖုိ႔အတြက္ gmail အေကာင့္ တစ္ခုရွိရပါမယ္။ ဒါကလည္း သိပ္ခက္ခဲေနတဲ့ ကိစၥေတာ့ မဟုတ္ပါဘူး။ ျမန္မာႏုိင္ငံက အင္တာနက္ အသုံးျပဳသူ အားလုံးနီးပါးမွာ အနည္းဆုံး gmail အေကာင့္ တစ္ခုေတာ့ ရွိၾကတာပါပဲ။ အရင္ဆုံး လုပ္ရမွာကေတာ့ အဲဒီ gmail အေကာင့္ကုိ sign in ဝင္လုိက္ပါ။ sign in ဝင္ၿပီးၿပီဆုိရင္ www.blogger.com ကုိ သြားလိုက္ပါ။ ၿပီးရင္ေတာ့ ေအာက္က ပုံေလးေတြ ဆက္ၾကည့္ၿပီး လုပ္သြားပါ။

New Blog ကုိ click ႏွိပ္ရပါမယ္

ဒီပုံမွာေတာ့ ရွင္းျပရမွာ မ်ားလုိ႔ အမွတ္စဥ္ေတြ တပ္ျပထားပါတယ္။ အဲဒီအမွတ္စဥ္ေတြရဲ႕ ရွင္းလင္းခ်က္ကေတာ့ ေအာက္ပါအတုိင္းပါ။
(၁) မိမိလိုခ်င္တဲ့ website ရဲ႕ နာမည္ ရုိက္ထည့္ရမွာ ျဖစ္ပါတယ္။
(၂) လိုခ်င္တဲ့ website လိပ္စာ ရုိက္ထည့္ရမွာပါ။ (ဥပမာ။ ။ www.myanmarseo.blogspot.com) ျဖစ္ပါတယ္။ ဒီဥပမာအရဆုိရင္ ကၽြန္ေတာ္တုိ႔ ရုိက္ထည့္ရမွာက myanmarseo တစ္ခုတည္းျဖစ္ပါတယ္။ က်န္တဲ့ေနာက္ကစာေတြက ပါၿပီးသားျဖစ္ပါတယ္။ website လိပ္စာရုိက္ထည့္တဲ့အခါ အႀကီးမသုံးရပါဘူး၊ space မျခားရပါဘူး။
(၃) နံပါတ္ ၃ ကေတာ့ ကၽြန္ေတာ္တုိ႔ ရုိက္ထည့္တဲ့ လိပ္စာက ယူလို႔ ရ / မရ စစ္ေပးတာျဖစ္ပါတယ္။ အမွန္ျခစ္ ျပတယ္ဆုိရင္ ကၽြန္ေတာ္တုိ႔ ရုိက္ထည့္တဲ့ လိပ္စာက ယူလုိ႔ရပါတယ္။ အမွားျပတယ္ဆုိရင္ေတာ့ ယူလို႔မရပါဘူး။ တစ္ျခား လိပ္စာ ရုိက္ထည့္ရပါမယ္။
(၄) template ဆုိတာကေတာ့ ခင္ဗ်ား blog ရဲ႕ design ကုိ ေရြးခ်ယ္တဲ့အပုိင္းျဖစ္ပါတယ္။ လုိခ်င္တဲ့ ပုံစံ မရွိလည္း တစ္ခုေတာ့ ေရြးလုိက္ပါ။ ေနာက္မွ ျပန္ေျပာင္းလို႔ရပါတယ္။
(၅) အေပၚက အဆင့္ေလးဆင့္လုံး လုပ္ၿပီးၿပီဆုိရင္ေတာ့ Create Blog ကုိ click ႏွိပ္လိုက္ပါ။

ဒါဆုိရင္ေတာ့ အေပၚက အဆင့္ (၂) မွာ ရုိက္ထည့္ခဲ့တဲ့ လိပ္စာအတုိင္း ကုိယ္ပုိင္ blog တစ္ခု တည္ေဆာက္ၿပီးသြားၿပီ ျဖစ္ပါတယ္။ ၿပီးရင္ေတာ့ မိမိ blog ရဲ႕ ထိမ္းခ်ဳပ္မႈအပိုင္းကုိေတာ့ ေအာက္ပါအတုိင္း ျမင္ရပါမယ္။

ဒါဆုိရင္ အနီေရာင္ေဘာင္ခတ္ထားတဲ့ ထဲက “Posts” ထဲကုိဝင္ၿပီးေတာ့ New Post ကုိႏွိပ္ၿပီး၊ မိမိ blog မွာ စာေတြတင္လို႔ရပါၿပီ။

ဆက္လက္ဖက္ရႈရန္

Blog မွာ blog မွာ facebook like and share button ထည့္နည္း

 Blog မွာ Facebook like and share button ထည့္လို႔မရလို႔  အီးေမးလ္ထဲမွာ ေမးလာတာေလးပါ။ အရင္က တင္ဖူးတဲ့ Blog မွာ Facebook comment box ထည့္နည္း ကုိ ဖတ္ထားဖူးရင္ေတာ့ တစ္ဝက္ေလာက္ လုပ္တတ္ေနေလာက္ပါၿပီ။

အခုေျပာျပမယ့္နည္းကေတာ့ Facebook က တရားဝင္ သတ္မွတ္ထားတဲ့၊ တရားဝင္ေပးထားတဲ့ code ေတြနဲ႔ ထည့္ျပေပးမွာျဖစ္ၿပီးေတာ့ HTML5 နဲ႔ ထည့္ျပမွာျဖစ္ပါတယ္။ Google Blog တင္မဟုတ္ပါဘူး၊ WordPress blog မွာလည္း ဒီနည္းအတုိင္း ထည့္လို႔ရပါတယ္။ Code ထည့္ရမယ့္ေနရာေတာ့ ကြာပါတယ္။ ေမးလာသူက Google blogspot နဲ႔ေမးလာတာမုိ႔လို႔ blogspot နဲ႔ လုပ္ပုံလုပ္နည္းကုိပဲ တင္ေပးလိုက္ပါတယ္။

အရင္ဆုံးလုပ္ရမွာက Back up ပါ။ မိမိ blog ကုိ ဘာပဲျပင္ျပင္ back up လုပ္ထားဖုိ႔ အေရးႀကီးပါတယ္။ Back up လုပ္ၿပီးရင္လည္း ေနာက္ဆုံး ျပင္တာဆင္တာ အားလုံးအဆင္ေျပၿပီဆုိၿပီး ဖ်က္ပစ္လုိက္ရမွာမဟုတ္ပါဘူး။ သူ႔ဟာနဲ႔သူ အဓိပၸါယ္ရွိတဲ့ နာမည္ေပးၿပီး သိမ္းထားတာေကာင္းပါတယ္။ ကဲစပါမယ္။

• ဘေလာ့ေထာင္ထားတဲ့ G-mail အေကာင့္ကုိ browser မွာ login လုပ္ပါ
• blogger.com ကုိသြားပါ
• ေရာက္ၿပီဆုိရင္ blog တစ္ခုထက္ပုိလုပ္ထားတဲ့သူက ျပင္ခ်င္တဲ့ blog ကုိႏွိပ္လိုက္ပါ။
• ၿပီးရင္ Template > Backup / Restore > Download full template ကုိႏွိပ္လုိက္ပါ။
• download က်လာတဲ့ဖုိင္ေလးကုိ b4_fb_like_share_btn.xml လုိ႔နာမည္ေပးၿပီး လုံျခံဳတဲ့ေနရာမွာ သိမ္းလိုက္ပါ။

ဒါဆုိရင္ ဖုိင္နာမည္ကုိၾကည့္လုိက္တာနဲ႔ ဒီဖုိင္က Facebook like နဲ႔ share button မထည့္ခင္ကဆုိတာ သိႏုိင္ပါတယ္။ ဒါဆုိရင္ ေနာက္တစ္ခ်ိန္မွာ အခက္အခဲရွိတာနဲ႔ အဲဒီဖုိင္ေတြကုိ ျပန္ၾကည့္ၿပီး ျပန္တင္ႏုိင္ပါတယ္။

Back up လုပ္ၿပီးရင္ေတာ့ လုပ္ငန္းစပါေတာ့မယ္။ Template > Edit HTML ကုိႏွိပ္ပါ။

အဲဒီမွာ template ကုဒ္ေတြ ေတြ႕ရပါမယ္၊ Ctrl+f ႏွိပ္ၿပီးေတာ့ <body လုိ႔ ရုိက္ထည့္ၿပီး Enter ႏွိပ္ပါ။ ဒါဆုိရင္ body tag ရွိတဲ့ေနရာကုိ ျပေပးပါလိမ့္မယ္ (ဥပမာ။ <body ……………………….. >) အစက္ေတြခ်ျပထားတာက တစ္ျခားကုဒ္ေတြရွိမွာကုိ ေျပာတာပါ။ အပိတ္ေထာင့္ကြင္း (>) ေလးရဲ႕ေနာက္မွာ Enter တစ္ခ်က္ႏွိပ္၊ ၿပီးရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ကုိ ကူးထည့္လုိက္ပါ။ မထည့္ခင္ ထည့္ၿပီးသားရွိမရွိ စစ္ပါ။ ရွိၿပီးသားဆုိရင္ ထပ္ထည့္ဖို႔ မလိုပါ။

1 2 3 4 5 6 7 8 9 10

<div id="fb-root"></div> <script>//<![CDATA[ (function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]></script>

Facebook plugins ေတြေပၚဖုိ႔ Javascript Software Development Kit (JS SDK) ကုိ ထည့္လိုက္တာပါ။ ေနာက္တစ္ဆင့္အေနနဲ႔ <data:post.body/>ကုိ ရွာလိုက္ပါ။ <data:post.body/> ေတြ႕တုိင္း သူ႔ရဲ႕အေပၚမွာ ေအာက္က ကုဒ္ကုိ ထည့္ပါ။ ထည့္ၿပီးသားေတြ ျပန္မထည္မိပါေစနဲ႔။

1 2 3 4 5

<b:if cond='data:post.link'>     <div class="fb-like" expr:href="data:post.link" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>   <b:else/>     <div class="fb-like" expr:href="data:post.url" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>   </b:if>

ၿပီးရင္ေတာ့ Save Template ကုိႏွိပ္ၿပီး သိမ္းလိုက္ပါ။ ဒါဆုိရင္ blog ရဲ႕ post ေခါင္းစဥ္ေအာက္ေတြမွာ Like & Share ခလုတ္ေလးေတြ ေပၚလာပါၿပီ။

ဒါဆုိရင္ Facebook like & share button ထည့္ၿပီးသြားပါၿပီ။ အဆင္မေျပဘူးဆုိရင္ေတာ့ comment ေရးခဲ့ပါတယ္။ အဆင္ေျပတယ္ဆုိရင္ေတာ့ ညာဘက္က like & share ေလးႏွိပ္ၿပီး Facebook က သူငယ္ခ်င္းေတြကုိ ထပ္ဆင့္ မွ်ေဝလိုက္ပါ။

ဆက္လက္ဖက္ရႈရန္