♪ “သင့္ရဲ႕ဝက္ဘ္ဆိုက္ကို မုိဘိုင္းဖုန္းေပၚမွာ ျမန္ဆန္ေစဖို႔ႏွင့္ နည္းလမ္း” ♫

လက္ရွိ ျမန္မာျပည္ရဲ႕ အင္တာနက္ user ရဲ႕ ၉၀ ရာခိုင္ႏွုန္းဟာ မုိဘိုင္းဖုန္း ေပၚကေနလာသူမ်ား ျဖစ္ပါ တယ္။ ဒီေတာ့ သင့္ရဲ႕လုပ္ငန္းဝက္ဆိုက္ကို ေရွးသမားရိုးက်အတိုင္း Desktop user အတြက္ပဲ ရည္ရြယ္တယ္ ဆုိရင္ ေတာ့ သင့္လုပ္ငန္း ေရရွည္ရပ္တည္ဖုိ႔ မလြယ္ေတာ့ပါဘူး။ အေၾကာင္းက ေတာ့ မုိဘိုင္းဖုန္း ဖန္သားျပင္ ေသးေသးေလးေပၚမွာ ဝဘ္ဆိုဒ္တစ္ခုကို ေခၚလိုက္ရင္ က်လာတဲ့အရြယ္ဟာ ကြန္ပ်ဴတာေပၚမွာ ၾကည့္ရမယ့္ အရြယ္ျဖစ္တာေၾကာင့္ အဆင္မေျပပါဘူး။ ေသးေအာင္လုပ္ရ၊ ေရႊ႕ရနဲ႔ အေတာ္ေလး ခက္ပါတယ္။ ဒါေၾကာင့္မို႔ မုိဘိုင္းဖုန္း သံုးသူမ်ားဟာ ဝဘ္ဆုိဒ္ေတြကို မဝင္ေတာ့ဘဲ Facebook ေပၚမွာသာ စာဖတ္တဲ့ အေလ့ အထကို ျမန္မာျပည္မွာ ပိုျပီးေတာ့ လုပ္လာၾကပါတယ္။ ဒီေတာ့ ခပ္ၾကာရွည္ ရပ္တည္ႏိုင္ဖို႔အတြက္ မုိဘိုင္းအသားေပးတဲ့ ဝက္ဆိုက္ကို ေျပာင္းၾကစုိ႔။ ဒီေတာ့ေျပာင္းတဲ့ နည္းလမ္းေလးကို မွ်ေဝပါရေစ။ အရင္ဆံုး အားလံုးကို မုိဘိုင္းကို ေျပာင္းမယ္ဆုိရင္ Responsive template သံုးရင္ျပီးေရာလို႔ မွတ္ထားတာမ်ိဳးကိုလည္း ေျဖရွင္းခ်င္ပါတယ္။ မွန္လည္းမွန္ပါတယ္။ ဒါေပမယ့္ ယင္း ေရြးခ်ယ္မႈနဲ႔ အတူ အျခားေရြးခ်ယ္မႈေတြလည္း ရွိပါေသး တယ္။ အားလံုးကို ရွင္းျပပါ့မယ္။ အဓိက အားျဖင့္ မုိဘိုင္းဆုိက္လို႔ ေျပာရင္ Responsive Web Design, Dynamic Serving နဲ႔ Seperate URLs ဆုိျပီး ေတာ့ သံုးမ်ိဳး ရွိပါတယ္။

<ဝက္ဆိုက္အလုပ္လုပ္ပံု>
ဝက္ဆိုက္ရဲ႕ အလုပ္လုပ္ပုံကေတာ့ user ကေနျပီးေတာ့ browser ထဲကေန URL ကို ရိုက္လိုက္ျပီဆုိရင္ HTML page က်လာျခင္း ျဖစ္ပါတယ္။ ဒါ အလြယ္မွတ္တဲ့ နည္းပါ။ တကယ္တန္းက်ေတ့ URL ရိုက္လိုက္ရင္ HTML, Javascrpit, CSS တို႔က်လာျခင္း ျဖစ္ပါတယ္။ ယင္း အလုပ္လုပ္ပံု အေျခခံကို သိထားဖို႔ လိုအပ္ပါတယ္။ html တုိ႔က ဘယ္ကေန က်လာသလဲဆုိရင္ Hosting ကေန က်လာျခင္း ျဖစ္ပါတယ္။ Hosting ဆိုတာ ဝက္ဆိုက္ရဲ႕ အခ်က္အလက္မ်ားကို စုစည္းသိမ္းဆည္းထားတဲ့ ေနရာ ျဖစ္ပါတယ္။ ယင္းေနရာကို လိပ္စာအျဖစ္ URL တစ္ခုသတ္မွတ္ေပးလိုက္တာေၾကာင့္ အခ်က္အလက္ေတြကို တိက်မွန္ကန္စြာယူေပးျခင္းျဖစ္ပါတယ္။

<Separate URLs>
Separate URLs ဆုိတာ ဝက္ဆိုက္လိပ္စာကအစ ေျပာင္းလိုက္တာပါ။ ဝက္ဆိုက္တစ္ခုကို ကြ်န္ေတာ္တုိ႔အေနနဲ႔ ကြန္ပ်ဴတာကေန ရိုက္ရွာလိုက္ရင္ က်လာတာက html file လို႔ အၾကမ္းဖ်ဥ္းမွတ္ယူႏုိင္ပါတယ္။ html file ဟာ Hosting ထဲမွာ ရွိတဲ့ File တစ္ခုထဲကေန က်လာျခင္း ျဖစ္ပါတယ္။ ဝက္ဆိုက္ လုပ္တယ္ဆုိတာ ဒီဇိုင္းေတြ content ေတြကို file ထဲမွာထည့္ျပီးေတာ့ hosting ေပၚတင္ထားတာေၾကာင့္ အင္တာနက္ လိပ္စာလည္း တပ္ေပးထား တာေၾကာင့္ သူ႔လိပ္စာအတိုင္း ရိုက္ရင္ အခ်က္အလက္က်လာျခင္း ျဖစ္ပါ တယ္။ Seperate URLs စနစ္မွာက html ကိုလည္း မတူညီတာ သံုးပါတယ္။ URL ကိုလည္း ခြဲထားေပးပါတယ္။ ဥပမာ https://www.cnn.com ကို မိုဘိုင္းဆိုက္အျဖစ္ https://mobile.cnn.com ဆုိျပီးေတာ့ URL ေျပာင္းလိုက္ျခင္း ျဖစ္ပါတယ္။ ရွိရင္းစြဲ domain ကေန Sub domain ခြဲလိုက္ျခင္း သေဘာျဖစ္ပါတယ္။ ဒါ့အျပင္ သူ႔ထူးျခားခ်က္က ဝက္ဆိုက္ပါ ခြဲလိုက္ျခင္းျဖစ္ပါတယ္။ html မတူဘူးလို႔ဆုိတဲ့ အေၾကာင္းအရင္းကေတာ့ ဝက္ဆိုက္မတူဘူးလို႔ဆုိတာနဲ႔ အတူတူပါပဲ။ ဒီေတာ့ မုိဘိုင္းဖုန္း browser ရဲ႕ ဝက္ဆိုက္ကို ရိုက္လိုက္မယ္ဆုိရင္ သူ႔အတြက္ သီးျခားစီမံဖန္တီးေပးထားတဲ့ သီးသန္႔ မုိဘိုင္း ဝက္ဆိုက္က်လာမွာ ျဖစ္ျပီး ကြန္ပ်ဴတာကေနရိုက္ရင္ ကြန္ပ်ဴတာအတြက္ ရည္ရြယ္တဲ့ ဆုိက္သက္သက္ကို ျမင္ရမွာျဖစ္ပါတယ္။

<Dynamic Serving>
Dynamic Serving က URL မတူပါဘူး။ URL မတူဘူးဆုိတာ သီးျခား URL ျဖစ္ပါတယ္။ URL သာ မတူတာ။ html က်ေတာ့ တူပါတယ္။ ဆုိလိုရင္း ကေတာ့ လိပ္စာ ႏွစ္ခုအတြက္ အိမ္တစ္အိမ္ထဲကိုသာ ေပးထားျခင္း သေဘာျဖစ္ပါတယ္။ URL ႏွစ္ခုျဖစ္ေပမယ့္ Hosting တစ္ခုထဲက html file တစ္ခုတည္းကိုသာ ညြန္းထားျခင္းျဖစ္ပါတယ္။ ဒီေတာ့ မုိဘိုင္းဖုန္းကေန ကြန္ပ်ဴတာကေနၾကည့္တဲ့လိပ္စာကို ရိုက္လိုက္ရင္ သူ႔ပါသူ အလိုအေလ်ာက္ မိုဘိုင္းဖုန္း လိပ္စာ (mobile.cnn.com) ဆိုတာမ်ိဳးကို ညြန္းသြားျပီး ဝက္ဆိုက္ကိုေတာ့ file တစ္ခုတည္းကေနပဲ ယူသံုးပါတယ္။ html ကိုေတာ့ Responsive ျဖစ္ေအာင္ လုပ္ထားေကာင္း လုပ္ထားပါလိမ့္မယ္။ ယင္း Responsive လုပ္တယ္ဆုိတာ ဘာလဲဆုိတာပါ ဆက္ရွင္းပါ့မယ္။

<Responsive Web Design>
သူကေတာ့ URL လည္း မေျပာင္းသလို html လည္း မေျပာင္းပါဘူး။ ဆုိလိုရင္းကေတာ့ မုိဘိုင္းဖုန္းကေနပဲ ရွာရွာ၊ Desktop ကေနပဲ ရွာရွာ ရလာမယ့္ ဝက္ဆိုက္ရလဒ္က အတူတူပဲ ျဖစ္ပါတယ္။ ဒါေပမယ့္ ကြဲျပားမွု ရွိပါတယ္။ ဘာကြဲျပားမွုလဲ ဆုိေတာ့ ဝက္ဆိုက္ကို ကြန္ပ်ဴတာေပၚမွာ ၾကည့္တဲ့ အခါ ရလာတဲ့ ရလဒ္က တစ္မ်ိဳး ျဖစ္ျပီး မုိဘိုင္းဖုန္းေပၚမွာ ၾကည့္တဲ့ အခါ ရလာတဲ့ ရလဒ္က တစ္မ်ိဳး ျဖစ္ပါတယ္။ အဓိကကေတာ့ ဒီဇိုင္း ေျပာင္းလဲျခင္းသာ ျဖစ္ပါတယ္။ အတြင္းက Content အခ်က္အလက္ မ်ားကေတာ့ မေျပာင္းလဲပါဘူး။ အားလံုး Desktop မွာ ျမင္ရတာနဲ႔ အတူတူ ပါပဲ။ Feature အျဖဳတ္အတပ္၊ Category အျဖဳတ္အတပ္လည္း မရွိပါဘူး။ ဒီေတာ့ Mobile ေပၚမွာဖတ္တာအတြက္လည္း လြယ္ကူသလို Desktop မွာဖတ္ဖုိ႔အတြက္လည္း လြယ္ကူပါတယ္။

<ဘယ္ဟာ ပိုေကာင္းသလဲ>
အေကာင္းဆံုးကေတာ့ Responsive Web Design ျဖစ္ပါတယ္။ Google ကို္ယ္တိုင္ကလည္း ယင္း Responsive Web Design ကို ပိုျပီးေတာ့ အသား ေပးျပီးေတာ့ Search Engine မွာ ရွာေတြ႔ေအာင္ ျပဳလုပ္ေပးပါတယ္။ ၂၀၀၇ ခုႏွစ္ကေနစလို႔ Google ဟာ မုိဘိုင္းဆုိဒ္ေတြကို Crawl လုပ္ စုေဆာင္းမယ့္ Mobile Bot ေတြ လုပ္လိုက္ေပမယ့္ သူတုိ႔က အလုပ္နည္းေလေကာင္းေလ ဆုိတဲ့ ဗ်ဴဟာသာ လက္ခံထားပါတယ္။ ဒီေတာ့ bot ႏွစ္ေကာင္လြတ္ျပီး ဝက္ဆိုက္ႏွစ္ခုကို crawl မယ့္အစား bot ႏွစ္ေကာင္လြတ္ျပီး ဝက္ဆိုက္တစ္ခု တည္းကို crawl ရတဲ့ သေဘာကို ပုိျပီးေတာ့ ႏွစ္သက္ပါတယ္။ အေၾကာင္း ကေတာ့ ကုမၸဏီအမွတ္တံဆိပ္တစ္ခုက ဝက္ဆိုက္ႏွစ္ခုနဲ႔ မတူညီတဲ့ ကြန္ပ်ဴတာကေန ၾကည့္သူနဲ႔ မုိဘိုင္းကေန ၾကည့္သူကို ခြဲျခားျပသတယ္လို႔ မထင္မွတ္မိေစေအာင္ ျဖစ္ပါတယ္။ Responsive Web Design ကို recommend ေပးေပမယ့္ အျခားေသာ နည္းလမ္းမ်ားကိုလည္း မေကာင္း ဘူးလို႔မဆုိလုိပါဘူး။ bot ေတြလည္း Crawl ပါေသးတယ္။ ဒါေပမယ့္ ယင္း နည္းလမ္းႏွစ္ခုဟာ Search Engine Optimisation အတြက္ အႏၱရာယ္ မ်ားပါတယ္။ Seperate URLs ဆုိရင္ ဝက္ဆိုက္ႏွစ္ခုျဖစ္သြားပါျပီ။ html လည္းမတူသလို ဝက္ဆိုက္လိပ္စာလည္း မတူတာေၾကာင့္ ဒါဟာ သီးျခား brand တစ္ခုလို႔ ထင္မွတ္ဖြယ္ရွာ ရွိပါတယ္။ ကြန္ပ်ဴတာနဲ႔ ၾကည့္တဲ့ဆိုဒ္္မွာ လည္း ဒီသတင္းနဲ႔ အခ်က္အလက္ပဲတင္ျပီး မိုဘိုင္းနဲ႔ ၾကည့္တဲ့ ဆုိက္မွာ လည္း ဒီအခ်က္အလက္ကိုပဲ ျပန္တင္တာဆုိရင္ copy ကူးတယ္ သို႔မဟုတ္ duplicate လုပ္တယ္ဆုိတဲ့ ဆြဲခ်က္တစ္ခုကို ရရွိႏိုင္ပါတယ္။ ဒါေၾကာင့္မို႔ အႏၱရာယ္မ်ားတာ ျဖစ္ပါတယ္။

Dynamic Serving ကေတာ့ Separate URLs နဲ႔ ယွဥ္ရင္ေတာ့ နည္းနည္း သက္သာပါလိမ့္မယ္။ အေၾကာင္းကေတာ့ သူဟာ URL သာကြဲသြားေပမယ့္ ယူသံုးတဲ့ အခ်က္အလက္က်ေတာ့ တူလို႔ ျဖစ္ပါတယ္။ ဒါေပမယ့္ လိပ္စာကြဲ သြားတာဟာလည္း SEO မွာ စဥ္းစား တြက္ခ်က္မွတ္ယူစရာတစ္ခုအျဖစ္ ရွိေနပါေသးတယ္။ ဥပမာ အိမ္တစ္အိမ္ထဲကပဲ လိပ္စာႏွစ္ခုရွိရင္ ဇေဝဇဝါ ျဖစ္ေစတဲ့ သေဘာပဲျဖစ္ပါတယ္။ ဒီေတာ့ Dynamic Serving ဟာလည္း ေကာင္းေပမယ့္ နည္းနည္းေတာ့ အႏၱရာယ္မ်ားပါတယ္။ ဒီေတာ့ အေကာင္းဆံုးက ဘယ္ဟာ ျဖစ္တယ္ဆိုတာကို မေျပာလည္း သိေတာ့မယ္ ထင္ပါတယ္။ Responsive ဆုိတဲ့ သေဘာက ၾကည့္ရႈတဲ့ ပစၥည္းေပၚမွာ မူတည္ျပီးေတာ့ ဝက္ဆိုက္ကို ပံုစံမွန္မွန္ ျပသေစဖုိ႔ ျဖစ္ပါတယ္။ ဘရူစလီ ေျပာခဲ့သလို ေရလိုက်င့္ပါဆုိတဲ့ သေဘာတရားပဲ ျဖစ္ပါတယ္။

ေရဆုိတာ ဘယ္ခြက္ထဲ ထည့္ထည့္ အဆင္ေျပသလိုပဲ Responsive Technology က ဝက္ဆိုက္ကိုလည္း ၾကည့္ရႈတဲ့ Device က ကြန္ပ်ဴတာျဖစ္ရင္ ကြန္ပ်ဴတာ အေလ်ာက္၊ မုိဘိုင္းဖုန္းျဖစ္ရင္ မုိဘိုင္းဖုန္းအေလ်ာက္၊ Tablet ျဖစ္ရင္Tablet အေလ်ာက္ မွန္ကန္စြာ ျပသေစတတ္ဖို႔ ျဖစ္ပါတယ္။ယင္းနည္းပညာကို အသံုးျပဳဖို႔ဆုိတာကလည္း မိမိရဲ႕ လက္ရွိ ရွိရင္းစြဲဝက္ဆိုက္ကို Responsive ျဖစ္ဖုိ႔ရန္ Coding line အခ်ိဳ႕ ျပန္လည္ျဖည့္ဆည္းျခင္း သေဘာပဲျဖစ္ပါတယ္။ ဝက္ဆိုက္တစ္ခုရဲ႕ Heigh, Width ေတြကိုအျပင္ Category ထားသုိတာက အစ drop down ပံုစံျဖစ္ေအာင္ အလိုေလ်ာက္ ဖန္တီးေပးမွာျဖစ္ပါတယ္။ ဒါေၾကာင့္မို႔ ၂၀၁၂ ခုႏွစ္ကေနစလို႔ ျမန္မာျပည္မွာ ဝက္ဆိုက္ Design ေတြ ေရးသားၾကတဲ့အခါ သုိ႔တည္းမဟုတ္ ႏိုင္ငံတကာ Web Design ေစ်းကြက္ ကေန ဝယ္ယူတဲ့အခါ Responsive ျဖစ္လား မျဖစ္လားဆုိတဲ့ issue အေပၚ မွာ ဂရုစိုက္လာၾကပါတယ္။

<Configuration>
Configuration အေနနဲ႔ကလည္း အေရးၾကီးပါတယ္။ Google Webmaster ကို xml sumit လုပ္ရတာေတြ၊ Analytic ခ်ိတ္ရတာေတြလုပ္ရပါေသးတယ္။ အဓိကကေတာ့ မိမိရဲ႕ ဝက္ဆိုက္ဟာ မုိဘိုင္းဖုန္းအတြက္ ရယ္ဒီျဖစ္ေၾကာင္း ကို သတင္းေပးျခင္းတစ္မ်ိဳးလည္း ျဖစ္ပါတယ္။ ဒါဆုိရင္ Google က ပုိျပီးေတာ့ မိမိရဲ႕ ဝက္ဘ္ဆိုဒ္ကို ပိုျပီးေတာ့ favor ေပးပါတယ္။ Google Search မွာ ေပၚတာ ထိပ္ဆံုးေရာက္ရင္လည္း မိမိရဲ႕ဝက္ဘ္ဆိုက္ကို လူလည္ႏႈန္း ပိုမုိရရွိေအာင္ျမင္ေစမွာျဖစ္ပါတယ္။ ဒါ့အျပင္ ဆိုဒ္ေပၚမွာ code error မရွိရင္၊ ဓာတ္ပံုမ်ား အခ်ိဳးက်ျဖစ္ရန္၊ content မ်ားကို ေဖာ္ျပမႈ မွန္ကန္ရန္၊ url redirect လုပ္မႈ မွန္ကန္ရန္ အစရွိသျဖင့္ ျပဳလုပ္ရပါ ေသးတယ္။ ယင္းတို႔ကို မိမိတို႔ ျပဳလုပ္ရန္ မတတ္ႏုိ္င္ရင္ Web Development ဝန္ေဆာင္မႈေပးတဲ့ကုမၸဏီမ်ားကို ငွားရမ္းေဆာင္ရြက္ ႏိုင္ပါတယ္။

<မိုဘိုင္း App လုပ္မလား Website လုပ္မလား>
Mobile App ပဲလုပ္မလား Mobile ေပၚမွာ ၾကည့္လို႔ရတဲ့ ဝက္ဆိုက္လုပ္မလား ဒါမွမဟုတ္ ႏွစ္ခုစလံုး လုပ္မလား ဆိုတာကလည္း အမ်ားစုစဥ္းစားစရာ ျဖစ္တဲ့ issue တစ္ခုလည္း ျဖစ္ပါတယ္။ Mobile App မ်ားရဲ႕ ကြဲျပားမႈကိုလည္း ေနာက္မွ ျပန္လည္ေရးသားေဖာ္ျပပါမယ္။ Mobile App က install လုပ္ထား ရတာျဖစ္တာေၾကာင့္ browser ကေန ဝင္ရိုက္ရွာစရာမလိုေတာ့ဘဲ App ကေန content update ေတြကို ယူလို႔ရမယ့္ နည္းပညာ ျဖစ္ပါတယ္။ ဒါေပမယ့္ စီးပြားေရးလုပ္ငန္းတစ္ခုအေနနဲ႔ Customer နဲ႔ တိုက္ရိုက္ ထိေတြ႔ ရန္လိုအပ္မွုရွိမရွိ Customer ေတြကို ေန႔စဥ္ သတင္းအခ်က္အလက္မ်ား ေပးရန္ ရွိမရွိေပၚမွာလည္း မူတည္ျပီးေတာ့ App ကို စဥ္းစားျပဳလုပ္သင့္ ပါတယ္။ App ကိုလည္း သီးျခား platform တစ္ခုအေနနဲ႔ လုပ္မွာလား သို႔မဟုတ္ Web App လုပ္မလား ဆုိတာကလည္း စဥ္းစားစရာပါ။ သတင္း မီဒီယာမ်ားအေနနဲ႔ကေတာ့ ဝက္ဆိုက္နဲ႔တင္ ရပ္ေနလို႔ မရဘဲ mobile app ဘာ ထုတ္သင့္တယ္ဆုိတာ ေသခ်ာတဲ့ အေျဖတစ္ခုပဲ ျဖစ္ပါတယ္။ အေၾကာင္းကေတာ့ ျမန္မာျပည္က mobile user မ်ားဟာ သတင္း အခ်က္အလက္ ေတြကို browser ကေန ရွာရတာထက္ လြယ္ကူတဲ့ အျခား နည္းလမ္းေတြကို ပိုလိုခ်င္ၾကလို႔ ျဖစ္ပါတယ္။ ဒါေၾကာင့္မု႔ိ mobile phone ဆိုင္ေတြမွာ သူတို႔လိုခ်င္တဲ့ App ေတြကို သြားသြားထည့္ခိုင္းတဲ့ ေခတ္က လည္း အေတာ္ေလးရွိေနပါေသးတယ္။

App အတြက္ သီးသန္႔ Business model တစ္ခု၊ Web အတြက္ သီးသန္႔ Business model တစ္ခုနဲ႔ သြားရ မွာပါ။ Channel ႏွစ္ခုစီကေန income ကို generate လုပ္ဖု႔ိ စိတ္ကူးရွိရင္ ေတာ့ App ကရွိသင့္ပါတယ္။ အကယ္၍ အတူတူပဲ။ သု႔ိတည္းမဟုတ္ user မ်ားက မိမိ App ကို တကူးတက သြင္းရ ေအာင္ အျမဲတမ္း content update ရွိမွာ မဟုတ္ဘူးဆုိရင္ေတာ့ Mobile ဖုန္းအတြက္ အဆင္ေျပေအာင္ လုပ္ထားတဲ့ ဝက္ဘ္ဆိုဒ္က အဆင္ေျပ လံုေလာက္ ပါျပီ။ အကယ္၍ Mobile App ရွိလာျပီဆုိရင္ေတာ့ user ကို website ကေန mobile app download ဆြဲရန္အထိ ကိုယ္ဟာ ၾကိဳးစားယူ ရမွာ ျဖစ္ပါတယ္။ ဥပမာ mobile browser ကေန ဝင္လိုက္တဲ့အခါ Mobile App ကို download ဆြဲရန္အၾကံေပးတဲ့ pop up သုိ႔မဟုတ္ အေပၚက bar ေလး ေပၚလာတာမ်ိဳးတို႔ ျဖစ္ပါတယ္။ Mobile App ရဲ႕ အားသာခ်က္က အင္တာနက္ဖြင့္ရန္ update ေတြကိုပုိ႔ေပးလို႔ ဖုန္းမွာ notification ေပၚသလို အကယ္၍ offline လည္း သံုးလို႔ရမယ့္ app မ်ိဳး ဖန္တီးထားရင္ေတာ့ push notification ေပးတာမ်ိဳးတို႔ ရရိွမွာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္မို႔ User နဲ႔ one to one ခ်ိတ္ဆက္လို႔ ရတဲ့အေနအထားျဖစ္ပါတယ္။ ယင္းအေၾကာင္းအရာကို Mobile App မ်ားအေၾကာင္း ေရးသားတဲ့အခါမွပဲ ေသခ်ာ ရွင္းလင္းေဖာ္ျပ ပါ့မယ္။ မိမိရဲ႕ စီးပြားေရးလုပ္ငန္းရဲ႕ ဝက္ဘ္ဆိုက္မ်ားေခတ္ေနာက္မက်ရ ေလေအာင္ မုိဘိုင္းဖုန္းေပၚမွာ အဆင္ေျပတဲ့ Websiteျဖစ္ေရး အၾကံေပး တိုက္တြန္းေရးသားလိုက္ရပါတယ္။

ေအာင္ခမ္း(႐ိုးရာေလး)
Mobile Guide Journal (Every Monday)
https://www.facebook.com/officialmobileguidejournal

<<< ေအာက္မွာ Click တစ္ခ်က္ေလာက္ႏွိပ္ေပးျခင္းအားျဖင့္ တစ္ဖက္တစ္လမ္းကကူညီရာေရာက္ပါတယ္။ >>>  


www.pyaephyo.com

Read More ...

မိမိ ဘေလာ့ Template ေတြမွာပါလာတဲ့ credit link ေတြကိုအစားထိုးဖ်က္နည္း

ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္။ မိမိ ဘေလာ့ Template ေတြရဲ႕ေအာက္ေၿခနားမွာ Copyright & Designed by ေတြမွာ တၿခား လူ နာမည္ေတြနဲ႕ပါလာတက္ၾကပါတယ္..။ မိမိ မလိုခ်င္တဲ့ credit link အေရွ႕မွာ <div style="visibility:hidden"> ကုဒ္ကို အစားထိုးၿပီး </div> ကုဒ္ ေအာက္မွာ </div> ကုဒ္ကိုထည့္ၿပီး Save Template ကိုႏိုပ္ၿပီးတာနဲ႕ <div style="visibility:hidden"> ယခုေဖာ္ၿပထားတဲ့ ကုဒ္ေရွ့မွာ မိမိ ေရးလိုတဲ့ စာသားမ်ား ေရးနိုင္ပါၿပီ။ အသံုးနည္းကေတာ့ လြယ္ကူပါတယ္

လိုအပ္ရင္ေတာ့ ေအာက္မွာဆက္ေလ့လာနိုင္ပါတယ္။

ပထမဆုံး Blogger Dashboard ကေန > Edit HTML ကိုကလစ္နိုပ္ပါ။

{Ctrl+f} (သို႕) F3 အကူညီျဖင့္ Designed by ကုဒ္ကို ရွာလိုက္ပါ။

 ေတြ႕ျပီဆိုရင္ Designed by ရဲ႕အေရွ့မွာ ကပ္ၿပီး <div style="visibility:hidden"> ဒီကုဒ္ ကိုထည့္ပါ ၿပီးရင္ </div> ကုဒ္ ေအာက္မွာ </div> ကုဒ္ထည့္ၿပီး Save Template ကိုႏိုပ္ပါ။ မိမိ လိုခ်င္တဲ့ နာမည္ေတြကို <div style="visibility:hidden"> ယခုေဖာ္ၿပထားတဲ့ ကုဒ္ေရွ့မွာ ထိုးနိုင္ပါၿပီ။

နည္းလမ္း ( ၂ )
==========
နဂိုရွိၿပီးသား credit link ေတြကို အကုန္ဖ်က္ၿပီးေတာ့ အစားထိုး နည္းပါ။

<div style="visibility:hidden">  Designed by <a href="http://www.templateism.com"> id="mycontent"> Templateism.com </a></div> ကိုထည့္ပါ ၿပီးရင္ </div> ကုဒ္ ေအာက္မွာ </div> ကုဒ္ထည့္ၿပီး Save Template ကိုႏိုပ္ၿပီးတာနဲ႕ မိမိလိုခ်င္တဲ့ စာသားရဖို႕
<div style="visibility:hidden"> ဒီကုဒ္ ေရွ့ကေန မိမိလိုခ်င္တဲ့ စာသားေတြကို ေရးနိုင္မွာပါ

Template credit link ေတြကိုအစားထိုးဖ်က္နည္း
===========================================

အဆင္ေၿပပါေစ

  www.ayekyaw.org

<<< ေအာက္မွာ Click တစ္ခ်က္ေလာက္ႏွိပ္ေပးျခင္းအားျဖင့္ တစ္ဖက္တစ္လမ္းကကူညီရာေရာက္ပါတယ္။ >>>  

**  Step-1.ေအာက္က Download Button ကိုႏွိပ္လိုက္ပါ

**  Step-2. "5sec". ေလာက္ေစာင္႕ေပးပါ။

**  Step-3. "  << SKIP AD >>   ".ကိုႏွိပ္ေပးပါ။

**  Step-4. Download Link က်လာပါလိမ္႕မယ္။

**  အဆင္ေျပပါေစဗ်ာ။

   Download

www.pyaephyo.com

Read More ...

ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၃ )

ဒီေန႕ေတာ့ ဘေလာ့ post ေတြ မ်ားမ်ား တင္ေပးမလို႕ အစီစဥ္ရွိပါတယ္..။ ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ ဒီ စလုိက္တာ ပံုစံေလးက အရမ္းလွပၿပီး ရိုးရွင္းပါတယ္ အသစ္ထြက္ထားတာ မၾကာေသးပါ..။ မိမိ ဘေလာ့ ေတြမွာ မိမိ ညႊန္ျပလိုတဲ့ Image Slider ဒီဇိုင္းလွလွ ေလးေတြနဲ႕ ညြန္ၿပလို႕ရမွာၿဖစ္ပါတယ္။ အသံုးၿပဳနည္းကေတာ့ လြယ္ကူေစပါတယ္ ေလ့လာၾကည့္နိုင္ပါတယ္..။

နမူနာကိုၾကည့္ပါ

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript (below header)
4. Paste code inside it,

>>> ၿပဳလုပ္နည္း

1. Blogger Dashboard ကေန > Layout ကိုကလစ္နိုပ္ပါ > Add a Gadget ကိုကလစ္နုိပ္လုိက္ပါ 2. HTML/Javascript ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာ 3. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ  ျပီးတာနဲ႕ save လုပ္ေပးလိုက္ပါ...။

ဒါဆိုအဆင္ေျပပါၿပီ

 

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiou1J_0k1X0gM2npKqmUNDAkT_Md7Q9thkJo1upGlbfc-AYYUOQKVkZGOsMybNZtfmJP8IX1-bQNTY-16f7oj-LwRKIIHVgddG0-jG9yqwWAounoOxqSnbArX6-iw7eaxkgfHSryAdio/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuO50lqmHChe5hx3_b2lVgjNH_VLPM-zx6h9l6oMo5rpw8xevXcNk-liMS87CXKRflLab0bN8Y6fAQMzoO05Kpt6qnNYYqYZweb3gdaHqonKr0y_BASiryAX98I3G80Aqe18cxr4m0UlQ/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUDWB5ANZdaSjz2MOFcC-RMo5wxiKQKs4PiukIP9r3EowpCl3bZDvBmQBpWvVjSlu66PDAiZJnTBoxrid-PYfHZQRmuX8ig3wN5gksyNC4379z_KCMUhcNRbdyzcZWFZgwAnn-G3fHEE/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://helperblogger.ucoz.com/demo/js-slider/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div> 

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg

အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။

မွတ္ခ်က္ ။ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

  www.ayekyaw.org

<<< ေအာက္မွာ Click တစ္ခ်က္ေလာက္ႏွိပ္ေပးျခင္းအားျဖင့္ တစ္ဖက္တစ္လမ္းကကူညီရာေရာက္ပါတယ္။ >>>  

**  Step-1.ေအာက္က Download Button ကိုႏွိပ္လိုက္ပါ

**  Step-2. "5sec". ေလာက္ေစာင္႕ေပးပါ။

**  Step-3. "  << SKIP AD >>   ".ကိုႏွိပ္ေပးပါ။

**  Step-4. Download Link က်လာပါလိမ္႕မယ္။

**  အဆင္ေျပပါေစဗ်ာ။

   Download

www.pyaephyo.com

Read More ...

ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၂ )

ဒီေန႕ေတာ့ ဘေလာ့ post ေတြ မ်ားမ်ား တင္ေပးမလို႕ အစီစဥ္ရွိပါတယ္..။ ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ ဒီ စလုိက္တာ ပံုစံေလးက အရမ္းလွပၿပီး ရိုးရွင္းပါတယ္ အသစ္ထြက္ထားတာ မၾကာေသးပါ..။ မိမိ ဘေလာ့ ေတြမွာ မိမိ ညႊန္ျပလိုတဲ့ Image Slider ဒီဇိုင္းလွလွ ေလးေတြနဲ႕ ညြန္ၿပလို႕ရမွာၿဖစ္ပါတယ္။ အသံုးၿပဳနည္းကေတာ့ လြယ္ကူေစပါတယ္ ေလ့လာၾကည့္နိုင္ပါတယ္..။

နမူနာကိုၾကည့္ပါ

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript 
3. Copy the code below and paste on it. 

>>> ၿပဳလုပ္နည္း

1. Blogger Dashboard ကေန > Layout ကိုကလစ္နိုပ္ပါ > Add a Gadget ကိုကလစ္နုိပ္လုိက္ပါ 2. HTML/Javascript ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာ 3. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ  ျပီးတာနဲ႕ save လုပ္လိုက္ပါ...။

ဒါဆိုအဆင္ေျပပါၿပီ

 

<style type="text/css">
/* http://dimpost.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
        
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpG-yczmI0T9Lb_MJSi-RWBhgiVnjJrT77nJZ8bQtfX3GPzxMmhpL6iY40_MWIRCN7e1Mr1K_-FvQiaRz797mWquDEbpLlMBQpqpIo_f9fxy5QSZEoEp20D7FntI6Hw0eQS8zrA11KxAF/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px; 
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb6gu3R03C0D5kWL5REyraLU8viLHbWaQyMtXls2MDE8auD5gCN0UqjBOGx0HTsCAqC3-1gxcLsSgRTCUCZ8LmGX0Ud3-m3jtxlv9B_LAgd9hW9zuoslktioDs0cNWXNnCV49xBKKL9JkU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider 
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-vi8YyxKpYLhk3G__ptzUrabdEY5YzGTLMcaHnIkWbR1MN3DCAhwqu8eQz8S8cLxK4iP88W3drTwOacx_w7YnJHQQbphwa4kyD_87QSAKNpaBGXDg9iQgS4A9BkT_omKx-w_TLQtGPff8/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjagE3SoxW8wg4XzI_7dnPJgAwXtHo0DuOkvgA0kxyi4pUe8Q9_-CNCqZ0VtZ35dlbBqdajRAkIYDs4Fy6KfvIVs0MFRriKV38g5WoYWxpskE2QzHGglK_6LRywb4OBChUt7cNFZ9jQb8oa/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHAadvSkHgPQbvk-Sso280UGFAA4MJWzbgu2QGCR4brmv6lmq8A-m-JxgkKARzq741J4xVp0NzzNxZCzetjiIXGIOYaSe-3f6mOAzklMyOUkWCfKr_sXXkW4SGoDJ1SK_txelQYuqlrOi/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfYTmBmtjVobaNh4go9VprIVtgVR7osAwcMKMXx4v_fH6gqIZe03lqzz_P-FQDgbKu7s7mo_x3zk_6Qnhn-Kg3hhyphenhypheneQWb2Qh08ZeITQsOHoRya2viyMWVuVaPLU0JQRBXM4S-DWdP24kd/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj992hJN2wqycVlaDou0banwm7mz_gIgH_QhufxBsEDJau3dDOCQJNvsw-_tUGpf02FYEzz5-B8VcdK758Ih-mmBCjUT3RR3qN2t2SLCOjMuhOYVXUbogAYdbj8dEi3E4Ed7u8sK8HICxOw/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg

အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။

မွတ္ခ်က္ ။ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

  www.ayekyaw.org

<<< ေအာက္မွာ Click တစ္ခ်က္ေလာက္ႏွိပ္ေပးျခင္းအားျဖင့္ တစ္ဖက္တစ္လမ္းကကူညီရာေရာက္ပါတယ္။ >>>  

**  Step-1.ေအာက္က Download Button ကိုႏွိပ္လိုက္ပါ

**  Step-2. "5sec". ေလာက္ေစာင္႕ေပးပါ။

**  Step-3. "  << SKIP AD >>   ".ကိုႏွိပ္ေပးပါ။

**  Step-4. Download Link က်လာပါလိမ္႕မယ္။

**  အဆင္ေျပပါေစဗ်ာ။

   Download

www.pyaephyo.com

Read More ...

ဘေလာ့မွာ ဒီဇိုင္းလွလွေလး Image Slider ၿပဳလုပ္နည္း ( ၁ )

ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ ဒီ စလုိက္တာ ပံုစံေလးက အရမ္းလွပါတယ္ အသစ္ထြက္ထားတာ မၾကာေသးပါ..။ မိမိ ဘေလာ့ ေတြမွာ မိမိ ညႊန္ျပလိုတဲ့ Image Slider ဒီဇိုင္းလွလွ ေလးေတြနဲ႕ ညြန္ၿပလို႕ရမွာၿဖစ္ပါတယ္။ အသံုးၿပဳနည္းကေတာ့ လြယ္ကူေစပါတယ္ ေလ့လာၾကည့္နိုင္ပါတယ္..။

နမူနာကိုၾကည့္ပါ

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript 
3. Copy the code below and paste on it. 

>>> ၿပဳလုပ္နည္း

1. Blogger Dashboard ကေန > Layout ကိုကလစ္နိုပ္ပါ > Add a Gadget ကိုကလစ္နုိပ္လုိက္ပါ 2. HTML/Javascript ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာ 3. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ  ျပီးတာနဲ႕ save လုပ္လိုက္ပါ...။

ဒါဆိုအဆင္ေျပပါၿပီ

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
  <li><a href="http://dimpost.com">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh3S9iKRbZlmD2CR7taRwgHr5wKeLK3gM2G5rkWbKSLvchtqWRHZR8cf_4i4krOg61gRiOwDvh9a7jryVOVMIfpl8wf86xX_LU0yt301whfE_3vneQSu1kavPhUEMYUPySErEovccDuKRE/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-VehJ9xG3EdBaN2jih84eMsrT-azcT0q0Ifn6HbVEAK2VXZYRPOXarEH01MTAxjR5JFvqUsbE5wod-KkwtYvYuElCSLy4CUis4Melor8he4LNaEtqcrEMeEN0ejBLwPBkSBydwY5jyHv/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizs8G4_rRA9-1SFBIYq2tFSWqP7Wkal76eyoi7cuDJwHdQyir6136snGns5w6wpIeSLvtJnf5L7oN-4zr2PAQMFTH5rRKHU7TojipxnUPSqBe72myNCgJcAmBFqRCeeWOcn0XHnmIy-QGF/s550/sample3.jpg" title="True Nature"/>
  </a>Tree in field with blue sky.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQrKKWPBoAg8NxKHxFsVkEoCa0GJ3iuJ_o8lROtD25VS75YCWFNdFiEnoHN7CaKWtaS4JqlehXzBbm2GVvULxdnEC164gYA8IjGq9iZjVVHeLcnIZ8ZRfKY1gx04BEDsiM3IoyHNtOOi7/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qqv3OPul3CbOtkBUvhNwb1DToxfrl8vOY73aaypHDVWz2OES4FDWHflOHLKUebruAyQMcv6DlUq6ZL-H1xituTbOdW04aRALJRufGNPqBuMbL_VRGwNAVagb9KxQn4FYMF6gOndQ_VNw/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDJTsV7rOneWAExG6ekGfFUXp2BY_rcQueyOej19BjS1zc4XVhOjCKIQEt1Ldgi4J0Yadruz0yMOBiEVMP-gjdrdWXRJt5N0hdxIEfX4G7oPimVNVMLxOFsELxGg-feGwruFn5FDgMBNS/s550/sample6.jpg" title="Sunshine"/>
  </a></li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdqaha2NokVy65E6z4-hI95QF82ao8svUso3yQQsyx_cr2u3fj6gHz3ZYYsdv17LZf0XwDz8gvkQUhDI4TiOn1UbYmVfwf3l150rS25BToDwqRP6O4RTcnyLxj-98un_epmMqT55DKjvoS/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXgOTY5bwOwIDgSb2w5kCl7qq5tPX6Bxx7UcqsAMnV9X0yuJnj1indgSBaKCeoUm0GO0O-BGVgA_65cRqosWNT1bhc_LEDAcv5LtX2-wJwO_n5aBfS9xcuMcsVAU-T4-2GqUxs6JthjuMU/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy43iBh1Vpq4tzadH5dgYgky8G_AoQsb3YRhGWgPbEAJmA66SysMz8AwJvqzx9MOK3vYxARWKuEyLQ13iv4BDnL7QVKgqH7sFqUMSnB14kQGePk0eJ9VpK6knS-pq7SUat5TffaaSLGks4/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCbp31PlFhELpZ74-2g-MojdKG7hc52zt3zaaiECy4Nj3jmEmjD_q4Xx7OEYT5ow_GenqabeCk37iwH0FYw38JhfgoEjYKi7moRKufuI2bEYDxwwaKH4T9ngR9sHJHx9FKxUouCf0ze0l/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW_ZSbTsc6a7uE3oMyH4ZsrSTDVkD2OilYjJfZrKXSh7WrkQ35duQODmjjwqnLKsrrgZnUeAl1uzM33G6xxCEC9zWUb1icTvYfKPjVWODwMM4Z5leUGVCfIcaS0zys4YBv6Xmr4F2doC5d/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk3Lk8Gui5tbNVoBOn6UnFI8W_JA6oyaDwRQZurde4QOzb-b1_RmvPVtEu0q-Z9zhHinPZmkf8C8WqijLsbugR4u9hhWGh8Gzv5gTi4mGe-9eSyMOCsNg-t6N_VSUwnmwssXrc01pjnfO4/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

http://1.bp.blogspot.com/-mLI/UUI/AAB4k/j6RY/s550/sample1.jpg

အေပၚက အနီေရာင္ေလးနဲ႕ ၿပေပးထားတဲ့ စာတမ္းမွာ မိမိ ၾကိဳက္ႏွစ္သက္တဲ့ ဓါက္ပံု လင့္ ကိုေၿပာင္းနိုင္ပါတယ္..။

မွတ္ခ်က္ ။ ကုဒ္ေတြထဲက # ေနရာမိမိညြန္လိုတဲ့လင့္ကိုထည့္ပါ။

  www.ayekyaw.org

<<< ေအာက္မွာ Click တစ္ခ်က္ေလာက္ႏွိပ္ေပးျခင္းအားျဖင့္ တစ္ဖက္တစ္လမ္းကကူညီရာေရာက္ပါတယ္။ >>>  

**  Step-1.ေအာက္က Download Button ကိုႏွိပ္လိုက္ပါ

**  Step-2. "5sec". ေလာက္ေစာင္႕ေပးပါ။

**  Step-3. "  << SKIP AD >>   ".ကိုႏွိပ္ေပးပါ။

**  Step-4. Download Link က်လာပါလိမ္႕မယ္။

**  အဆင္ေျပပါေစဗ်ာ။

   Download

www.pyaephyo.com

Read More ...

မိမိ ဘေလာ့မွာ facebook comment အလြယ္တကူ ထည့္နည္း

ဘေလာ့ နည္းပညာ အခုမွ စေလ့လာလိုက္စားေနၾကတဲ့ ကြ်န္ေတာ္တို႕ရဲ႕ ဘာေလာ့ ညီကိုေမာင္ႏွမ မ်ားအတြက္ၿဖစ္ပါတယ္..။ မိမိ ဘေလာ့မွာ facebook comment အလြယ္တကူ ထည့္နည္းေလးကို တင္ၿပသြားခ်င္ပါတယ္..။ ဘေလာ့မွာ facebook comment ထည့္နည္းေတြကေတာ့ အမ်ားၾကီးရွိၾကမွာပါ ဒါေပမယ့္ ထည့္နည္းေတြက ခက္ေဟာင္းက ဟာေတြ မ်ားပါတယ္ အဆင္မေၿပၾကတာေတြ႕ရပါတယ္.. ယခု ကြ်န္ေတာ္ တင္ၿပမယ့္ဟာကေတာ့ လြယ္ကူေစၿပီးေတာ့ 100% အဆင္ေၿပေစမွာပါ..။

ပထမဆုံးအေနနဲ႕Comments စလုပ္ဖို႕အတြက္(ဒီေနရာေလး)ကိုသြားလိုက္ပါ။

 ေအာက္မွာေဖာ္ၿပထားတဲ့ပုံတိုင္း Comments ကို ဆက္ၿပီးလုပ္ေဆာင္သြားပါ။

Url to comment on အထဲမွာ မိမိ ဘေလာ့လိပ္စာ (သို႕) မိမိရဲ႕ https://www.facebook.com/page XXXXX အဆင္ေၿပေစမယ့္ ဟာကိုေရြးထည့္ပါ။ width မွာေတာ့ (600) ထည့္ေပးပါ။ Number of Posts (10) ထည့္ေပးပါ။

ေနာက္တဆင့္အေနနဲ႕ ကုဒ္ကိုယူရန္ အေပၚပုံက Get Code ဆိုတာကလစ္ရမွာၿဖစ္ပါတယ္။

 အေပၚပုံေလးက်လာမယ့္ နံပါတ္ (၁) ကုဒ္ေတြကို ေကာ္ပီယူရမွာၿဖစ္ပါတယ္။

အေပၚပုံေလးက်လာမယ့္ နံပါတ္ (၁) ကုဒ္ေတြကို ေကာ္ပီယူလာၿပီး Convert , Html5 ကုဒ္ေၿပာင္းရမွာၿဖစ္တဲ့ အတြက္ (ဒီေနရာေလး) မွာ Html5 ကုဒ္ Convert ေၿပာင္းလိုက္ပါ။

HTML ကေန Convert ေၿပာင္းၿပီးေတာ့ ယူရမွာၿဖစ္ပါတယ္။

Convert ေၿပာင္းၿပီးလို႕ ရလာတဲ့ Code ကို ေကာ္ပီ ကူးၿပီးေတာ့ ...

1. Blogger dashboard ကိုသြားလိုက္ပါ။
2. template ကိုကလစ္နိုပ္ပါ > edit html ကို၀င္ပါ။
3. {Ctrl+f} (သို႕) F3 အကူညီျဖင့္ </body> ကုဒ္ကို ရွာလိုက္ပါ။
4.  ေတြ႕ျပီဆိုရင္ </body> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေကာ္ပီကူးလာတဲ့ ကုဒ္ မ်ားကူးထဲ့ျပီး Save Template ကိုႏိုပ္ပါ။

1. ေနာက္ထက္ {Ctrl+f} (သို႕) F3 အကူညီျဖင့္ <b:include data='post' name='post'/> ကုဒ္ကို ရွာလိုက္ပါ။
2. ေတြ႕ျပီဆိုရင္ <b:include data='post' name='post'/> ရဲ႕ေအာက္မွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template ကိုႏိုပ္ပါ။

<b:if cond='data:blog.pageType == "item"'>
                 &lt;div
                     class=&quot;fb-comments&quot;
                     data-href=&quot;<data:post.url/>&quot;
                     data-width=&quot;590&quot;
                     data-num-posts=&quot;100&quot;&gt;
                 &lt;/div&gt;
            </b:if>

 မိတ္ေဆြ ရဲ ဘာေလာ့ ထဲမွာ ဝင္ၾကည့္လိုက္ပါ facebook comment ေတြ႕ရပါလိမ္႕မယ္။

အားလံုးကို ေက်းဇူးတင္ပါတယ္။

ဘေလာ့မွာ facebook comment အလြယ္တကူ ထည့္နည္း
=======================

   www.ayekyaw.org

<<< ေအာက္မွာ Click တစ္ခ်က္ေလာက္ႏွိပ္ေပးျခင္းအားျဖင့္ တစ္ဖက္တစ္လမ္းကကူညီရာေရာက္ပါတယ္။ >>>  

**  Step-1.ေအာက္က Download Button ကိုႏွိပ္လိုက္ပါ

**  Step-2. "5sec". ေလာက္ေစာင္႕ေပးပါ။

**  Step-3. "  << SKIP AD >>   ".ကိုႏွိပ္ေပးပါ။

**  Step-4. Download Link က်လာပါလိမ္႕မယ္။

**  အဆင္ေျပပါေစဗ်ာ။

   Download

www.pyaephyo.com

Read More ...