How to blog: 2008

Yahoo Pipe ျဖင့္ Blog list တစ္ခု ဖန္တီးျခင္း

Acknowledgement :

တစ္ေန႔က မ်က္လံုးနဲ႔ လက္ဘက္ရည္ဆိုင္ ထိုင္ၾကရင္း ဘေလာ့ဂ္အေၾကာင္း ေျပာၾကရင္းနဲ႔က Blog List အေၾကာင္း ေရာက္သြားခဲ့တယ္။ က်ေနာ္ Blogger ရဲ႕ Blog List လုပ္ရတာ သိပ္ဘဝင္မက်တဲ့အေၾကာင္း ေျပာျပေတာ့ မ်က္လံုးက Blog List ကို စိတ္တိုင္းက် လုပ္ခ်င္သလို လုပ္လုိ႔ရေၾကာင္း နည္းလမ္း ဖတ္ဖူးေၾကာင္း ေျပာေတာ့ က်ေနာ္ အရမ္း ဝမ္းသာသြားတယ္။ ဒါနဲ႔ သူ႔ကို ေမးၾကည့္ေတာ့ အတိအက်ေတာ့ သူလည္း ေမ့ေနၿပီ။ WeSheMe ေရးထားတာကို DeGoLar က ျပန္ၫႊန္းေရးထားတာေတာ့ မွတ္မိတယ္လို႔ ေျပာပါတယ္။ WeSheMe ေရးထားတာေတာ့ ၾကာၿပီ။ DeGoLar ေရးထားတာေတာ့ ႏွစ္လေလာက္ပဲ ရွိေသးတယ္တဲ့။ ဒါနဲ႔ က်ေနာ္လည္း အိမ္ျပန္ေရာက္တာနဲ႔ DeGoLar ရဲ႕ ဘေလာ့ဂ္ကို ေျပးၿပီး အဲဒီပို႔စ္ကို ရွာဖတ္ပါေတာ့တယ္။ သူ႔ပို႔စ္မွာ အတိအက် ရွင္းမျပထားတာေၾကာင့္ သူျပန္ၫႊန္းထားတဲ့ WeSheMe ရဲ႕ ပို႔စ္ကို ထပ္ေျပးဖတ္လိုက္မိတယ္။ က်ေနာ္ စမ္းၾကည့္လိုက္ေတာ့ အေတာ္ေလး အဆင္ေျပၿပီး လုပ္ခ်င္သလို လုပ္လို႔ရတာ ေတြ႕ရေတာ့ အေတာ္ေလး ဝမ္းသာသြားတယ္။ ဒါေပမယ့္ ဘာလို႔ ဘေလာ့ဂ္ေတြမွာ မေတြ႕ရတာလဲလို႔ ျပန္ေတြးမိၿပီး လုပ္နည္း ျပန္တင္လိုက္ဦးမယ္လို႔ စိတ္ကူးလိုက္မိတယ္။ ဒီပို႔စ္ျဖစ္ေျမာက္ဖို႔ အဓိက WeSheMe နဲ႔ DeGoLar ကို ေက်းဇူးတင္သလိုပဲ ၫႊန္ျပေပးတဲ့ သယ္ရင္း မ်က္လံုးကိုလည္း အထူးအထူး ေက်းဇူးတင္ေၾကာင္း .....

Yahoo Pipe ရဲ႕ အားသာခ်က္က က်ေနာ္တို႔ ထည့္ခ်င္သေလာက္ Feed အေရအတြက္ ထည့္လို႔ရပါတယ္။ ေနာက္ၿပီး တစ္ဘေလာ့ဂ္ကို တစ္ပို႔စ္ပဲ ေပၚခ်င္တယ္။ ဒါမွမဟုတ္ ၅ ပို႔စ္ ျပခ်င္တယ္ ဆိုၿပီး ႀကိဳက္သလို စီမံလို႔ရသလိုပဲ၊ ႀကီးစဥ္ငယ္လိုက္လား ငယ္စဥ္ႀကီးလိုက္လား အဆင္ေျပသလို စီလို႔ရတယ္။ ရက္စြဲနဲ႔ စီမလား၊ ေခါင္းစဥ္နဲ႔ စီမလား၊ ဘေလာ့ဂါနာမည္နဲ႔ စီမလား ႀကိဳက္သလို ႀကီးစဥ္ငယ္လိုက္ စီလို႔ ရသဗ်ာ။ ေနာက္ၿပီး Programming အနည္းအက်ဥ္း နားလည္တဲ့သူအတြက္ အေတာ္ေလး ကလိလို႔ေကာင္းေၾကာင္း ေထာက္ခံပါရေစ။ အဓိက ႀကိဳက္တဲ့အခ်က္က Idea ကြန္႔ျမဴးရင္ ကြန္႔ျမဴးသေလာက္ လုပ္ႏိုင္တယ္လို႔ ေျပာရင္း ဘယ္လို လုပ္ရမလဲ ဆိုတာကို စေျပာၾကရေအာင္။

က်ေနာ္ ထံုးစံအတိုင္း ေလ့က်င့္ခန္း တစ္ခုနဲ႔ ရွင္းျပခ်င္ပါတယ္။ မရွင္းျပခင္ သိထားသင့္တာ တခ်ဳိ႕က

အခု ရွင္းျပမယ့္ URL ေတြက Blogspot ကိုပဲ ရည္ၫႊန္းပါတယ္။ Wordpress ဆိုရင္ feed က တစ္မ်ဳိးျဖစ္ႏိုင္ပါတယ္။
အ႐ိုးရွင္းဆံုးနဲ႔ အေျခခံကို ျမင္သာေအာင္ ျပခ်င္တာေၾကာင့္ Function မ်ားမ်ားစားစား မထည့္ေတာ့ပါဘူး။ အေျခခံေလာက္ေပါ႔။ က်န္တာ ကိုယ့္ဖာသာ ဆက္ၿပီး ကလိပါေလ။
Yahoo Pipe ဟာ Flow Chart ဆြဲသလို Diagram ပံုနဲ႔ Program တစ္ပုဒ္ ဖန္တီးျခင္းပါ။ လိုခ်င္တဲ့ Function ကို Drag & Drop ဆြဲယူၿပီး ထည့္ေပးရပါမယ္။
Yahoo Pipe မွာ Diagram ပံုတစ္ပံု ဖန္တီးယူၿပီး အဲဒီ Diagram ရဲ႕ result ကုိ Javascript နဲ႔ Blogger မွာ ယူသံုးပါ႔မယ္။

မရွင္းဘူးလား။ ကိစၥ မရွိပါဘူး။ ေအာက္မွာ ေျပာမယ့္ ေလ့က်င့္ခန္းကို တစ္ဆင့္ခ်င္း လိုက္လုပ္ၾကည့္ပါ။

Yahoo Pipe တြင္ Diagram တစ္ခု တည္ေဆာက္ျခင္း

အရင္ဆံုး Yahoo Pipe ကို ေခၚပါ႔မယ္။ သိပ္ေသခ်ာတာေပါ႔။ က်ေနာ္တို႔ အေကာင့္တစ္ခု လုပ္ရမယ္။ တကယ္လို႔ Yahoo Account ရွိၿပီးသားသူ ဆိုရင္ေတာ့ အဲ့အေကာင့္နဲ႔ ဝင္လိုက္ပါ။ Log In လုပ္ၿပီးၿပီဆိုရင္ အေပၚဆံုး Menu မွာ Create a pipe ဆိုတာ ရွိပါတယ္။ ဝင္လိုက္ပါ။ ဒါဆို Diagram Editor က်လာပါမယ္။ ဘယ္ဘက္အျခမ္းကို ၾကည့္လိုက္ပါ။ Sources ရဲ႕ ေအာက္မွာ အေပါင္းလကၡဏာနဲ႔ အမ်ားႀကီး ေတြ႕ရပါမယ္။ က်ေနာ္ရဲ႕ ေလ့က်င့္ခန္းအရ Fetch Feed ကို ေရြးၿပီး ညဘက္က Editor ထဲ ဆြဲထည့္လိုက္ပါ။ ဒါမွမဟုတ္ အေပါင္းလကၡဏာ ႏွိပ္လိုက္ပါ။ က်န္တာေတြက ဘာလဲလို႔ ေမးလာရင္ ပြင့္ပြင့္လင္းလင္း ေျပာပါ႔မယ္။ က်ေနာ္လည္း မသိေသးပါဘူး။ အိုေက Fetch Feed နာမည္နဲ႔ Box တစ္ခု က်လာၿပီး ေအာက္မွာ + URL ဆိုတာေတြ႕ပါမယ္။ သူ႔ေအာက္မွာေတာ့ အႏုတ္လကၡဏာနဲ႔ ေဘးမွာ Text Box တစ္ခု ရွိပါမယ္။ အဲဒီ Text Box ထဲမွာ URL (Blog Address) ထည့္ေပးရမယ္။ ထည့္ထားတာ ဖ်က္ပစ္ခ်င္ရင္ေတာ့ ေဘးနားက အႏုတ္ကို ႏွိပ္လိုက္ပါ။

URL ထည့္တဲ့ အခါမွာ http://pikay.myanmarbloggers.org ဆိုၿပီး ခပ္ရွင္းရွင္း ထည့္လုိက္လို႔ရပါတယ္။ က်ေနာ္က ဒီ ဥပမာမွာ နည္းနည္းေလး ကြန္ခ်င္တယ္။

ပို႔စ္ေတြကို ျပခ်င္တယ္။ /feeds/posts (တကယ္လို႔ ကြန္းမန္႔ေတြပဲ ျပခ်င္ရင္ /feeds/comments)
နဂို သက္မွတ္ထားတဲ့အတုိင္း ပို႔စ္ကို ျပမယ္။ /default
အဲဒီ ဘေလာ့ကေန ေနာက္ဆံုး ႏွစ္ပို႔စ္ပဲ ျပမယ္။ ? max-results=2

ဒီေတာ့ http://pikay.myanmarbloggers.org/feeds/posts/default? max-results=2 ျဖစ္သြားတယ္။ အဲဒီစာအတိုင္း URL Text Box မွာ ထည့္ေပးပါ။
ေနာက္ ဘေလာ့ဂ္တစ္ခု ထပ္ထည့္ခ်င္ေသးရင္ URL ေဘးက + ကို ႏွိပ္လိုက္ပါ။ အိုေက .. က်ေနာ္ ဒီမွာ လင့္ခ္ ငါးခု ထည့္ထားပါတယ္။

က်ေနာ္ လုပ္ခ်င္တာက ခုနက က်ေနာ္ ထည့္ထားတဲ့ ဘေလာ့ဂ္ ငါးခုေၾကာင့္ ပို႔စ္ ၁၀ ပုဒ္ ရလာမယ္။ အဲဒီ ပို႔စ္ ဆယ္ပုဒ္ကို တင္တဲ့ေန႔ေပၚ မူတည္ၿပီး စီခ်င္တယ္။ ေနာက္ဆံုးတင္ထားတဲ့ ပို႔စ္ကို အရင္ဆံုး ျမင္ခ်င္တယ္။ ဒီေတာ့ Sorting လုပ္ရမယ္။
ဘယ္ဘက္က တတိယ ႀတိဂံတုံးေဘးမွာ Operators ဆိုတာ ျမင္ရမယ္ ထင္တယ္။ ႏွိပ္လိုက္ပါ။ က်လာတဲ့ အထဲက ရွစ္ခုေျမာက္မွာ Sort ရွိပါတယ္။ ကလစ္ဖိၿပီး Editor ထဲ ဆြဲသြင္းလုိက္ပါ။ စာဖတ္သူေတြ သတိထားမိမလား မသိဘူး။ ခုနက ေျပာတဲ့ Fetch Feed ဆိုတဲ့ Box ရဲ႕ ေအာက္ဘက္ အလယ္နားမွာ အလံုးေလး တစ္လံုး ရွိပါတယ္။ အခု ထည့္ထားတဲ့ Sort ဆိုတဲ့ Box ရဲ႕ အေပၚနဲ႔ ေအာက္၊ အလယ္မွာလည္း အလံုးေလး တစ္လံုးစီ ရွိပါတယ္။ Pipe Output ဆိုတာရဲ႕ အေပၚပိုင္း အလယ္မွာလည္း အလံုး တစ္လံုး ရွိပါတယ္။ Fetch Feed, Sort, Pipe Output ဆိုၿပီး အထပ္ေအာက္ စီေပးပါ။ ေနာက္ၿပီး Fetch Feed ေအာက္က အလံုးကို ကလစ္ဖိၿပီး မလြတ္ဘဲ ဆြဲလိုက္ရင္ ပိုက္လိုင္းတစ္လိုင္း ပါလာပါလိမ့္မယ္။ အဲဒီ ပိုက္ကို မလြတ္တမ္း Sort ရဲ႕ အေပၚနားက အလံုးထိ ေရာက္ေအာင္ ဆြဲၿပီးမွ လြတ္လိုက္ပါ။ ဒါဆို Fetch Feed နဲ႔ Sort နဲ႔ ဆက္သြားတာ ေတြ႕လိမ့္မယ္။ အဲဒီလုိပဲ Sort နဲ႔ Pipe Output နဲ႔ ဆက္ေပးပါ။ အဲဒီလို ဆက္ၿပီးတာနဲ႔ Sort Box အထဲမွာ စာေတြ ေပၚလာပါလိမ့္မယ္။ + Sort by ရဲ႕ ေအာက္မွာ အႏုတ္လကၡဏာနဲ႔ Combo Box ရွိပါတယ္။ ေဘးနားက ျမားကို ႏွိပ္ၿပီး item.published ကို ေရြးေပးပါ။ တင္ထားတဲ့ ရက္ကို လိုခ်င္လို႔ပါ။ ေနာက္ၿပီး Order ကို descending ေရြးပါ။ ႀကီးစဥ္ငယ္လုိက္ စီခ်င္လို႔။

အိုေက ဒီေလာက္ ဆိုရင္ ပိုက္ဆက္လို႔ ၿပီးသြားပါၿပီ။ အလုပ္ျဖစ္မျဖစ္ အၾကမ္း သိခ်င္ရင္ ပံုရဲ႕ ေအာက္ဘက္မွာ Refresh ဆိုတာ ရွိတယ္။ ႏွိပ္လိုက္လို႔ ပို႔စ္ေခါင္းစဥ္ေတြ ေပၚလာရင္ အလုပ္ျဖစ္ပါၿပီ။ ဒါဆို ညာဘက္ အေပၚက Save ကို ႏွိပ္လိုက္ပါ။ အဆင္ေျပတဲ့ နာမည္ေပးလိုက္ပါ။ Save ၿပီးသြားရင္ေတာ့ အေပၚဘက္ အလယ္မွာ Run Pipe ဆိုတဲ့ လင့္ခ္ကို ႏွိပ္ၿပီး ရလဒ္ကို ၾကည့္လို႔ရပါတယ္။ ရလဒ္ကို ၾကည့္ၿပီး Pipe ျပင္ခ်င္ေသးတယ္ ဆိုရင္ေတာ့ ဘယ္ဘက္ ေအာက္မွာ Edit Source ဆိုတာ ႏွိပ္ၿပီး ဝင္ျပင္ႏုိင္ပါတယ္။ Browser ရဲ႕ Address Bar ကို ၾကည့္လိုက္ပါ။ http://pipes.yahoo.com နဲ႔ စၿပီး ေနာက္နားမွာ ?_id= ဆိုၿပီး အကၡရာ (၂၂) လံုး ေတြ႕ပါလိမ့္မယ္။ အဲဒါ Diagram ID ပါ။ မွတ္ထားေပးပါ။ အိုေက ... ဒါဆို ဘေလာ့ဂ္ေပၚ ဘယ္လို တင္မလဲဆိုတာ ဆက္ၾကည့္လိုက္ရေအာင္။

Blog တြင္ Yahoo Pipe ထည့္ျခင္း

ပထမဆံုး အေနနဲ႔ Javascript Function ေတြ သံုးဖို႔အတြက္ အရင္ ေၾကျငာေပးရပါမယ္။ Layout >> Edit HTML ကို သြားၿပီး </head> ရဲ႕ အေပၚနားမွာ ေအာက္က စာေၾကာင္း ႏွစ္ေၾကာင္း ထည့္ေပးပါ။

<script src='http://h1.ripway.com/phyoekyaw/FeedPeek.js' type='text/javascript'/>
<script src='http://h1.ripway.com/phyoekyaw/Library.js' type='text/javascript'/>

ေနာက္ၿပီး Layout >> Page Elements မွာ Add a Gadget ကို ႏွိပ္ၿပီး HTML/Javascript ကုိ ေရြးေပးပါ။ ေနာက္ၿပီး ေအာက္က စာေၾကာင္းကို ကူးထည့္ေပးပါ။

<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=Mg4ZUoO13RGkz43cbbsjiw&_render=json&_callback=feedPeek"></script>

မွတ္ခ်က္ .... အနီေရာက္ေနရာမွာ အထက္က မွတ္ခုိင္းထားတဲ့ ကိုယ့္ရဲ႕ Diagram ID ကို ထည့္ေပးပါ။ Save လိုက္ၿပီး Blog ကို ဖြင့္ၾကည့္လိုက္ပါ။ အားလံုး အာသီသ ဆႏၵ အလို ေတာင့္တ ေနတဲ့ Blog List တစ္ခု ရလာပါလိမ့္မယ္။

က်ေနာ္ လုပ္ထားတဲ့ Blog List နမူနာကို ဒီမွာ ကလစ္ႏွိပ္ၿပီး ၾကည့္ၾကည့္ႏိုင္ပါတယ္။ Function တစ္ခုခ်င္းစီ ရွင္းမျပေတာ့တာ က်ေနာ္ မစမ္းၾကည့္ရေသးတာလည္း ပါသလို အဲေလာက္ ရွင္းျပေနစရာ မလိုတဲ့ ဦးေႏွာက္ပိုင္ရွင္ေတြလို႔ ယံုၾကည္ထားလို႔ပါ။ (အဟီး ... မေရးခ်င္ေတာ့တာနဲ႔ ေျမႇာက္ပစ္လိုက္ၿပီ) ကိုယ့္ဖာသာပဲ တစ္ခုခ်င္းစီ အားရပါးရ စမ္းၾကည့္ၾကေပေတာ့လို႔ပဲ အားေပးပါရေစ။

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

[+/-]

Make a Poll using Vizu

www.vizu.com ကေန Poll မဲေပး႐ံု လုပ္မယ္ဆိုရင္ ပထမဆံုး အေနနဲ႔ Register လုပ္ရတယ္။ အဆင့္နည္းနည္း မ်ားေပမယ့္ အေတာ္ေလး အသံုးတည့္ပါတယ္။ မဲ႐ုံ လုပ္ရတာ အဲေလာက္လည္း မခက္ပါဘူး။ သူ႔မွာ ထူးျခားတာေလးေတြ ေဖာ္ျပေပးပါမယ္။ က်ေနာ္ ျမင္ရမယ့္ ပံုစံကို ေအာက္မွာ ျပထားပါတယ္။

Online Surveys & Market Research

၁။ Flash Player နဲ႔ လုပ္ထားတာ ျဖစ္တဲ့အတြက္ ျမင္ရတာ သပ္ရပ္ပါတယ္။ ေနာက္ၿပီး အျမင္ ဆန္းတယ္။

၂။ Flash Player အတြက္ Addon လိုပါလိမ့္မယ္။

၃။ အဓိက အားနည္းခ်က္ကေတာ့ က်ေနာ္တို႔ သံုးေနတဲ့ ZawGyi Font နဲ႔ ေရးလို႔ မရျခင္းပါပဲ။ Flash အျဖစ္ ခ်က္ခ်င္း တန္းေျပာင္းတာ ျဖစ္လို႔ Pollcode.com တုန္းကလို ျပန္ေျပာင္းယူလို႔လည္း မရပါဘူး။

၄။ မဲ႐ံု စမယ့္ရက္နဲ႔ ပိတ္မယ့္ရက္ကို ထည့္ၿပီး သက္မွတ္ေပးလို႔ ရပါတယ္။ သက္မွတ္ရက္ အတြင္းပဲ မဲေပးခြင့္ ရွိရင္ သူ႔အလိုအေလ်ာက္ လုပ္ေပးပါတယ္။

၅။ အေျဖ ေရြးတဲ့ အေရအတြက္ ကို ကန္႔သက္ႏုိင္တယ္။ အေျဖကို တစ္ခုတည္းပဲ ေရြးခြင့္ ေပးမလား၊ ၅ ခု အနည္းဆံုး ေရြးခိုင္းမလား၊ ဆိုတာ အတိအက် သက္မွတ္ေပးလို႔ ရပါတယ္။ တခ်ဳိ႕ Poll Service ေတြက တစ္ခုတည္း ေရြးခိုင္းမလား၊ အမ်ားပဲ ေရြးခိုင္းမလားလို႔ ခပ္ၾကမ္းၾကမ္းပဲ Setting လုပ္လို႔ရတယ္။ ဒီ Vizu မွာေတာ့ အတိအက် ဘယ္ႏွခု အနည္းဆံုး ေရြးရမယ္ ဆိုတဲ့အထိ Setting လုပ္လို႔ ရပါတယ္။

၆။ Vizu မွာ ကိုယ္ပုိင္ အေကာင့္တစ္ခု တည္ေဆာက္ၿပီးမွကို မဲ႐ံု လုပ္ခြင့္ ေပးပါတယ္။

www.vizu.com/index.html မွာ မဲ႐ံု လုပ္ယူလုိ႔ ရပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

ဆက္ႏြယ္ေသာပို႔စ္စာရင္း ထည့္သြင္းျခင္း (By Labels)

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

အရင္က Hoctro ကေန ဆက္ႏြယ္တဲ့ ပို႔စ္စာရင္းကို Label နဲ႔ စစ္ထုတ္ၿပီး ေဖာ္ျပႏုိင္ေအာင္ လုပ္ထားေပးတာ ရွိပါတယ္။ သူ႔ရဲ႕ အားနည္းခ်က္က ဘေလာ့ဂ္တစ္ခု ေျပာင္းတာနဲ႔ လိုက္ေျပာင္းလဲ ေပးရတယ္။ တခ်ဳိ႕ ေနရာေလးေတြ ေပါ႔။ နည္းနည္းပါးပါး ဆုိေပမယ့္ ဘာမွ မသိတဲ့လူအတြက္ေတာ့ အလုပ္႐ႈပ္တာေပါ႔။ အခု JackBook.com က ဘာမွ ျပင္စရာ မလိုဘဲ ကိုယ့္ရဲ႕ တန္းပလိတ္ထဲမွာ တန္းကူးထည့္႐ံုနဲ သံုးလို႔ရတဲ့ Code အျဖစ္ ျပင္ဆင္ထားတာမို႔ အင္မတန္မွ လြယ္ကူသြားပါတယ္။ လုပ္ရမယ့္ အဆင့္အေနနဲ႔လည္း ႏွစ္ဆင့္ပဲ က်န္ေတာ့တယ္။ ကဲ က်ေနာ္တို႔ စၿပီး လုပ္ၾကည့္ရေအာင္။

အဆင့္ (၁)
Layout >> Edit HTML ထဲမွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။
ၿပီးရင္ <data:post.body/> ကို ရွာေပးပါ။ တကယ္လို႔ Peekaboo ပို႔စ္ေခါက္တဲ့ လုပ္ေဆာင္ခ်က္ ထည့္ထားရင္ေတာ့ <data:post.body/> ဆိုတာ ႏွစ္ခု ေတြ႕ပါလိမ့္မယ္။

အဆင့္ (၂)
<data:post.body/> တစ္ခုတည္းပဲ ေတြ႕တယ္ဆိုရင္ အဲဒီစာေၾကာင္းရဲ႕ေအာက္နားမွာ ေအာက္မွာ ျပထားတဲ့ Code ကို ထည့္ေပးလိုက္႐ံုပါပဲ။

<br />
<b:if cond='data:blog.pageType == "item"'><br />
<div class='similiar'><br />
<br />
<br />
<br />
<br />
<br />
<div class='widget-content'><br />
<h3>Related Posts by Categories</h3><br />
<div id='data2007'/><br/><br/><br />
<div id='hoctro'><br />
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u><br />
</div><br />
<script type='text/javascript'><br />
<br />
var homeUrl3 = "<data:blog.homepageUrl/>";<br />
var maxNumberOfPostsPerLabel = 4;<br />
var maxNumberOfLabels = 10;<br />
<br />
maxNumberOfPostsPerLabel = 100;<br />
maxNumberOfLabels = 3;<br />
<br />
<br />
function listEntries10(json) {<br />
var ul = document.createElement('ul');<br />
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?<br />
json.feed.entry.length : maxNumberOfPostsPerLabel;<br />
for (var i = 0; i < maxPosts; i++) {<br />
var entry = json.feed.entry[i];<br />
var alturl;<br />
<br />
for (var k = 0; k < entry.link.length; k++) {<br />
if (entry.link[k].rel == 'alternate') {<br />
alturl = entry.link[k].href;<br />
break;<br />
}<br />
}<br />
var li = document.createElement('li');<br />
var a = document.createElement('a');<br />
a.href = alturl;<br />
<br />
if(a.href!=location.href) {<br />
var txt = document.createTextNode(entry.title.$t);<br />
a.appendChild(txt);<br />
li.appendChild(a);<br />
ul.appendChild(li);<br />
}<br />
}<br />
for (var l = 0; l < json.feed.link.length; l++) {<br />
if (json.feed.link[l].rel == 'alternate') {<br />
var raw = json.feed.link[l].href;<br />
var label = raw.substr(homeUrl3.length+13);<br />
var k;<br />
for (k=0; k<20; k++) label = label.replace("%20", " ");<br />
var txt = document.createTextNode(label);<br />
var h = document.createElement('b');<br />
h.appendChild(txt);<br />
var div1 = document.createElement('div');<br />
div1.appendChild(h);<br />
div1.appendChild(ul);<br />
document.getElementById('data2007').appendChild(div1);<br />
}<br />
}<br />
}<br />
function search10(query, label) {<br />
<br />
var script = document.createElement('script');<br />
script.setAttribute('src', query + 'feeds/posts/default/-/'<br />
+ label +<br />
'?alt=json-in-script&callback=listEntries10');<br />
script.setAttribute('type', 'text/javascript');<br />
document.documentElement.firstChild.appendChild(script);<br />
}<br />
<br />
var labelArray = new Array();<br />
var numLabel = 0;<br />
<br />
<b:loop values='data:posts' var='post'><br />
<b:loop values='data:post.labels' var='label'><br />
textLabel = "<data:label.name/>";<br />
<br />
var test = 0;<br />
for (var i = 0; i < labelArray.length; i++)<br />
if (labelArray[i] == textLabel) test = 1;<br />
if (test == 0) {<br />
labelArray.push(textLabel);<br />
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?<br />
labelArray.length : maxNumberOfLabels;<br />
if (numLabel < maxLabels) {<br />
search10(homeUrl3, textLabel);<br />
numLabel++;<br />
}<br />
}<br />
</b:loop><br />
</b:loop><br />
</script><br />
</div><br />
<br />
</div><br />
</b:if>

တကယ္လို႔ <data:post.body/> ကို ႏွစ္ေနရာ ေတြ႕တယ္ ဆိုရင္ေတာ့
<b:if cond='data:blog.pageType == "item"'> ရဲ႕ ေနာက္ပိုင္းမွာ ရွိတဲ့ <p><data:post.body/></p> စာေၾကာင္းရဲ႕ ေအာက္နားမွာ အထက္က Code ကို အစဆံုး စာေၾကာင္းနဲ႔ ေနာက္ဆံုးစာေၾကာင္း ျဖဳတ္ၿပီး ကူးထည့္ေပးပါ။
ဆိုလိုတာက အေပၚဆံုးစာေၾကာင္းျဖစ္တဲ့ <b:if cond='data:blog.pageType == "item"'> နဲ႔ ေအာက္ဆံုး စာေၾကာင္းျဖစ္တဲ့ </b:if> ကို ခ်န္ၿပီး က်န္တာေတြ ကူးထည့္ေပးပါ။

ၿပီး Save Template လုပ္လိုက္ရင္ ရပါၿပီ။ ဒါိဆိုရင္ ပို႔စ္ တစ္ခုခ်င္းစီ ၾကည့္တဲ့အခါ ပို႔စ္ေတြရဲ႕ ေအာက္ဆံုးမွာ Related Posts By Categories ဆိုတဲ့ ေခါင္းစဥ္နဲ႔ ဆက္ႏြယ္တဲ့ ပို႔စ္ေတြရဲ႕ စာရင္းကို Label နဲ႔ စစ္ၿပီး ေဖာ္ျပေပးပါလိမ့္မယ္။

ကဲ စမ္းၾကည့္ၾကပါဦး။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

Blogumus: လည္ပတ္ေနေသာ Label မ်ား ဖန္တီးျခင္း

က်ေနာ့္ ဘေလာ့ဂ္မွာလို Label ေတြကို သူ႔အလိုအေလ်ာက္ လည္ပတ္လို႔ ေနခ်င္တယ္ဆိုရင္ေတာ့ ဘယ္လိုနည္းနဲ႔ လုပ္လို႔ရမယ္ဆိုတာ က်ေနာ္ နည္းနည္း တင္ျပေပးပါ႔မယ္။ Layout >> Edit HTML ထဲကို ၀င္ေပးပါ။

ပထမဆံုး အေနနဲ႔ သိသင့္တာက ဘေလာ့ဂ္ အမ်ားစုမွာ Label Widget က တစ္ခုတည္း ထားၾကတာ မ်ားတယ္။ ဒါေၾကာင့္ အရင္တစ္ခု ရွိႏွင့္ၿပီးသား ဆိုရင္ေတာ့ ဖ်က္ပစ္လိုက္ပါ။ ထူးထူးျခားျခား Label Widget ႏွစ္ခုထားခ်င္တယ္ ဆိုရင္ေတာ့လည္း ရွာၿပီး ဖ်က္မေနနဲ႔ေတာ့ေပါ႔။ အေဟာင္းကို ဘယ္လိုရွာမလဲ ဆိုတာ နည္းနည္း ေျပာျပေပးပါ႔မယ္။ Browser က Find ထဲမွာ <b:widget id='label1' လို႔ ႐ိုက္ထည့္ၿပီး ရွာၾကည့္ပါ။ ေတြ႕တယ္ဆိုရင္ေတာ့ အဲဒီ စာေၾကာင္းအစား ေအာက္မွာ ျပထားတဲ့ Code ကို ထည့္ေပးပါ။ တကယ္လို႔ အရင္ Label Widget မရွိခဲ့ဖူးဘူး ဆိုရင္ <b:section class="sidebar" ကို ရွာၿပီး သူ႔ေအာက္နားမွာ Code ကို ထည့္ေပးပါ။

<br />
<b:widget id='Label99' locked='false' title='Labels' type='Label'><br />
<br />
<b:includable id='main'><br />
<br />
<b:if cond='data:title'><br />
<h2><data:title/></h2><br />
</b:if><br />
<br />
<div class='widget-content'><br />
<br />
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;<br />
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;<br />
&lt;param name="bgcolor" value="#ffffff" /&gt;<br />
&lt;param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags&gt;<br />
<b:loop values='data:labels' var='label'><br />
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a><br />
</b:loop><br />
&lt;/tags>" /&gt;<br />
<br />
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;<br />
<br />
&lt;/object&gt;<br />
<br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<br />
</b:includable><br />
</b:widget><br />

တန္းပလိတ္ကို Save လိုက္ရင္ ရပါၿပီ။ လိုခ်င္တဲ့ ပံုစံကုိ ဘယ္လိုေျပာင္းမလဲ ဆိုတာ ဆက္ၿပီး တင္ျပေပးခ်င္ပါတယ္။

စာေၾကာင္းေရ နံပါတ္ ၉ မွာ ပါတဲ့

240 က width ကို ေဖာ္ၫႊန္းပါတယ္။ အနံ က်ယ္ခ်င္တယ္ဆိုရင္ေတာ့ အဲဒီေနရာမွာ တန္ဖိုးကို တိုးလိုက္ရပါမယ္။

300 က height ကို ေဖာ္ၫႊန္းပါတယ္။ အျမင့္ က်ယ္ခ်င္တယ္ဆိုရင္ေတာ့ အဲဒီေနရာမွာ တန္ဖိုးကို တိုးလိုက္ရပါမယ္။

#FFFFFF က ေနာက္ခံ အေရာင္ကို သက္မွတ္တာပါ။ အျဖဴေရာင္ အျဖစ္ သက္မွတ္ထားပါတယ္။ လိုသလို ျပင္ႏုိင္ပါတယ္။

စာေၾကာင္းေရ နံပါတ္ ၁၀ မွာ ပါတဲ့ 0x000000 က စာလံုးအေရာင္ကို သက္မွတ္တာပါ။ အနက္ေရာင္ အျဖစ္ သက္မွတ္ထားပါတယ္။

စာေၾကာင္းေရ နံပါတ္ ၁၄ မွာ ပါတဲ့ style='12' က အႀကီးဆံုးစာလံုးရဲ႕ အရြယ္အစားကို သက္မွတ္တာပါ။ ဒီထက္ ပိုႀကီးခ်င္၊ ငယ္ခ်င္တယ္ဆိုရင္ေတာ့ တန္ဖိုးကို ေျပာင္းလိုက္ႏိုင္ပါတယ္။

ဒီ လုပ္ေဆာင္ခ်က္ရဲ႕ မူလ ပိုင္ရွင္ဟာ Wordpress အတြက္ လုပ္ထားၿပီး အဲဒီ WP Cumulus plugin ကို Roy Tanck က ဖန္တီးထားတာပါ။ Blogger.com အတြက္ သံုးႏိုင္ေအာင္ Blogumus အျဖစ္နဲ႔ Blogger Buster ရဲ႕ ပုိင္ရွင္ Amanda Fazani က ျပဳျပင္ လိုက္ပါတယ္။ သူ႔ရဲ႕ ေက်းဇူးေၾကာင့္ပဲ က်ေနာ္တို႔ အခုလို သံုးႏုိင္ခဲ့တာပါ။ က်ေနာ္ Wordpress ရဲ႕ Plugin တစ္ခု အေနနဲ႔ ျမင္ဖူးေနတာ ၾကာပါၿပီ။ Blogger မွာ သံုးလို႔ မရလို႔ ဒီအတိုင္း လက္ပိုက္ၾကည့္ေနရတယ္။ လိုခ်င္လိုက္တာ လြန္ေရာ။ အခုေတာ့ Amanda ရဲ႕ ေက်းဇူးေၾကာင့္ က်ေနာ္တို႔ Blogger သမားေတြ သံုးႏိုင္ပါၿပီ။

အခု တင္ျပထားတဲ့ Label Cloud က Flash နဲ႔ ဖန္တီးထားတာ ျဖစ္တဲ့အတြက္ အမွန္တကယ္ အလုပ္လုပ္တာ ျမင္ရဖို႔ဆိုရင္ Flash Player 7 နဲ႔ အထက္ လိုအပ္ပါတယ္။ က်ေနာ္တို႔ သံုးေနတဲ့ Browser မွာ Flash Player Plugin ရွိေနမွ ေကာင္းေကာင္းေပၚပါမယ္။ တကယ္လို႔ အဲဒီ Plugin မရွိခဲ့ရင္ေတာ့ Adobe မွာ ေဒါင္းလုပ္ သြားဆြဲယူပါ။

ေနာက္ဆံုးအေနနဲ႔ ေျပာခ်င္တာက အခု ဒီ Blogumus ကို Blogger သမားေတြ သံုးႏိုင္ေအာင္ ဖန္တီးေပးတဲ့ Amanda Fazani ကို ထပ္မံၿပီး ေက်းဇူးတင္ပါရေစ။ က်ေနာ္ အဲဒါကို တအား လိုခ်င္ခဲ့ဖူးလို႔ပါ။ စာဖတ္သူတို႔လည္း စမ္းသပ္ေအာင္ျမင္ပါေစလို႔ .....

[+/-]

မဲေပး႐ံုတစ္ခု တည္ေဆာက္ျခင္း (PollCode)

က်ေနာ္တို႔ စာဖတ္သူရဲ႕ ထင္ျမင္ ယူဆခ်က္ကို သိခ်င္တဲ့အခါမွာ ေရြးခ်ယ္စရာ အမ်ားႀကီးထဲက တစ္ခုကို ေရြးခိုင္းပါမယ္။ ေနာက္ၿပီး မဲေပးလိုက္တာနဲ႔ က်ေနာ္တို႔ မဲ ရလဒ္ကို ခ်က္ခ်င္း ထုတ္ျပန္ေပးပါတယ္။ လက္ရွိ အေျခအေနထိေပါ႔။ Poll Service ေပါ႔။ အဲဒီလို လုပ္ခ်င္ရင္ ပံုမွန္အားျဖင့္ က်ေနာ္တို႔ Blogger.com ရဲ႕ Poll ကို သံုးလို႔ရပါတယ္။ ေနာက္တစ္ခုက Third Party Website တစ္ခု ျဖစ္တဲ့ http://pollcode.com/ ကို သံုးလည္း ရပါတယ္။ Blogger Poll ရဲ႕ အားသာခ်က္က အေျဖတစ္ခုထပ္ ပိုေရြးခြင့္ ေပးႏိုင္ပါတယ္။ သူ႔ရဲ႕ အားနည္းခ်က္က အေရာင္ေတြ ပံုစံေတြကို လုိသလို ျပင္ခြင့္မေပးဘဲ PollCode ကေတာ့ ျပင္ခြင့္ေပးထားပါတယ္။ ဒါေပမယ့္ PollCode ရဲ႕ အားနည္းခ်က္က ျမန္မာစာ (ZawGyi Font) သံုးမရဘူးဗ်။ က်န္တာေတြ ေတာ္ေတာ္ အဆင္ေျပပါတယ္။

မဲ႐ံုေလး လုပ္ခ်င္ရင္ http://pollcode.com ကို ၀င္ေပးပါ။ ကိုယ္ပိုင္ အေကာင့္ဖြင့္ၿပီးလည္း လုပ္လို႔ရသလို အေကာင့္မလုပ္ဘဲ ဧည့္သည္အေနနဲ႔လည္း Poll လုပ္ခြင့္ ေပးထားပါတယ္။ ေမးခြန္းေတြ ျဖည့္၊ ေရြးစရာ အေျဖေတြ ထည့္ၿပီး အေရာင္ေတြ ပံုစံေတြ ေျပာင္းၿပီးရင္
get poll code ဆိုတဲ့ ခလုတ္ကို ႏွိပ္လိုက္ရင္ သူဖာသာ HTML Code ထုတ္ေပးပါလိမ့္မယ္။ အဲဒီ HTML Code ကို ေကာ္ပီကူးၿပီး Poll ကို Side Bar မွာ ေပၚခ်င္ရင္ Layout >> Page Element >> Add a Page Element >> HTML/Javascript မွာ ကူးထည့္ေပးပါ။ တကယ္လို႔ ပို႔စ္ထဲမွာ ထည့္ခ်င္တယ္ ဆိုရင္ေတာ့ Create New Post လုပ္ၿပီး ကူးထည့္ေပးပါ။

ဒါဆို က်ေနာ္တို႔ လိုခ်င္တဲ့ မဲ႐ံုေလး ရပါၿပီ။ တကယ္လို႔ ျမန္မာလို ေပၚခ်င္တယ္ ဆိုရင္ေတာ့ က်ေနာ္တို႔ နည္းနည္း ထပ္ကလိလို႔ ရပါေသးတယ္။ ခုနက ကူးထားတဲ့ HTML Code ထဲက ေအာက္ပါ စာေၾကာင္းေတြကို ရွာေပးပါ။

<font face="Times New Roman" ဆိုတဲ့ ေနရာမွာ <font face="ZawGyi-One" လို႔ ျပင္ေပးပါ။ Arial ကို ေရြးထားမယ္ဆိုရင္ font face မွာ Arial လို႔ ေပၚေနပါ႔မယ္။
တကယ္လို႔ ေမးခြန္းမွာ ေရြးစရာ အေျဖ ငါးခု ေပးထားရင္ <font face="Times New Roman" size=-1 color="00000"> ဆိုတာမ်ဳိး ၆ ခု ေတြ႕ပါလိမ့္မယ္။ ပထမဆံုး ေတြ႕ရတာ ေမးခြန္း ျဖစ္ၿပီး၊ ေနာက္ပိုင္း ေတြ႕ရတဲ့ ငါးခုဟာ အေျဖေတြပါ။ ဒီေတာ့ က်ေနာ္တုိ႔ ျမန္မာလို႔ အေမးအေျဖေတြ ေရးခ်င္တယ္ဆိုရင္ ပထမဆံုး ေတြ႕ရတဲ့ <font face="Times New Roman" size=-1 color="00000"> မွာ ...
<font face="ZawGyi-One" size=-1 color="00000"><b>ေမးခြန္းေရးေပးပါ</b></font>
အေျဖေတြအတြက္ ေနာက္ ငါးခုကို ထပ္ရွာၿပီး ...
<font face="ZawGyi-One" size=-1 color="00000">အေျဖ (၁)</font>
<font face="ZawGyi-One" size=-1 color="00000">အေျဖ (၂)</font>
<font face="ZawGyi-One" size=-1 color="00000">အေျဖ (၃)</font>
<font face="ZawGyi-One" size=-1 color="00000">အေျဖ (၄)</font>
<font face="ZawGyi-One" size=-1 color="00000">အေျဖ (၅)</font>
လို႔ ျပင္ေပးပါ။

ဒီမွာ တစ္ခု ေျပာစရာ ရွိတာက အခုလို ျမန္မာလို ျပင္လိုက္ရင္ က်ေနာ္တုိ႔ ဘေလာ့္မွာ ျမန္မာလို ျမင္ရေပမယ့္ အေျဖကို http://pollcode.com မွာ ေဖာ္ျပတဲ့ အခါ မူလ ေရးထားတဲ့ အဂၤလိပ္လိုပဲ ေပၚမွာပါ။ ျမန္မာလို မေပၚပါဘူး။

ဘာပဲျဖစ္ျဖစ္ အခုလို အလြယ္တကူနဲ႔ ဖန္တီးလို႔ ရတဲ့ မဲ႐ံုေလးကို သေဘာက်မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ နမူနာေလး တစ္ခု လုပ္ျပထားလိုက္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

ဘေလာ့ဂ္တစ္ခု ဖန္တီးျခင္း

ဘေလာ့ဂ္တစ္ခု စၿပီး ဖန္တီးဖို႔ ဆိုရင္ အရင္ဆံုး www.blogger.com ကို ၀င္ဖို႔ လိုပါလိမ့္မယ္။ အရင္းဆံုး သိထားဖို႔ လိုအပ္တာ တစ္ခုက ျမန္မာႏိုင္ငံကေန လုပ္မယ္ဆိုရင္ ျမန္မာႏိုင္ငံကေန ဆိုရင္ Blogger.com ကို တုိက္႐ိုက္ ၀င္မရပါဘူး။ ဘန္းေက်ာ္ၿပီးမွ ၀င္ရပါမယ့္။ ခြေက်ာ္ ၀င္ထားၿပီးသားလို႔ ယူဆၿပီး ဆက္ေဆြးေႏြးပါမယ္။ Blogger.com ကို ၀င္လိုက္တဲ့အခါမွာ ညာဘက္ ေအာက္နားမွာ ေအာက္မွာ ျမင္ရတဲ့ ပုံအတုိင္း ေတြ႕ရပါမယ္။

အဲဒီမွာ Create Your Blog Now ဆိုတာကို ကလစ္ႏွိပ္လိုက္ရင္ ေအာက္က ပံုလို က်လာပါလိမ့္မယ္။ တစ္စိတ္တစ္ပိုင္းေပါ႔။ ပံုမွာ ပါတဲ့ အၫႊန္းအတုိင္း ျဖည့္လိုက္ပါ။

Continue ႏွိပ္ၿပီးၿပီ ဆိုရင္ ေအာက္က ပံုအတုိင္း ထပ္ေပၚလာပါ႔မယ္။ အေပၚကလိုပဲ အၫႊန္းအတိုင္း ဆက္ျဖည့္ေပးပါ။

CONTINUE ကို ႏွိပ္ၿပီးၿပီ ဆိုရင္ တန္းပလိတ္ ေရြးဖို႔ ေပၚလာပါမယ္။ အဲဒီ သူေပးထားတဲ့ တန္းပလိတ္ထဲက အဆင္ေျပတာေလးတစ္ခု ေရြးေပးပါ။ ေရြးၿပီးသြားလို႔ CONTINUE ႏွိပ္ၿပီးၿပီ ဆိုရင္ေတာ့ Your blog has been created! ဆိုတာ ေပၚလာပါလိမ့္မယ္။ ဒါဆိုရင္ေတာ့ START BLOGGING ကို ႏွိပ္ၿပီး ဘေလာ့ဂ္ စေရးလို႔ပါၿပီ။

[+/-]

Custom Domain အသံုးျပဳႏုိင္ရန္ ျပင္ဆင္ျခင္း

Blogger.com မွာ Log in လုပ္လိုက္ပါ။
ကိုယ္ နာမည္ေျပာင္းခ်င္တဲ့ ဘေလာ့ဂ္ရဲ႕ Setting ကို ၀င္လုိက္ပါ။

အေပၚပံုမွာ ေတြ႕တဲ့အတိုင္း Publishing ဆိုတဲ့ Tab ကိုေရြးပါ။ ေနာက္ၿပီး အဲဒီအထဲမွာ Switch to: Custom Domain (Point your own .....) ကိုေတြ႕ေအာင္ရွာပါ။ ေတြ႕ရင္ Custom Domain ကို ကလစ္ႏႈိတ္ပါ။

အေပၚပံုရဲ႕ ညာဘက္ေအာက္ေထာင့္မွာ Already own a domain? Switch to Advanced settings ကို ေတြ႕ပါလိမ့္မယ္။ တကယ့္ page မွာေတာ့ ညာဘက္ေအာက္ေထာင့္ မဟုတ္ပါ။ ေတြ႕ရင္ Switch to advanced settings ကို ကလစ္ႏႈိတ္ပါ။

ဒါဆို အေပၚပံုကုိ ေတြ႕ရပါမယ္။ အဲဒီအထဲက Your Domain http:// ဆိုၿပီး ကြက္လပ္ေတြ႕ပါလိမ့္မယ္။ အဲဒီကြက္လပ္မွာ ကိုယ္ပိုင္ လိပ္စာကို ထည့္ပါ။ ဥပမာ pikay.myanmarbloggers.org (or) www.pikay.co.cc ေပါ႔။

ေနာက္ၿပီး က်ေနာ္တို႔ ၀ယ္ထားတဲ့ ဒိုမိန္း (သို႔) Free Domain Service မွာ Setting လုပ္ရပါမယ္။ တကယ္လို႔ myanmarbloggers.org မွာ နာမည္ေတာင္းထားရင္ေတာ့ ဒီအပိုင္းကို Domain Admin က လုပ္ေပးပါလိမ့္မယ္။ စာဖတ္သူ အေနနဲ႔ ဆက္လုပ္စရာ မလုိေတာ့ပါဘူး။ ကိုယ့္ဖာသာ Setting ၀င္ျပင္ရမယ္ဆိုရင္ေတာ့

Host Record မွာ
Host Name : yourname (e.g. pikay)
Host Address : ghs.google.com.
Host Type : CNAME
ဆိုတာေလးေတြ ျပင္ေပးပါ။

ဒါဆိုၿပီးပါၿပီ။ သူတို႔ (Blogger.com) လႊဲလို႔ အၿပီးကို ေစာင့္႐ံုပါပဲ။ လုပ္ၾကည့္ပါ။ ဒီလို ဘေလာ့ဂ္ကို blogspot.com ကေန ကိုယ္ပိုင္ ဒိုမိန္းတစ္ခုကို ေျပာင္းလိုက္ရင္ စာဖတ္သူေတြအတြက္ အေတာ္ အဆင္ေျပပါမယ္။ ဘေလာ့ဂ္ေရးတဲ့လူ အဖို႔ေတာ့ ေက်ာ္လႊားၿပီး ေရးေနရဦးမွာပါ။ ဒါေပမယ့္ စာဖတ္သူအဆင္ေျပတာ က်ေနာ္တို႔စာေရးသူ ေတြကိုလည္း တဖက္တလမ္းက အဆင္ေျပေစပါတယ္။

[+/-]

မာတိကာ တစ္ခု ဖန္တီးျခင္း (AJAX)

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

မာတိကာ လုပ္ႏိုင္တဲ့ နည္းေတြ အမ်ားႀကီး ရွိပါတယ္။ အဲဒီ အထဲကမွ တစ္ခုကို တင္ျပခ်င္ပါတယ္။ အခု တင္ျပမယ့္ မာတိကာ လုပ္နည္းဟာ ဘေလာ့ဂ္တစ္ခုရဲ႕ မာတိကာတင္မကဘဲ လိုအပ္ရင္ ဘေလာ့ အမ်ားႀကီးအတြက္ တစ္ေနရာတည္းမွာ မာတိကာေတြ လုပ္ႏိုင္ပါတယ္။ ေနာက္ၿပီး အခု တင္ျပမယ့္ မာတိကာ လုပ္နည္းရဲ႕ အားသာခ်က္ဟာ ပို႔စ္တစ္ခုခ်င္းစီကို Preview အေနနဲ႔ ၾကည့္လို႔ရပါတယ္။ ဒီနည္းဟာ Google ရဲ႕ AJAX Dynamic Feed Control နည္းလမ္းကို သံုးထားတာပါ။ ကဲ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ရေအာင္။

လိုအပ္ခ်က္ ။ ။ ဒီနည္းနဲ႔ မာတိကာကုိ လုပ္ခ်င္ရင္ Feed Setting နည္းနည္း ၀င္ျပင္ရပါမယ္။ Settings >> Site Feed မွာ Allow Blog Feeds ကုိ None ျဖစ္မေနေအာင္ ျပင္ေပးပါ။

Layout >> Page Element မွာ Add a page element ကို ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ၿပီး TextBox ထဲမွာ ေအာက္က Code ကို ကူးထည့္ေပးပါ။ Code ကို ရဖို႔ view plain ကုိ ကလစ္ႏွိပ္ပါ။

<br />
<br />
<br />
<br />
<br />
<div id="feed-control"><br />
<span style="margin:10px;padding:4px;">Loading...</span><br />
</div><br />
<br />
<br />
<script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script><br />
<br />
<br />
<script src="http://simblogg.googlepages.com/gfdynamicfeedcontrol.js" type="text/javascript"></script><br />
<style type="text/css"><br />
@import url("http://phyoekyaw.googlepages.com/gfdynamicfeedcontrol.css");<br />
</style><br />
<br />
<script type="text/javascript"><br />
function LoadDynamicFeedControl() {<br />
var feeds = [<br />
{title: 'မာတိကာ', <br />
url: 'http://knowhow.myanmarbloggers.org/feeds/posts/default?start-index=1&max-results=10'<br />
}];<br />
var options = {<br />
stacked : true,<br />
horizontal : false,<br />
title : "How To BLOG"<br />
}<br />
<br />
new GFdynamicFeedControl(feeds, 'feed-control', options);<br />
}<br />
// Load the feeds API and set the onload callback.<br />
google.load('feeds', '1');<br />
google.setOnLoadCallback(LoadDynamicFeedControl);<br />
</script><br />
Widget by <a href="http://betabloggerfordummies.blogspot.com">Betabloggerfordummies.</a><br />

Line (28) >> မာတိကာ ဆိုတဲ့ေနရာမွာ ႀကိဳက္တဲ့ စာလံုး ေျပာင္းထည့္ႏိုင္ပါတယ္။ ေခါင္းစဥ္ပါ။
Line (29) >> http://knowhow.myanmarbloggers.org ေနရာမွာ ကိုယ့္ရဲ႕ လိပ္စာ ထည့္ေပးပါ။
Line (29) >> max-results=10 ေနရာမွာ ပို႔စ္ ၁၀၀ ခုပဲ ျပခ်င္ရင္ 100 လုိ႔ ျပင္ေပးပါ။ အကုန္ ျပခ်င္တယ္ဆိုရင္ေတာ့ 999 လို႔ ျပင္ေပးပါ။
Line (34) >> How To BLOG ေနရာမွာ ကိုယ့္ ဘေလာ့ဂ္ရဲ႕ နာမည္ ထည့္ေပးပါ။

ဒါ ဘေလာ့ဂ္တစ္ခုအတြက္ မာတိကာ ဘယ္လို လုပ္မလဲဆိုတာ တင္ျပတာပါ။ အဆင္ေျပပါေစဗ်ာ။

ဆက္ႏြယ္ေသာပို႔စ္မ်ား

[+/-]

Label မ်ားကို Drop Down ပံုစံျဖင့္ ေဖာ္ျပျခင္း

ဒီပို႔စ္မွာ က်ေနာ္တုိ႔ Label ကို Drop Down List ပံုစံနဲ႔ ဘယ္လို ေဖာ္ျပမလဲ ဆိုတာ ေဆြးေႏြးေပးခ်င္ပါတယ္။ Drop Down List ဆိုတာ ေအာက္မွာ ျပထားသလိုေပါ႔။ တကယ္လို႔ အဲဒီလို Drop Down List နဲ႔ Label ကို ျပမယ္ဆိုရင္ ေနရာ အမ်ားႀကီး က်ံဳ႕သြားပါတယ္။ ဒါေပမယ့္ အၫႊန္းေတြကို အကုန္လံုး ခပ္ရွင္းရွင္း ေဖာ္ျပထားခ်င္တဲ့ လူေတြအတြက္ေတာ့ ဒီလို လုပ္ခ်င္မွာ မဟုတ္ပါဘူး။ ကဲ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ရေအာင္။

တခ်ဳိ႕ ဘေလာ့ဂ္ေတြမွာ Label ကို လုပ္ထားၿပီးသား ရွိေနပါလိမ့္မယ္။ တကယ္လို႔ လုပ္ၿပီးသား ျဖစ္ေနရင္ အရင္ဆံုး အဲ့ဒီ Label Element ကို အရင္ ဖ်က္ေပးပါ။ Layout >> Page Element မွာ အဲဒီ Label Element ကို Edit လုပ္ၿပီး Remove ခလုတ္ ႏွိပ္ၿပီး ဖယ္ေပးပါ။ Label Element ထည့္ထားတာ မရွိတဲ့သူက ဒီကေန စလုပ္ပါ႔မယ္။

Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။ ၿပီးရင္း </b:widget> နဲ႔ <b:widget id=' .... ၾကားမွာ ေအာက္က Code ကို ထည့္ေပးပါ။

Line 8 >> width:200px မွာ ကိုယ္နဲ႔ အဆင္ေျပမယ့္ Width ကို ျပင္ေပးပါ။
Line 9 >> Labels ဆိုတဲ့ေနရာမွာ ကိုယ္ ေပၚေနစခ်င္တဲ့ စာေၾကာင္း ထည့္ေပးပါ။

ဒါဆို က်ေနာ္တို႔ လိုခ်င္တဲ့ Drop Down Label List ရပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။

ဆက္ႏြယ္ေသာပို႔စ္မ်ား

[+/-]

ေထာင့္လံုး စတုဂံျဖင့္ တန္းပလိတ္ကို တန္ဆာဆင္ျခင္း

Template မွာ အနားကို လံုးထားရင္ အျမင္အရ တကယ္ကို႔ က်က္သေရ ရွိသြားသလို ခံစားရတယ္။ က်ေနာ္တို႔ တန္းပလိတ္မွာ အနားေတြ လံုးခ်င္တယ္ ဆိုရင္ ပံုေတြနဲ႔ ခ်ိတ္ဆက္ၿပီး CSS Code ေတြနဲ႔ ပိုင္ပိုင္ႏိုင္ႏိုင္ ခ်ိတ္သံုးႏိုင္မွ စတိုင္က်တဲ့ ပံုတစ္ပံု ရႏိုင္ပါမယ္။ က်ေနာ္တို႔ ကံေကာင္း ေထာက္မစြာပဲ Spiffy Corners ဟာ က်ေနာ္တို႔ လိုခ်င္တဲ့ ေထာင့္လံုး ေဘာင္ေတြကို လြယ္လြယ္ကူကူနဲ႔ (အေရးအႀကီးဆံုးက ပိုက္ဆံမယူဘဲ) လုပ္လို႔ရတာ ေတြ႕ရပါတယ္။ တန္းပလိတ္မွာ ထည့္ဖို႔ CSS Code ေတြကို ထုတ္ေပးတာေၾကာင့္ လြယ္လြယ္ကူကူနဲ႔ ယူသံုး႐ံုပါပဲ။

Spiffy Corners ဆိုတာ ေထာင့္လံုး ေလးေထာင့္ကြက္ေတြ ေပၚႏိုင္တဲ့ CSS Code နဲ႔ HTML Code ေတြကို ထုတ္ေပးတဲ့ Online Tool တစ္ခုပါ။ ေထာင့္လံုး စတုဂံကို ရဖုိ႔ ဘာပံုမွ သံုးစရာ မလိုသလိုဘဲ ဘာ Javascript မွလည္း မသံုးပါဘူး။ သမ႐ိုးက် CSS နဲ႔ HTML ကုိပဲ သံုးထားတာေၾကာင့္ တန္းပလိတ္ တင္ခ်ိန္ကိုလည္း မေလးလံေစပါဘူး။ ေနာက္ၿပီး သံုးရတာလည္း လြယ္ကူတာေၾကာင့္ အေျခခံ အဆင့္ေလာက္ သိထားရင္ကို ဖန္တီး အသံုးျပဳႏိုင္ေအာင္ လုပ္ေပးထားပါတယ္။ က်ေနာ္လည္း အသံုးျပဳပံုကို အေသးစိတ္ ရွင္းျပ ေပးပါ႔မယ္။

ကဲ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ၾကရေအာင္။ Spiffy Corners ကုိ ကလစ္ႏွိပ္ၿပီး ၀င္လိုက္တာနဲ႔ ေအာက္မွာ ျမင္ရတဲ့ ပံုကို ေတြ႔ပါလိမ့္မယ္။

အဲဒီမွာ foreground color ဆိုတာ အလယ္ေခါင္က အနီရဲရဲ အပိုင္းကို ေျပာတာပါ။ background color ကေတာ့ နီညိဳေရာင္ အပိုင္းေပါ႔။ အဲဒီမွာ background color ကို ကိုယ့္ရဲ႕ တန္းပလိတ္ ေနာက္ခံ အတုိင္း ထားေပးရင္ ပို အဆင္ေျပပါမယ္။ foreground color ကေတာ့ ကိုယ့္သေဘာပါ။ အဲဒီမွာ class name ကေတာ့ ကိုယ္ေပးခ်င္တဲ့ နာမည္ ေပးေပါ႔။ ပံုစံႏွစ္မ်ဳိး သံုးခ်င္ရင္ေတာ့ မတူတဲ့ နာမည္ႏွစ္ခု ေပးဖုိ႔ မေမ့ပါနဲ႔။ အေရာင္ေတြ စိတ္ႀကိဳက္ ျဖစ္ၿပီဆိုရင္ေတာ့ ေအာက္က 5px ဆိုတာကို ႏွိပ္ေပးပါ။ စာမ်က္ႏွာကို ျပန္တင္ၿပီး ေအာက္မွာ ျမင္ရတဲ့ CSS Code ေတြ ေပၚလာပါမယ္။ က်ေနာ္ ဒီ ဥပမာမွာ background ကို အျဖဴေရာင္သံုးခ်င္လို႔ FFFFFF လို႔ ႐ိုက္ထည့္ၿပီး foreground ကေတာ့ C3CCEE အေရာင္ကို သံုးပါ႔မယ္။ အေရာင္နံပါတ္ မသိရင္ ေဘးမွာ ေဆးပံုး ရွိပါတယ္။ ႏွိပ္ၾကည့္လိုက္ပါ။

အေရာင္ကေတာ့ အထက္က ပံုအတုိင္း ေပၚမယ္ေပါ႔ဗ်ာ။ သူ႔ရဲ႕ ေအာက္မွာ CSS Code နဲ႔ HTML Code ေပးထားပါတယ္။ အဲဒါေတြကို က်ေနာ္တို႔ ဘယ္လို ယူသံုးရမလဲ ဆိုတာ ဆက္ေဆြးေႏြး ရေအာင္ဗ်ာ။ ကဲ က်ေနာ္တို႔ Blogger.com ကို ၀င္ၿပီး Layout >> Edit HTML ထဲကို သြားေပးပါ။

Spiffy Corner မွာ ေပးထားတဲ့ CSS Code ရဲ႕ အေပၚဆံုး Code ျဖစ္တဲ့ <Style type="text/css"> နဲ႔ ေအာက္ဆံုး Code ျဖစ္တဲ့ </style> က က်ေနာ္တို႔အတြက္ အသံုးမ၀င္ပါဘူး။ အဲဒါ ႏွစ္ခုကို မယူဘဲ က်န္တာေတြကို ကူးၿပီးေတာ့ Style Sheet မွာ သြားထည့္ေပးပါ။ <b:skin><![CDATA[ နဲ႔ ]]></b:skin> ၾကားလို႔ Style Sheet လုိ႔ ေခၚပါတယ္။ ေအာက္မွာ နမူနာ ျပထားပါတယ္။

.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#C3CCEE}
<------------- [more code here]
.spiffy5{
border-left:1px solid #d2d8f2;
border-right:1px solid #d2d8f2}
.spiffyfg{
background:#C3CCEE}

က်ေနာ္တို႔ HTML Code အသံုးခ်ပံုကို ဆက္ေျပာရေအာင္။ အထက္က ပံုလို က်ေနာ္တို႔ သူ ေပးထားတဲ့ HTML Code ကို ႏွစ္ပိုင္းခြဲၿပီး ျမင္ၾကည့္ရေအာင္။ က်ေနာ္တို႔ Sidebar က Page Element ေတြကို ေထာင့္လံုး စတုဂံ ျဖစ္ေအာင္ လုပ္လို႔ ရသလိုပဲ ပို႔စ္ေတြ ေပၚမယ့္ main-wrapper ကိုလည္း ေထာင့္လံုး ျဖစ္ေအာင္ လုပ္လို႔ရပါတယ္။ ပထမဆံုး အေနနဲ႔ main-wrapper ကို ေထာင့္လံုး ဘယ္လုိ လုပ္မလဲ အရင္ ရွင္းျပပါ႔မယ္။ ေအာက္မွာ ျပထားတဲ့ Code ေတြကို Template မွာ သြားရွာၿပီး အနီေရာင္ စာတန္း ေနရာမွာ HTML Part 1 ကို ျဖည့္ေပးၿပီး အျပာေရာင္ စာတန္း ေနရာမွာ HTML Part 2 ကို ျဖည့္ထည့္ေပးပါ။

<div id='main-wrapper'>

Paste Part 1 of the HTML Code Here!

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Paste Part 2 of the HTML Code Here!

</div>

Template ကို Save ၿပီး ဘေလာ့ဂ္ကို ျပန္ေခၚၾကည့္လုိက္ပါ။ ေအာက္က ပံုအတိုင္း ေပၚလာႏိုင္ပါတယ္။

ျဖစ္ေလ့ ျဖစ္ထ ရွိတဲ့ ျပႆနာ တစ္ခု ရွိပါတယ္။ တကယ္လို႔ ေအာက္က ပံုလို ကြက္တိကြက္ၾကား ေပၚေနရင္ေတာ့ .spiffyfg ကို ရွာၿပီး အနီေရာင္ စာေၾကာင္းကို ျဖည့္ေပးပါ။

.spiffyfg{

background:#C3CCEE;

margin: -15px 0 -20px 0;}

top margin နဲ႔ bottom margin ကို ဆြဲညိႇလိုက္တဲ့ သေဘာပါ။

Sidebar မွာ ေထာင့္လံုး ျဖစ္ခ်င္ရင္ေတာ့ ေအာက္က Code ေတြကို ရွာၿပီး အနီေရာင္ စာတန္းေနရာမွာ HTML Part 1 ထည့္ၿပီး အျပာေရာင္ စာတန္း ေနရာမွာေတာ့ HTML Part 2 ထည့္ေပးပါ။

ဒါဆိုရင္ က်ေနာ္တို႔ ေထာင့္လံုးနဲ႔ သပ္သပ္ရက္ရက္ ရွိလွတဲ့ Template တစ္ခုကို ပိုင္ဆုိင္ႏိုင္ပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

ဘေလာ့ဂ္ေပၚမွ GTalk ျဖင့္ ဆက္သြယ္ႏိုင္ရန္

ဘေလာ့ဂ္ေပၚကေန က်ေနာ္တုိ႔ဆီကို ဂ်ီေတာ့ကတဆင့္ ဆက္သြယ္ႏိုင္ဖို႔ Google ကေန Chatback Badge တစ္ခု မိတ္ဆပ္ေပးခဲ့ပါတယ္။ က်ေနာ္တို႔ Gtalk ၀င္ထားတဲ့ အခ်ိန္တိုင္းမွာ ကိုယ့္ ဘေလာ့ကို လာလည္သူ မွန္သမွ် ကိုယ္နဲ႔ ဆက္သြယ္လို႔ ရႏိုင္ပါတယ္။ ကိုယ့္ရဲ႕ အီးေမးလ္ လိပ္စာကို ေပးဖို႔ မလိုသလိုဘဲ စာဖတ္သူဟာ ကလစ္တစ္ခ်က္ ႏွိပ္႐ံုနဲ႔ ကိုယ့္စီ လာခ်ိတ္ၿပီး ဧည့္သည္တစ္ေယာက္ အေနနဲ႔ ကိုယ့္ပရိသတ္နဲ႔ စကားစျမည္ ေျပာလို႔ ရပါတယ္။ ကိုယ့္ဆီ ၀င္လာမယ့္ ဧည့္သည္ဟာ မည္သူမည္၀ါ မသိတဲ့ အျပင္ Google Account လည္း ရွိစရာ မလိုတာေၾကာင့္ သတိထားၿပီး ဆက္ဆံ ေျပာဆိုသင့္ပါတယ္။

ကဲ ... က်ေနာ္တို႔ ဘေလာ့မွာ အဲဒီ Google Talk Chatback ထည့္ခ်င္တယ္ ဆိုရင္ေတာ့ ဒီမွာ ကလစ္ႏွိပ္လိုက္ပါ။ ကလစ္ႏွိပ္ၿပီးတဲ့အခါ ဂ်ီေမးအေကာင့္ ၀င္မထားဘူး ဆိုရင္ ဂ်ီးေမးအေကာင့္ထဲ ၀င္ခိုင္းလိမ့္မယ္။ ၀င္ၿပီးသြားရင္ေတာ့ အဲဒီမွာ ကိုယ္ေပၚခ်င္တဲ့ နာမည္ ျပင္ေပးလို႔ရမယ္။ ေပၚခ်င္တဲ့ ပံုစံ ျပင္ေပးလို႔ရမယ္။ တကယ္လို႔ ျပင္ၿပီးသြားရင္ Update badge ခလုတ္ကို ႏွိပ္ဖို႔ မေမ့ပါနဲ႔။ ခနေနက် ေအာက္နားမွာ HTML Code တစ္ခု ထြက္လာပါမယ္။ အဲဒီ Code ကို ကူးယူၿပီး Blogger.com ကို ၀င္လုိက္ပါ။ ၿပီးရင္ Layout >> Page Elements က Add a page element ကုိ ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ၿပီးရင္ သူ႔ရဲ႕ Text Box ထဲမွာ ခုနက ကူးထားတဲ့ HTML Code ကို ထည့္ေပးၿပီး Save လုပ္လုိက္႐ံုပါပဲ။ ဒါဆို က်ေနာ္တို႔ လိုခ်င္တဲ့ Chatback တစ္ခု ရပါၿပီ။ ေအာက္မွာ ေပၚမယ့္ပံုကို နမူနာ ျပထားပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

ပို႔စ္ေရးသူ၏ Comment မ်ားအား သိသာေစျခင္း

က်ေနာ္တို႔ ပို႔စ္ေတြ ေရးတဲ့အခါမွာ ဘယ္သူမဆို ကိုယ့္ပို႔စ္ကို ကြန္းမန္႔ေပးတာ လိုလားၾကပါတယ္။ ကြန္းမန္႔ေလး တစ္ခု ၀င္လာၿပီ ဆိုရင္ကို ေပ်ာ္မဆံုးပါ။ တခါတေလက်ေတာ့ က်ေနာ္တို႔ ကြန္းမန္႔ကေန ေမးခြန္းေမးၿပီး စာေရးသူဟာ ဒီေနရာကေနပဲ စာျပန္ရတာ၊ ျပႆနာ ေျဖရွင္းရတဲ့ အခ်ိန္ေတြလည္း ရွိပါတယ္။ ဒါေၾကာင့္ ကြန္႔မန္းေတြထဲမွာ စာေရးသူ ကိုယ္တိုင္ ေရးထားတဲ့ ကြန္းမန္႔ေတြလည္း ပါ၀င္ႏိုင္ပါတယ္။ အခု က်ေနာ္ ဒီပို႔စ္မွာ ေဆြးေႏြးခ်င္တာက ပို႔စ္ေတြရဲ႕ ကြန္းမန္႔မွာ စာေရးသူရဲ႕ ကြန္းမန္႔နဲ႔ တျခားသူရဲ႕ ကြန္းမန္႔ေတြကို ကြဲကြဲျပားျပား ျမင္ႏိုင္ေအာင္ ဘယ္လို လုပ္မလဲ ဆိုတာပါ။ အခု ဒီပို႔စ္မွာ ပါတဲ့ လုပ္ေဆာင္ခ်က္ေတြဟာ Blogger Commenting Service သံုးထားတဲ့ သူေတြ အတြက္ပဲ သက္ဆိုင္ပါတယ္။

ေနာက္ၿပီး ဒီပို႔စ္မွာပဲ ကြန္းမန္႔ေတြကို နံပါတ္စဥ္ တပ္ဖုိ႔ပါ တခါတည္း လုပ္ေပးထားပါတယ္။ တကယ္လို႔ စာေရးသူ ကြန္းမန္႔ကို HighLight မလုပ္ခ်င္ဘဲ နံပါတ္စဥ္တပ္႐ံု သက္သက္ပဲ လုပ္ခ်င္တယ္ ဆိုရင္ေတာ့ ဒီမွာ သြားဖတ္ပါ။ အခု ဒီပို႔စ္က ေျပာထားတဲ့ အတိုင္း လုပ္လုိက္ရင္ေတာ့ နံပါတ္စဥ္ တပ္ၿပီးသား ျဖစ္သလို စာေရးသူ ကြန္းမန္႔ကိုလည္း Highlight လုပ္ၿပီးသား ရပါလိမ့္မယ္။ ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္း စဖို႔ Layout >> Edit HTML ကို ဖြင့္ၿပီး Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါဗ်ာ။

အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း

ဒါက နံပါတ္စဥ္ ေပၚဖို႔ အတြက္ CSS ပါ။

ဒါကေတာ့ စာေရးသူ ကြန္႔မန္႔ကို Highlight လုပ္ဖို႔ အတြက္ CSS ပါ။ .comment-author ကို ရွာေပးပါ။ တခါတေလမွာ .author-comment လို႔ ျဖစ္ေနတတ္သလို တခါတေလမွာ .comments-author လုိ႔ ျဖစ္ေနတတ္ပါတယ္။ ေတြ႕ၿပီဆိုရင္ color:#CC3300; background: #EEEEEE; ကို } မဆံုးခင္မွာ ထည့္ေပးပါ။ တကယ္လို႔ မေတြ႕ခဲ့ဘူး ဆိုရင္ေတာ့ ေအာက္က CSS Code ကို ကူးထည့္ေပးပါ။

အထက္ CSS ေတြကို Style Sheet မွာ သြားထည့္ေပးပါ။<b:skin><![CDATA[ နဲ႔ ]]></b:skin> ၾကားလို႔ Style Sheet လုိ႔ ေခၚပါတယ္။ သူတို႔ရဲ႕ ၾကား တစ္ေနရာရာမွာ အထက္က CSS ကို ထည့္ေပးပါ။ background နဲ႔ color ကို ကိုယ္ႀကိဳက္တဲ့ အေရာင္ ေျပာင္းထည့္ႏိုင္ပါတယ္။ ကာလာ နံပါတ္ မသိရင္ ဒီမွာ သြားၾကည့္ပါ။

အဆင့္ (၂) Widget တြင္ ျပင္ဆင္ ျဖည့္စြပ္ျခင္း

<b:includable id='comments' var='post'> ကို ရွာေပးပါ။ သူနဲ႔ မနီးမေ၀းမွာ <dl id='comments-block'> နဲ႔ စတဲ့ စာပိုဒ္ ရွိပါတယ္။ ေအာက္က စာပိုဒ္နဲ႔ အနီးစပ္ဆံုး ခပ္ဆင္ဆင္ ရွိပါလိမ့္မယ္။

ေတြ႕ၿပီ ဆုိရင္ေတာ့ အဲဒီ စာတစ္ပိုဒ္လံုးကို ေအာက္မွာ ျပထားတဲ့ Code နဲ႔ အစားထုိးေပးပါ။

<br />
<ul class='commentlist' style='margin: 0; padding: 0;'><br />
<script type='text/javascript'>var CommentsCounter=0;</script><br />
<b:loop values='data:post.comments' var='comment'><br />
<div class='' expr:id='data:comment.id'><br />
<b:if cond='data:comment.author == data:post.author'><br />
<br />
<li class='comments-author' style='margin: 0 0 10px 0;'><br />
<b:if cond='data:post.dateHeader'><br />
<div class='commentcount'/><br />
</b:if><br />
<cite><br />
<b:if cond='data:comment.authorUrl'><br />
<a expr:href='data:comment.authorUrl'><data:comment.author/></a><br />
<b:else/><br />
<data:comment.author/><br />
</b:if><br />
</cite><br />
<span class='numberingcomments'><br />
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'><br />
<script type='text/javascript'><br />
CommentsCounter=CommentsCounter+1;<br />
document.write(CommentsCounter)<br />
</script><br />
</a><br />
</span><br />
<br/><br />
<div style='clear: both;'/><br />
<b:include data='comment' name='commentDeleteIcon'/><br />
<p><data:comment.body/></p><br />
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'><br />
<data:comment.timestamp/><br />
</a></div><br />
<br />
<div class='clear'/><br />
<br />
</li><br />
<br />
<b:else/><br />
<br />
<li class='general-comments' style='margin: 0 0 10px 0;'><br />
<b:if cond='data:post.dateHeader'><br />
<div class='commentcount'/><br />
</b:if><br />
<cite><br />
<b:if cond='data:comment.authorUrl'><br />
<a expr:href='data:comment.authorUrl'><data:comment.author/></a><br />
<b:else/><br />
<data:comment.author/><br />
</b:if><br />
</cite><br />
<span class='numberingcomments'><br />
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'><br />
<script type='text/javascript'><br />
CommentsCounter=CommentsCounter+1;<br />
document.write(CommentsCounter)<br />
</script><br />
</a><br />
</span><br />
<br/><br />
<div style='clear: both;'/><br />
<b:include data='comment' name='commentDeleteIcon'/><br />
<p><data:comment.body/></p><br />
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'><br />
<br />
<data:comment.timestamp/><br />
</a></div><br />
<div class='clear'/><br />
</li><br />
<br />
</b:if><br />
</div><br />
</b:loop><br />
</ul>

ဟုတ္ကဲ့။ ၿပီးၿပီ ဆိုရင္ေတာ့ Template ကို Save လုပ္လိုက္ပါ။ က်ေနာ္တို႔ လိုခ်င္တာ လုပ္လို႔ ၿပီးပါၿပီ။ တစ္ခ်က္ေလာက္ ဘေလာ့ဂ္ကို ေခၚၾကည့္ပါဦး။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

Comment ေတြကို နံပါတ္စဥ္ ထိုးရေအာင္

နံပါတ္ တပ္တယ္ ဆိုတဲ့ အလုပ္ဟာ သိပ္ အေရးမပါဘူးလို႔ ထင္ရေပမယ့္ တကယ္တမ္း က်ေတာ့ စတုိင္က်ဖို႔နဲ႔ အျမင္ရွင္းဖုိ႔ အတြက္ေတာ့ သိပ္အေရးပါ ပါတယ္။ ကြန္းမန္႔တိုင္းရဲ႕ အေပၚနားမွာ နံပါတ္စဥ္ တပ္ထားမယ္ ဆိုရင္ ၫႊန္းရတာလည္း လြယ္ကူသြားမယ္။ အဲဒီ နံပါတ္ ဘယ္လို တပ္မလဲ ဆိုတာကို အခု က်ေနာ္ ဒီပို႔စ္မွာ ေဆြးေႏြးပါ႔မယ္။ တကယ္လို႔ စာဖတ္သူဟာ Blogger ရဲ႕ နဂို ရွိရင္းစြဲ Commenting Service မဟုတ္ဘဲ တျခား Service တစ္ခုခု (ဥပမာ Haloscan, Instense Debate, etc ...) ကို သံုးထားမယ္ ဆိုရင္ေတာ့ ဒီပို႔စ္ဟာ အလုပ္မျဖစ္ႏိုင္ပါဘူး။ ဒါေၾကာင့္မို႔ ဒီပို႔စ္ပါ ေလ့က်င့္ခန္းဟာ Blogger Commenting Service သံုးထားတဲ့ သူေတြ အတြက္သာပဲ အသံုးတည့္ပါလိမ့္မယ္။ ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္း စဖို႔ Layout >> Edit HTML ကို ဖြင့္ၿပီး Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါဗ်ာ။

အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း

အထက္ CSS ေတြကို Style Sheet မွာ သြားထည့္ေပးပါ။ <b:skin><![CDATA[ နဲ႔ ]]></b:skin> ၾကားကို Style Sheet လုိ႔ ေခၚပါတယ္။ သူတို႔ရဲ႕ ၾကား တစ္ေနရာရာမွာ အထက္က CSS ကို ထည့္ေပးပါ။

အဆင့္ (၂) Widget တြင္ ျပင္ဆင္ ျဖည့္စြပ္ျခင္း

<b:includable id='comments' var='post'> ကို ရွာေပးပါ။ သူနဲ႔ မနီးမေ၀းမွာ <dl id='comments-block'> နဲ႔ စတဲ့ စာပိုဒ္ ရွိပါတယ္။ အဲဒီ စာပိုဒ္ထဲမွာ ေအာက္မွာ ျပထားတဲ့ ေနရာေတြမွာ အနီေရာင္နဲ႔ Code ေတြကို ထည့္ေပးပါ။

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

   <span class='numberingcomments'>
      <a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
         <script type='text/javascript'>
            CommentsCounter=CommentsCounter+1;
            document.write(CommentsCounter)
         </script>
      </a>
   </span>

</dt>

<dd class='comment-body'>
.......
</dd>

</div>

</b:loop>
</dl>

[+/-]

ပံုကို တစ္ေနရာတည္းတြင္ အေသ ေပၚေနႏိုင္ရန္

[+/-]

Image Rollover with Opacity

ပံုတစ္ပံုကို နဂိုကထပ္ ခပ္မိွန္မွိန္ လုပ္ထားၿပီး Mouse Pointer ကို အဲဒီပံုေပၚ တင္လိုက္တာနဲ႔ နဂို အေရာင္ ျဖစ္သြားတယ္။ Mouse Pointer ဖယ္လိုက္ရင္ ခပ္မိွန္မွိန္ ျပန္ျဖစ္သြားပါတယ္။ ဒါဟာ က်ေနာ္တို႔ စာေၾကာင္း လင့္ခ္ေတြမွာ Mouse Pointer တင္လိုက္ရင္ အေရာင္ေျပာင္းသြားတာနဲ႔ သေဘာတရား အတူတူပါပဲ။ ပံုမွန္အားျဖင့္ ပံုတစ္ပံုဟာ လင့္ခ္တစ္ခုအေနနဲ႔ လုပ္ေဆာင္မယ္ဆိုရင္ အဲဒီပံုေပၚ Mouse Pointer တင္လိုက္ရင္ လက္ပံု ေျပာင္းသြားတယ္။ ပံုကေတာ့ ဘာမွ ေျပာင္းလဲမႈ မရွိပါဘူး။ အခု ဒီ ေလ့က်င့္ခန္း အရဆိုရင္ ပံုေပၚ Mouse Pointer တင္လိုက္ရင္ ပံုရဲ႕ အေရာင္ မွိန္ေပးလိုက္ပါတယ္။ Mouse Pointer ေရာက္ေနၿပီ ဆိုတဲ့ သေဘာေပါ႔။ ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္း စရေအာင္။

အထက္က CSS ေတြကို Style Sheet ထဲမွာ ထည့္ေပးပါ။ Layout >> Edit HTML က ]]></b:skin> ရဲ႕ အေပၚနားမွာ ထည့္ေပးပါ။

ေအာက္မွာ ျမင္ရတဲ့ Code ဒီပံုေပၚေစတဲ့ မူရင္း Code ပါ။

လိုင္း နံပါတ္ (၂) က href="http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Adore-48x48.png" ဟာ ကလစ္ႏွိပ္ရင္ သြားမယ့္ လိပ္စာပါ။
လိုင္း နံပါတ္ (၅) က src="http://www.iconarchive.com/icons/icons-land/vista-style-emoticons/Adore-48x48.png" ဟာ ေပၚမယ့္ပံုရဲ႕ လိပ္စာပါ။
လိုင္း နံပါတ္ (၃) က title="Adore Smiley" ဟာ Mouse Pointer ပံုေပၚေရာက္ရင္ Pointer ေအာက္နားမွာ ေပၚမယ့္စာပါ။
target="_blank" ဆိုတဲ့ အတြက္ေၾကာင့္ ကလစ္ႏွိပ္လိုက္ရင္ ေနာက္ တစ္မ်က္ႏွာမွာ သြားေပၚပါ႔မယ္။
လိုင္း နံပါတ္ (၆) alt="Adore Smiley" ဟာ အေၾကာင္းတစ္ခုခုေၾကာင့္ ပံု မေပၚခဲ့ဘူးဆိုရင္ ပံုအစား ေပၚဖို႔ စာကို သက္မွတ္ေပးတာပါ။

ဒါဆို နားလည္ေလာက္ၿပီလို႔ ေမွ်ာ္လင့္မိပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

ေနာက္ခံပံုျဖင့္ စာပုိဒ္ ဖန္တီးျခင္း

(၁) ေနာက္ခံ အမွိန္ျဖင့္ စာပိုဒ္ ျပဳလုပ္ျခင္း

Width: 200px; Height: 159px;
Opacity: 0.5;
ေနာက္ခံ အမွိန္
စာလံုး နဂိုအတိုင္း

(၂) ေနာက္ခံ အမိွန္ျဖင့္ စာပိုဒ္အမွိန္ ျပဳလုပ္ျခင္း

This only works in IE. It works great in IE but doesn't work at all in Mozilla. It was worth the try.

width : 200px; height: 159px; မွာ ပံု၏ အလ်ားအနံ ျဖစ္သည္။
opacity: .50; မွာ ပံု မူလပံုအား ၅၀% အလင္းက်န္ေအာင္ ျပဳလုပ္ျခင္း ျဖစ္သည္။
background:url မွာ မိမိ ထည့္လိုေသာ ပံု၏ လိပ္စာ ထည့္ရန္ ျဖစ္သည္။
color: black; မွာ ပံု မ်က္ႏွာစာတြင္ ေပၚမည့္ စာ၏ အေရာင္ ျဖစ္သည္။

[+/-]

ပံုတစ္ပံုကို မွိန္ေအာင္ ျပဳလုပ္ျခင္း

[+/-]

စာလံုးကို မွိန္ေအာင္ ျပဳလုပ္ျခင္း

...if our page
is beige then the
pullquote area that is beige
will be blended with 10% white...

အခု ေဘးကလို ပံုကို ရဖို႔ လုပ္ထားတဲ့ Code ကို ေအာက္မွာ ေလ့လာၾကည့္ပါ။ လိုင္းနံပါတ္ (၃) ကေနစၿပီး စာလံုး မွိန္ေအာင္ စတိုင္ကို စျပင္ပါတယ္။ လိုင္းနံပါတ္ (၇) ကေန (၁၁) အထိက မိမိ ေပၚေစလိုတဲ့ စာေၾကာင္းေတြ ေရးမယ့္ ေနရာပါ။ အဲဒီမွာ <small> </small> Tag ကုိ သံုးလိုက္ရင္ မူလ စာလံုးထက္ ေသးသြားၿပီး <strong> Tag က ပိုထင္းေအာင္ လုပ္ေပးပါတယ္။ လိုင္း (၄) က opacity ဆိုတာ စာလံုးကို ဘယ္ အတုိင္းအတာထိ မွိန္မလဲ ဆိုတာ သက္မွတ္ေပးတာပါ။ Font Size, Font, Background, Color စတာေတြကို ကိုယ္ ႀကိဳက္သလို ျပဳျပင္ယူၾကည့္ပါ။ အသံုးတည့္မယ့္ ပို႔စ္တစ္ခု ျဖစ္မယ္လို႔ ယံုၾကည္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

Syntax Hightlighter ျဖင့္ Code မ်ားကို Post တြင္ ေဖာ္ျပျခင္း

က်ေနာ္တို႔ ေအာက္က ပံုစံအတိုင္း Code ကို ေဖာ္ျပခ်င္တယ္ ဆိုရင္ ....
<br /> <link href='http://h1.ripway.com/phyoekyaw/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/><br /> <br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shCore.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushCpp.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushCSharp.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushCss.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushJava.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushJScript.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushSql.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushXml.js' type='text/javascript'/><br /> <script src='http://h1.ripway.com/phyoekyaw/Scripts/shBrushRuby.js' type='text/javascript'/><br /> <br /> <script class='javascript'><br /> //<![CDATA[<br /> function FindTagsByName(container, name, Tag)<br /> {<br /> var elements = document.getElementsByTagName(Tag);<br /> for (var i = 0; i < elements.length; i++)<br /> {<br /> if (elements[i].getAttribute("name") == name)<br /> {<br /> container.push(elements[i]);<br /> }<br /> }<br /> }<br /> var elements = [];<br /> FindTagsByName(elements, "code", "pre");<br /> FindTagsByName(elements, "code", "textarea");<br /> <br /> for(var i=0; i < elements.length; i++) {<br /> if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {<br /> var childNode = elements[i].childNodes[0];<br /> var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,''));<br /> elements[i].replaceChild(newNode, childNode);<br /> <br /> }<br /> else if(elements[i].nodeName.toUpperCase() == "PRE") {<br /> brs = elements[i].getElementsByTagName("br");<br /> for(var j = 0, brLength = brs.length; j < brLength; j++) {<br /> var newNode = document.createTextNode("");<br /> elements[i].replaceChild(newNode, brs[0]);<br /> }<br /> }<br /> }<br /> //clipboard does not work well, no line breaks<br /> // dp.SyntaxHighlighter.ClipboardSwf =<br /> //"http://h1.ripway.com/phyoekyaw/Scripts/clipboard.swf";<br /> dp.SyntaxHighlighter.HighlightAll("code");<br /> //]]><br /> <br /> </script>
ဇယားရဲ႕ အေပၚနားမွာ View Plain ကို ကလစ္ႏွိပ္ၿပီး အဲဒီထဲက Code ေတြ အကုန္ကူးေပးပါ။ ၿပီးရင္ </body> </html> ရဲ႕ အထက္မွာ ထည့္ေပးပါ။

ပို႔စ္ေရးေတာ့မယ္ဆိုရင္ ကုိယ္ ထည့္ခ်င္တဲ့ Code ကို အထက္ေအာက္ <textarea> Tag (သို႔) <pre> Tag နဲ႔ ဒီလုိ ေရးေပးပါ။

<textarea name="code" class="css">
< ---------- Your Code Here !!!
</textarea>

class မွာပါတဲ့ css ဟာ Language အမ်ဳိးအစားကို ၫႊန္းတာပါ။ Language အမ်ဳိးအစား (၁၂) မ်ဳိး လုပ္လို႔ရပါတယ္။ အဲဒါေတြက c-sharp, css, c, delphi, java, js, php, python, ryby, sql, vb, xml ပါ။ ကိုယ္ ျပခ်င္တဲ့ Language Code ေပၚ မူတည္ၿပီး class ကို ေရြးထည့္ေပးပါ။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

စာတစ္ပိုဒ္လံုးကို ကလစ္ႏွိပ္ႏိုင္ေအာင္ ျပဳလုပ္ျခင္း

Link Block Hover Effect

က်ေနာ္တို႔ ပံုမွန္အားျဖင့္ စာတစ္ပိုဒ္လံုးကို ကလစ္ႏွိပ္ႏိုင္ေအာင္ လုပ္ခ်င္ရင္ ဒီလို ပံုစံေတာ့ လုပ္လို႔ရမယ္။

Reduce your code.
12 Jul 2008

Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!

ဒီ ပံုစံ အေဟာင္းမွာ စာပုိဒ္တစ္ပုိဒ္လံုးမွာ စာလံုး ရွိတဲ့ ေနရာေတြမွာပဲ ကလစ္ႏွိပ္လို႔ ရပါတယ္။ တကယ္လို႔ တစ္ပိုဒ္လံုးမွာ ေနရာမေရြး ကလစ္ႏွိပ္ႏိုင္ေအာင္ ဘယ္လို လုပ္မလဲ။ အခု ဒီလုပ္ေဆာင္ခ်က္ကို က်ေနာ္တို႔ ဘယ္လုိ လုပ္မလဲဆိုတာ တင္ျပခ်င္ပါတယ္။ အခု ေအာက္မွာ ျမင္ရသလိုေပါ႔။ စာတစ္ပုိဒ္လံုး ႀကိဳက္တဲ့ ေနရာမွာ ကလစ္ႏွိပ္လို႔ ရႏိုင္ေအာင္ လုပ္နည္းကို တင္ျပခ်င္ပါတယ္။

Reduce your code.
12 Jul 2008

Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!

အဆင့္ (၁) စတုိင္ သက္မွတ္ျခင္း

ေအာက္ပါ CSS ကို Style Sheet မွာ သြားထည့္ေပးပါ။ Layout >> Edit HTML က ]]></b:skin> ရဲ႕ အေပၚနားမွာ ထည့္ေပးပါ။ ၿပီးရင္ Template ကို Save ေပးပါ။

အဆင့္ (၂) စကားစုကို လင့္ခ္ ျပဳလုပ္ျခင္း

ပို႔စ္ထဲမွာ လုပ္ခ်င္တာ ျဖစ္လို႔ Postings က New Post လုပ္ေပးပါ။ အထက္က ဥပမာအတုိင္း လိုခ်င္တယ္ ဆိုရင္ ေအာက္မွာျပထားတဲ့ Code ကို Post Editor ထဲ ကူးထည့္ၾကည့္လိုက္ပါ။ ဒီ ဥပမာကို ၾကည့္ၿပီး လုိသလို ျပင္သံုးႏိုင္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

မာတိကာ တစ္ခု ဖန္တီးျခင္း (JSon)

မာတိကာတစ္ခု လုပ္ၿပီး က်ေနာ္တို႔ ေနရာ သံုးေနရာမွာ သြားထားလို႔ ရပါတယ္။
(၁) Widget တစ္ခု အျဖစ္ Sidebar တြင္ ဖန္တီးျခင္း (Sidebar Widget)
(၂) Widget တစ္ခု အျဖစ္ Header ၏ ေအာက္တြင္ ဖန္တီးျခင္း (Header Widget)
(၃) ပို႔စ္တစ္ခု အျဖစ္ ဖန္တီးျခင္း (Post Widget)

ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ရေအာင္။

အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း

<br />
#toc {<br />
border: 0px solid #000000;<br />
background: #ffffff;<br />
padding: 5px;<br />
width:500px;<br />
margin:10px 0 20px 0;<br />
}<br />
.toc-header-col1, .toc-header-col2, .toc-header-col3 {<br />
background: #e0e0e0;<br />
color: #5d5d54;<br />
padding: 8px 5px 8px 5px;<br />
width: 300px;<br />
}<br />
.toc-header-col1 {<br />
width:300px;<br />
}<br />
.toc-header-col2 {<br />
width:75px;<br />
}<br />
.toc-header-col3 {<br />
width:125px;<br />
}<br />
.toc-header-col1 a:link, .toc-header-col1 a:visited, <br />
.toc-header-col2 a:link, .toc-header-col2 a:visited, <br />
.toc-header-col3 a:link, .toc-header-col3 a:visited {<br />
font-size:90%;<br />
color: #404040;<br />
text-decoration:none;<br />
}<br />
.toc-header-col1 a:hover, .toc-header-col2 a:hover, <br />
.toc-header-col3 a:hover {<br />
font-size:90%;<br />
text-decoration:underline;<br />
}<br />
<br />
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {<br />
padding-left: 5px;<br />
font-size:90%;<br />
}<br />
<br />
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {<br />
text-decoration: none;<br />
}

အဆင့္ (၂) Widget တစ္ခု ျပဳလုပ္ျခင္း

Sidebar Widget တစ္ခု အေနနဲ႔ လုပ္မယ္ဆိုရင္ ...

Template ကို Save ေပးပါ။ ေနာက္ၿပီး Layout >> Page Elements မွာ Add a page element ကို ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ေနာက္ၿပီး Text Box ထဲကို ေအာက္က Code ေတြ ကူးထည့္ၿပီး Save ေပးပါ။ Save မလုပ္ခင္ http://YOURBLOGURL.com ေနရာမွာ ကိုယ့္ရဲ႕ ဘေလာ့ဂ္ လိပ္စာကို ျပင္ဖို႔ မေမ့ပါနဲ႔။ ဒါဆို မာတိကာကို ေဖာ္ျပမယ့္ Sidebar Widget တစ္ခု ရပါၿပီ။

Header Widget တစ္ခု လုပ္ခ်င္တယ္ ဆိုရင္ေတာ့ ...

Edit HTML ထဲမွာ <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> ကို ရွာေပးပါ။ အတိအက် မတူတာေတာင္ အနီးစပ္ဆံုး တူတာ တစ္ခု ေတြ႕ပါလိမ့္မယ္။ ေတြ႕ၿပီဆိုရင္ ေအာက္မွာ ျပထားတဲ့ အနီေရာင္ ေနရာအတုိင္း ျပင္ေပးပါ။ Template ကို Save ေပးပါ။

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

က်ေနာ္တို႔ လုပ္ခ်င္တဲ့ ပံုစံက Sidebar မွာ ရွိတဲ့ Show table of contents ဆိုတဲ့ စာကုိ ကလစ္ႏွိပ္လိုက္ရင္ Header နဲ႔ ပို႔စ္နဲ႔ ၾကားမွာ မာတိကာ ေပၚခ်င္တာပါ။ ဒါေၾကာင့္ Layout >> Page Elements မွာ Sidebar က Add a page element ကို ကလစ္ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ၿပီးရင္ Text Box ထဲမွာ ေအာက္က Code ကို ထည့္ေပးပါ။ http://YOURBLOGURL.com ဆိုတဲ့ ေနရာမွာ ကိုယ့္ရဲ႕ ဘေလာ့ဂ္ လိပ္စာ ျပင္ဖို႔ မေမ့ပါနဲ႔။ ၿပီးရင္ Save ေပးပါ။

ေနာက္ၿပီး Header ရဲ႕ ေအာက္မွာလဲ Add a page element ေတြ႕ပါလိမ့္မယ္။ ကလစ္ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ေနာက္ၿပီး Text Box ထဲမွာ <div id="toc"></div> ကို ထည့္ၿပီး Save ေပးပါ။ ဒါဆို မာတိကာ ပါတဲ့ Header Widget တစ္ခု ဖန္တီးလို႔ ၿပီးပါၿပီ။

Post Widget တစ္ခု ဖန္တီးမယ္ ဆိုရင္ ...

Template ကို Save လိုက္ပါ။ ၿပီး Posting မွာ New Post ယူလိုက္ပါ။ ၿပီးရင္ Post Editor မွာ ေအာက္က Code ေတြကို ကူးထည့္ေပးပါ။ http://YOURBLOGURL.com ဆိုတဲ့ ေနရာမွာ ကိုယ့္ရဲ႕ ဘေလာ့ဂ္ လိပ္စာ ျပင္ဖို႔ မေမ့ပါနဲ႔။ ၿပီးရင္ Publish လုပ္လိုက္ပါ။

အထက္မွာ ေျပာထားတဲ့ သံုးမ်ဳိးထဲက ကိုယ္ႀကိဳက္တဲ့ တစ္မ်ဳိးကို ေရြးသံုးႏိုင္ပါတယ္။ အဆင္ေျပဆံုးကေတာ့ Sidebar Widget ပါ။ ပို႔စ္မ်ားရင္ မ်ားသလို တင္ရတာ ေလးေနတတ္ပါတယ္။ ကလစ္ႏွိပ္မွ မာတိကာ တည္ေဆာက္တာကို စလုပ္မယ္ဆိုရင္ ဘေလာ့ဂ္တက္တာကို သိပ္မေႏွးေစေတာ့ပါဘူး။ ဘေလာ့ထဲ စ၀င္ကတည္းက မာတိကာကို ေဖာ္ျပထားခ်င္တယ္ ဆိုရင္ေတာ့ ဒီစာပုိဒ္ရဲ႕ အထက္က Code ေတြကို ကူးၿပီး Layout >> Page Elements >> Add a page element >> HTML/Javascript ကို သြားထည့္လိုက္႐ံုပါပဲ။ ဘေလာ့ဂ္ တက္တက္ခ်င္း မာတိကာကို မေဖာ္ျပသင့္ပါဘူး။ အဓိကက ဘေလာ့ဂ္တက္တာ အရမ္းေႏွးသြားပါ႔မယ္။

ဒီ မာတိကာရဲ႕ အားသာခ်က္က ေကာ္လံ သံုးခု ခြဲၿပီး ျပပါတယ္။ ပို႔စ္ေခါင္းစဥ္၊ တင္တဲ့ ရက္စြဲနဲ႔ Label ဆိုၿပီး ေကာ္လံ သံုးခု ခြဲထားတယ္။ Post Title (သိုု႔) Date ကို ကလစ္ႏွိပ္လိုက္ရင္ ပို႔စ္ကို ႀကီးစဥ္ငယ္လိုက္ (သုိ႔) ငယ္စဥ္ႀကီးလိုက္ စီေပးပါတယ္။ မာတိကာ ထဲက ပို႔စ္တစ္ခုမွာ ပါတဲ့ Label ကုိ ကလစ္ႏွိပ္လိုက္ရင္လည္း ႏွိပ္လိုက္တဲ့ Label ကိုပဲ ေရြးၿပီး ျပေပးပါတယ္။ မာတိကာ လုပ္နည္းေတြ အမ်ားႀကီး ရွိေပမယ့္ ဒီနည္းဟာ လုပ္ေဆာင္ခ်က္ အစံုဆံုးပါပဲ။ စမ္းသပ္ၾကည့္ပါ။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

ရက္စြဲအား ျပကၡဒိန္ပံုစံျဖင့္ ေဖာ္ျပျခင္း

က်ေနာ္တို႔ ဘေလာ့ဂ္ အမ်ားစုမွာ ပံုမွန္ အားျဖင့္ 01 Aug 2008 ဆိုၿပီး ခပ္႐ိုး႐ိုးပဲ ရက္စြဲကို ျပတတ္ပါတယ္။ အထက္က ပံုအတိုင္း စတိုင္ခပ္ဆန္းဆန္းနဲ႔ ျပကၡဒိန္ ပံုစံအတုိင္း ျပခ်င္တယ္ဆိုရင္ က်ေနာ္ ေအာက္မွာ တင္ျပထားတဲ့ ပံုစံအတုိင္း လိုက္လုပ္ေပးရင္ ျဖစ္ႏိုင္ပါတယ္။ အရင္ဆံုး Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။

အဆင့္ (၁) စတုိင္ သက္မွတ္ျခင္း

အထက္က CSS ကို Style Sheet မွာ ထည့္ေပးပါ။

အဆင့္ (၂) JS Code ထည့္ျခင္း

အထက္က Code ကို </head> ရဲ႕ အထက္နားမွာ ထည့္ေပးပါ။
တကယ္လို႔ ကိုယ့္ဖာသာ Hosting လုပ္ၿပီး တင္ခ်င္တယ္ ဆိုရင္ ဒီမွာ ကလစ္ႏွိပ္ၿပီး Download ယူပါ။

အဆင့္ (၃) Widget တြင္ Code ျပင္ျခင္း

<b:if cond='data:post.dateHeader'> ကို ရွာေပးပါ။ ရွာေတြ႕ၿပီဆိုရင္ <b:if cond='data:post.dateHeader'></div> ၾကားမွာ <h2 class=’date-header’><data:post.dateHeader/></h2> ကို အစားထုိးေပးပါ။

<b:if cond='data:post.dateHeader'>

</b:if>

အနီေရာင္နဲ႔ ျမင္ရတာဟာ အသစ္ျပင္ ထည့္ေပးထားတဲ့ Code ပါ။ တခ်ဳိ႕ တန္းပလိတ္ေတြမွာ ပို႔စ္တင္ ရက္စြဲကို ေအာက္ေျခမွာ ထားထားတတ္ပါတယ္။ တကယ္လို႔ ပို႔စ္ ေအာက္ေျခမွာ ရက္စြဲ ထားထားတယ္ ဆိုရင္ <b:if cond='data:post.dateHeader'> ကို <div class='post-footer'> ရဲ႕ ေအာက္နားမွာ ေတြ႕ရပါလိမ့္မယ္။ အဲဒီလို ေအာက္ေျခမွာ ထားထားတယ္ဆိုရင္ ခုန ျပင္ထားတဲ့

ကို <div class='post-body'> ရဲ႕ အထက္နားေလး တင္ေပးပါ။ <div class='post-body'> ကို <div class='post-footer'> ရဲ႕ အေပၚနားမွာ ရွာေတြ႕ႏိုင္ပါတယ္။ ၿပီးၿပီဆိုရင္ Template ကို Save ေပးပါ။

အဆင့္ (၄) Date Format ေျပာင္းေပးျခင္း

Settings >> Formatting ထဲမွာ Date Header Format ဆိုတာ ေတြ႕ပါလိမ့္မယ္။ Date Header Format ကို YYYY-MM-DD အျဖစ္ေျပာင္းေပးပါ။ ခုနစ္၊ လ၊ ရက္ရဲ႕ ၾကားမွာ “-” ခံထားတဲ့ ပံုစံကို ေျပာင္းေပးရပါ႔မယ္။ ဒါ အေရးႀကီးပါတယ္။ တကယ္လို႔ အဲဒီလုိ ေျပာင္းမေပးရင္ အလုပ္လုပ္မွာ မဟုတ္ပါဘူး။ Setting ေျပာင္းၿပီးသြားရင္ Save လုပ္ဖို႔ မေမ့ပါနဲ႔ဦး။

ဒီအဆင့္ ေလးဆင့္ လုပ္ၿပီး သြားၿပီဆုိရင္ က်ေနာ္တို႔ လိုခ်င္တဲ့ စတိုင္က်က် ရက္စြဲဒီဇိုင္းေလးကို ရၿပီ ျဖစ္ပါတယ္။ စမ္းၾကည့္ပါဦး။ အဆင္မေျပရင္ ကြန္းမန္႔မွာ ေျပာခဲ့ေပးပါ။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

Ripway ျဖင့္ File Hosting ျပဳလုပ္ျခင္း

က်ေနာ္တို႔ Ripway မွာ File ေတြ တင္ဖို႔ ဆိုရင္ ပထမဆံုး သူ႔ရဲ႕ Site ျဖစ္တဲ့ www.ripway.com ကို သြားရပါမယ္။ အခု စာဖတ္သူဟာ Ripway ကို တစ္ခါမွ မသံုးဖူးေသးတဲ့ လူတစ္ေယာက္အေနနဲ႔ ယူဆၿပီး က်ေနာ္ အေသးစိတ္ ေျပာသြားေပးပါ႔မယ္။ က်ေနာ္ အခု တင္ျပသြားမယ့္ အဆင့္ဆင့္ကို အတူတူ လုိက္လုပ္သြားေပးပါ။ ဒါဆို စာဖတ္သူအေနနဲ႔ File Hosting ဘယ္လို လုပ္သလဲ ဆိုတာ နားလည္သြားပါလိမ့္မယ္။ ကဲ က်ေနာ္တို႔ ေလ့က်င့္ခန္း စၾကရေအာင္။

အဆင့္ (၁) Ripway ကုိ ကလစ္ႏွိပ္ၿပီး ၀င္ေပးပါ။

အဆင့္ (၂) Sign Up လုပ္ျခင္း
စာဖတ္သူဟာ User အသစ္ ျဖစ္တဲ့အတြက္ သူတို႔ဆီမွာ Account အသစ္တစ္ခု ယူရပါ႔မယ္။ ေအာက္မွာ ျပထားတဲ့ ပံုက Sign Up ဆိုတာကုိ ကလစ္ႏွိပ္ေပးပါ။

ဒါဆို ေအာက္မွာ ျပထားတဲ့ ပံုအတိုင္း ျဖည့္စရာ ေဖာင္တစ္ခု က်လာပါမယ္။

အဲဒီမွာ ကိုယ္ ေပးခ်င္တဲ့နာမည္၊ စကား၀ွက္၊ အီးေမးလိပ္စာ၊ ႏိုင္ငံ၊ ေမြးႏွစ္ စသျဖင့္ ထည့္ေပးပါ။ ျဖည့္ၿပီးရင္ေတာ့ Sign Up Now! ဆိုတဲ့ ခလုတ္ကို ႏွိပ္ေပးပါ။ Account အသစ္ ဖန္တီးတာ အဆင္ေျပသြားရင္ေတာ့ ေနာက္ တစ္မ်က္ႏွာ တက္လာၿပီး ေအာက္က ပံုပါအတိုင္း အဲဒီေနရာမွာ ခုနက ျဖည့္ထားတဲ့ နာမည္နဲ႔ စကား၀ွက္ကို ျဖည့္ၿပီး Log In ခလုတ္ကို ႏွိပ္ေပးပါ။

ဒါဆို ေနာက္ထပ္ စာမ်က္ႏွာ တစ္မ်က္ႏွာကို တက္လာပါမယ္။ ဒါဆို က်ေနာ္တို႔ရဲ႕ Account ထဲကို ၀င္သြားပါၿပီ။ ဒီအဆင့္ အထိဟာ Account အသစ္ လုပ္တဲ့ လူေတြအတြက္ပဲ ၾကံဳရမယ့္ ေတြ႕ရမယ့္ စာမ်က္ႏွာေတြပါ။ အခု ေနာက္ပိုင္း တင္ျပမယ့္ အဆင့္ေတြကေတာ့ Account ရွိၿပီးသား လူေတြနဲ႔လည္း သက္ဆိုင္သြားပါၿပီ။ Account ရွိၿပီး လူက www.ripway.com ထဲ ၀င္တာနဲ႔ Login လုပ္ၿပီးၿပီ ဆိုရင္ အခု တင္ျပမယ့္ အဆင့္ကို တန္းေရာက္သြားပါၿပီ။ က်ေနာ္ Hosting ဘယ္လို လုပ္သလဲ ဆက္ေဆြးေႏြးၾကရေအာင္ Login လုပ္ၿပီး တက္လာတဲ့ စာမ်က္ႏွာရဲ႕ အေပၚပိုင္းမွာ ေအာက္က ပံုလို ေတြ႕ပါလိမ့္မယ္။ ေတြ႕ၿပီဆိုရင္ My Files ကို ကလစ္ႏွိပ္ၿပီး ၀င္ေပးပါ။

ေနာက္ တစ္မ်က္ႏွာရဲ႕ အလယ္နားကို ၾကည့္ေပးပါ။ ေအာက္က ပံုလို ေတြ႕ရပါလိမ့္မယ္။ အဲဒီမွာ အစိမ္းနဲ႔ ၀ိုင္းထားတဲ့ Upload files ဆိုတာ ေတြ႕ပါလိမ့္မယ္။ ေနာက္ပိုင္း က်ေနာ္တို႔ Files ေတြ တင္ခ်င္တိုင္းမွာ အဲဒီ Upload files ကုိ ႏွိပ္ၿပီး တင္ပါမယ္။ ကဲ က်ေနာ္တို႔ အစမ္းတင္ၾကည့္ရေအာင္ဗ်ာ။ Upload files ကုိ ကလစ္ႏွိပ္လိုက္ပါ။

ေနာက္ တစ္မ်က္ႏွာရဲ႕ အလယ္နားမွာ ေအာက္ကပံုလို ေတြ႕ပါလိမ့္မယ္။ အဲဒီမွာ Browse ခလုတ္ကို ႏွိပ္ၿပီး ကိုယ့္ ကြန္ျပဴတာထဲက ဖိုင္တစ္ဖိုင္ကုိ ေရြးေပးပါ။ ေရြးၿပီးၿပီ ဆိုရင္ ေအာက္နားက Upload ကို ႏွိပ္လိုက္ရင္ သူ စၿပီး upload လုပ္ယူသြားပါ႔မယ္။ Ripway က ဖုိင္ ၁၀ ဖိုင္ တၿပိဳင္တည္း Upload လုပ္ခြင့္ ျပဳထားတာေၾကာင့္ ဆႏၵရွိရင္ တၿပိဳင္တည္း ၁၀ ဖိုင္ တင္လို႔ရပါတယ္။

က်ေနာ္တို႔ Browse လုပ္ထားတဲ့ ဖိုင္ကို Upload လုပ္ၿပီးၿပီဆုိရင္ ခုနက အေပၚဆံုး Browse ဆိုတဲ့ ခလုတ္ရဲ႕ အထက္နားမွာ ေအာက္က ပံုလို saved ဆိုၿပီး ေပၚလာပါလိမ့္မယ္။ အဲဒီမွာ စာဖတ္သူ Upload လုပ္တဲ့ ဖုိင္နာမည္ ေပၚပါလိမ့္မယ္။

က်ေနာ္တို႔ တင္ထားတဲ့ ဖိုင္က ဘယ္နားမွာ ရွိလဲဆိုတာ ဘယ္လို သိႏိုင္မလဲ။ ဒါအေရးႀကီးပါတယ္။ က်ေနာ္တို႔ လိပ္စာသိမွ ေခၚသံုးလို႔ရမယ္။ လိပ္စာ သိႏိုင္ဖုိ႔အတြက္ အေပၚက Menu Bar မွာရွိတဲ့ My Files ကို ကလစ္ႏွိပ္လိုက္ပါ။ ဒါဆို က်ေနာ္တို႔ ခုနက တင္ထားတဲ့ ဖိုင္ကို ေတြ႕ရပါလိမ့္မယ္။ ေအာက္က ပံုမွာဆိုရင္ က်ေနာ္ တင္ထားတဲ့ ဖုိင္ေလးကို ျမင္ေနရပါတယ္။

အဲဒီ ဖိုင္နာမည္ရဲ႕ ေအာက္မွာ Direct Link: http://h1.ripway.com/.../WPPremiumBlack.zip ဆိုၿပီး ေတြ႕ပါလိမ့္မယ္။ အဲဒါ က်ေနာ္တို႔ တင္ထားတဲ့ ဖုိင္ရဲ႕ လိပ္စာပါ။ အဲဒီလိပ္စာကို အလြယ္တကူ ကူးယူႏိုင္ဖုိ႔ လင့္ခ္အေပၚ Mouse Pointer ကို တင္ၿပီး Right Click ႏွိပ္လိုက္ၿပီး Copy Link Location ကို ေရြးေပးပါ။ ေနာက္ ႀကိဳက္တဲ့ေနရာမွာ Paste လုပ္လိုက္႐ံုပါပဲ။ က်ေနာ္တို႔ တင္ထားတာက mp3 ဖိုင္ဆိုရင္ အဲဒီ လိပ္စာကို ၫႊန္ၿပီး Media Player နဲ႔ သီခ်င္း ဖြင့္လို႔ရပါၿပီ။ တျခားလူ တစ္ေယာက္ေယာက္ကို မွ်ေ၀ခ်င္တယ္ ဆိုရင္လည္း အဲဒီလိပ္စာေလး ေပးလိုက္႐ံုနဲ႔ သူ႔ဖာသာ Download ယူလို႔ ရသြားပါၿပီ။ တကယ္လို႔ ကိုယ့္ရဲ႕ ဖိုင္ေတြကို Folder သပ္သပ္စီ ခြဲၿပီး သိမ္းခ်င္သပါ႔ ဆိုရင္လည္း အထက္ကပံုရဲ႕ ဘယ္ဘက္ အေပၚေထာင့္က ကြက္လပ္မွာ နာမည္ျဖည့္ၿပီး Create Subfolder ခလုတ္ကို ႏွိပ္လိုက္ရင္ပဲ Folder အသစ္တစ္ခု ဖြဲ႕စည္းၿပီး ျဖစ္ပါလိမ့္မယ္။ မသံုးခ်င္ေတာ့လို႔ ထြက္မယ္ဆိုရင္လည္း စာမ်က္ႏွာရဲ႕ ဘယ္ဘက္ အေပၚေထာင့္နားက Log Off ဆိုတာနဲ႔ ထြက္ဖို႔ မေမ့ပါနဲ႔ဦး။

ကဲ ... ဒီေလာက္ဆိုရင္ Ripway နဲ႔ File Hosting ဘယ္လို လုပ္သလဲ ဆိုတာ သိေလာက္ နားလည္ေလာက္ပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။

ဒီဘေလာ့ဂ္ဟာ တကယ္ပဲ အသံုးတည့္ပါသလား။
	တည့္ပါတယ္
	မတည့္ဘူး
	ထင္တာပဲ
	မထင္ပါဘူး
	မေျပာတတ္ဘူး

pollcode.com free polls

How to blog

Yahoo Pipe ျဖင့္ Blog list တစ္ခု ဖန္တီးျခင္း

Make a Poll using Vizu

ဆက္ႏြယ္ေသာပို႔စ္စာရင္း ထည့္သြင္းျခင္း (By Labels)

Blogumus: လည္ပတ္ေနေသာ Label မ်ား ဖန္တီးျခင္း

မဲေပး႐ံုတစ္ခု တည္ေဆာက္ျခင္း (PollCode)

ဘေလာ့ဂ္တစ္ခု ဖန္တီးျခင္း

Custom Domain အသံုးျပဳႏုိင္ရန္ ျပင္ဆင္ျခင္း

မာတိကာ တစ္ခု ဖန္တီးျခင္း (AJAX)

Label မ်ားကို Drop Down ပံုစံျဖင့္ ေဖာ္ျပျခင္း

ေထာင့္လံုး စတုဂံျဖင့္ တန္းပလိတ္ကို တန္ဆာဆင္ျခင္း

ဘေလာ့ဂ္ေပၚမွ GTalk ျဖင့္ ဆက္သြယ္ႏိုင္ရန္

ပို႔စ္ေရးသူ၏ Comment မ်ားအား သိသာေစျခင္း

Comment ေတြကို နံပါတ္စဥ္ ထိုးရေအာင္

ပံုကို တစ္ေနရာတည္းတြင္ အေသ ေပၚေနႏိုင္ရန္

Image Rollover with Opacity

ေနာက္ခံပံုျဖင့္ စာပုိဒ္ ဖန္တီးျခင္း

ပံုတစ္ပံုကို မွိန္ေအာင္ ျပဳလုပ္ျခင္း

စာလံုးကို မွိန္ေအာင္ ျပဳလုပ္ျခင္း

Syntax Hightlighter ျဖင့္ Code မ်ားကို Post တြင္ ေဖာ္ျပျခင္း

စာတစ္ပိုဒ္လံုးကို ကလစ္ႏွိပ္ႏိုင္ေအာင္ ျပဳလုပ္ျခင္း

မာတိကာ တစ္ခု ဖန္တီးျခင္း (JSon)

ရက္စြဲအား ျပကၡဒိန္ပံုစံျဖင့္ ေဖာ္ျပျခင္း

Ripway ျဖင့္ File Hosting ျပဳလုပ္ျခင္း

Blog Archive

Labels

က်န္းခန္႔သာလို႔ မာပါစ

Blogging Tools

သိခ်င္တာေလး ေျပာခဲ့ပါ