Yahoo Pipe ျဖင့္ Blog list တစ္ခု ဖန္တီးျခင္း
Acknowledgement :
က်ေနာ္ ထံုးစံအတိုင္း ေလ့က်င့္ခန္း တစ္ခုနဲ႔ ရွင္းျပခ်င္ပါတယ္။ မရွင္းျပခင္ သိထားသင့္တာ တခ်ဳိ႕က
- အခု ရွင္းျပမယ့္ 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
ေနာက္ ဘေလာ့ဂ္တစ္ခု ထပ္ထည့္ခ်င္ေသးရင္ 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
ဆက္ႏြယ္ေသာပို႔စ္စာရင္း ထည့္သြင္းျခင္း (By Labels)
အရင္က Hoctro ကေန ဆက္ႏြယ္တဲ့ ပို႔စ္စာရင္းကို Label နဲ႔ စစ္ထုတ္ၿပီး ေဖာ္ျပႏုိင္ေအာင္ လုပ္ထားေပးတာ ရွိပါတယ္။ သူ႔ရဲ႕ အားနည္းခ်က္က ဘေလာ့ဂ္တစ္ခု ေျပာင္းတာနဲ႔ လိုက္ေျပာင္းလဲ ေပးရတယ္။ တခ်ဳိ႕ ေနရာေလးေတြ ေပါ႔။ နည္းနည္းပါးပါး ဆုိေပမယ့္ ဘာမွ မသိတဲ့လူအတြက္ေတာ့ အလုပ္႐ႈပ္တာေပါ႔။ အခု JackBook.com က ဘာမွ ျပင္စရာ မလိုဘဲ ကိုယ့္ရဲ႕ တန္းပလိတ္ထဲမွာ တန္းကူးထည့္႐ံုနဲ သံုးလို႔ရတဲ့ Code အျဖစ္ ျပင္ဆင္ထားတာမို႔ အင္မတန္မွ လြယ္ကူသြားပါတယ္။ လုပ္ရမယ့္ အဆင့္အေနနဲ႔လည္း ႏွစ္ဆင့္ပဲ က်န္ေတာ့တယ္။ ကဲ က်ေနာ္တို႔ စၿပီး လုပ္ၾကည့္ရေအာင္။
အဆင့္ (၁)
Layout >> Edit HTML ထဲမွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။
ၿပီးရင္ <data:post.body/> ကို ရွာေပးပါ။ တကယ္လို႔ Peekaboo ပို႔စ္ေခါက္တဲ့ လုပ္ေဆာင္ခ်က္ ထည့္ထားရင္ေတာ့ <data:post.body/> ဆိုတာ ႏွစ္ခု ေတြ႕ပါလိမ့္မယ္။
အဆင့္ (၂)
<data:post.body/> တစ္ခုတည္းပဲ ေတြ႕တယ္ဆိုရင္ အဲဒီစာေၾကာင္းရဲ႕ေအာက္နားမွာ ေအာက္မွာ ျပထားတဲ့ Code ကို ထည့္ေပးလိုက္႐ံုပါပဲ။
<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 မ်ား ဖန္တီးျခင္း
မဲေပး႐ံုတစ္ခု တည္ေဆာက္ျခင္း (PollCode)
မဲ႐ံုေလး လုပ္ခ်င္ရင္ 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 မွာ ေဖာ္ျပတဲ့ အခါ မူလ ေရးထားတဲ့ အဂၤလိပ္လိုပဲ ေပၚမွာပါ။ ျမန္မာလို မေပၚပါဘူး။
ဘာပဲျဖစ္ျဖစ္ အခုလို အလြယ္တကူနဲ႔ ဖန္တီးလို႔ ရတဲ့ မဲ႐ံုေလးကို သေဘာက်မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ နမူနာေလး တစ္ခု လုပ္ျပထားလိုက္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။
ဘေလာ့ဂ္တစ္ခု ဖန္တီးျခင္း
Custom Domain အသံုးျပဳႏုိင္ရန္ ျပင္ဆင္ျခင္း
Blogger.com မွာ Log in လုပ္လိုက္ပါ။
ကိုယ္ နာမည္ေျပာင္းခ်င္တဲ့ ဘေလာ့ဂ္ရဲ႕ Setting ကို ၀င္လုိက္ပါ။
Host Name : yourname (e.g. pikay)
Host Address : ghs.google.com.
Host Type : CNAME
ဆိုတာေလးေတြ ျပင္ေပးပါ။
မာတိကာ တစ္ခု ဖန္တီးျခင္း (AJAX)
မာတိကာ လုပ္ႏိုင္တဲ့ နည္းေတြ အမ်ားႀကီး ရွိပါတယ္။ အဲဒီ အထဲကမွ တစ္ခုကို တင္ျပခ်င္ပါတယ္။ အခု တင္ျပမယ့္ မာတိကာ လုပ္နည္းဟာ ဘေလာ့ဂ္တစ္ခုရဲ႕ မာတိကာတင္မကဘဲ လိုအပ္ရင္ ဘေလာ့ အမ်ားႀကီးအတြက္ တစ္ေနရာတည္းမွာ မာတိကာေတြ လုပ္ႏိုင္ပါတယ္။ ေနာက္ၿပီး အခု တင္ျပမယ့္ မာတိကာ လုပ္နည္းရဲ႕ အားသာခ်က္ဟာ ပို႔စ္တစ္ခုခ်င္းစီကို 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 ကုိ ကလစ္ႏွိပ္ပါ။
Line (29) >> http://knowhow.myanmarbloggers.org ေနရာမွာ ကိုယ့္ရဲ႕ လိပ္စာ ထည့္ေပးပါ။
Line (29) >> max-results=10 ေနရာမွာ ပို႔စ္ ၁၀၀ ခုပဲ ျပခ်င္ရင္ 100 လုိ႔ ျပင္ေပးပါ။ အကုန္ ျပခ်င္တယ္ဆိုရင္ေတာ့ 999 လို႔ ျပင္ေပးပါ။
Line (34) >> How To BLOG ေနရာမွာ ကိုယ့္ ဘေလာ့ဂ္ရဲ႕ နာမည္ ထည့္ေပးပါ။
ဒါ ဘေလာ့ဂ္တစ္ခုအတြက္ မာတိကာ ဘယ္လို လုပ္မလဲဆိုတာ တင္ျပတာပါ။ အဆင္ေျပပါေစဗ်ာ။
Label မ်ားကို Drop Down ပံုစံျဖင့္ ေဖာ္ျပျခင္း
Line 8 >> width:200px မွာ ကိုယ္နဲ႔ အဆင္ေျပမယ့္ Width ကို ျပင္ေပးပါ။
Line 9 >> Labels ဆိုတဲ့ေနရာမွာ ကိုယ္ ေပၚေနစခ်င္တဲ့ စာေၾကာင္း ထည့္ေပးပါ။
ဒါဆို က်ေနာ္တို႔ လိုခ်င္တဲ့ Drop Down Label List ရပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။
ေထာင့္လံုး စတုဂံျဖင့္ တန္းပလိတ္ကို တန္ဆာဆင္ျခင္း
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;
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}
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>
ျဖစ္ေလ့ ျဖစ္ထ ရွိတဲ့ ျပႆနာ တစ္ခု ရွိပါတယ္။ တကယ္လို႔ ေအာက္က ပံုလို ကြက္တိကြက္ၾကား ေပၚေနရင္ေတာ့ .spiffyfg ကို ရွာၿပီး အနီေရာင္ စာေၾကာင္းကို ျဖည့္ေပးပါ။
top margin နဲ႔ bottom margin ကို ဆြဲညိႇလိုက္တဲ့ သေဘာပါ။
<!-- Paste Part 1 here -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id=' ........
<b:widget id=' ........
</b:section>
<!-- Paste Part 2 here -->
</div>
ဒါဆိုရင္ က်ေနာ္တို႔ ေထာင့္လံုးနဲ႔ သပ္သပ္ရက္ရက္ ရွိလွတဲ့ Template တစ္ခုကို ပိုင္ဆုိင္ႏိုင္ပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။
ဘေလာ့ဂ္ေပၚမွ GTalk ျဖင့္ ဆက္သြယ္ႏိုင္ရန္
ပို႔စ္ေရးသူ၏ Comment မ်ားအား သိသာေစျခင္း
ေနာက္ၿပီး ဒီပို႔စ္မွာပဲ ကြန္းမန္႔ေတြကို နံပါတ္စဥ္ တပ္ဖုိ႔ပါ တခါတည္း လုပ္ေပးထားပါတယ္။ တကယ္လို႔ စာေရးသူ ကြန္းမန္႔ကို HighLight မလုပ္ခ်င္ဘဲ နံပါတ္စဥ္တပ္႐ံု သက္သက္ပဲ လုပ္ခ်င္တယ္ ဆိုရင္ေတာ့ ဒီမွာ သြားဖတ္ပါ။ အခု ဒီပို႔စ္က ေျပာထားတဲ့ အတိုင္း လုပ္လုိက္ရင္ေတာ့ နံပါတ္စဥ္ တပ္ၿပီးသား ျဖစ္သလို စာေရးသူ ကြန္းမန္႔ကိုလည္း Highlight လုပ္ၿပီးသား ရပါလိမ့္မယ္။ ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္း စဖို႔ Layout >> Edit HTML ကို ဖြင့္ၿပီး Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါဗ်ာ။
အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း
ဒါက နံပါတ္စဥ္ ေပၚဖို႔ အတြက္ CSS ပါ။
အဆင့္ (၂) Widget တြင္ ျပင္ဆင္ ျဖည့္စြပ္ျခင္း
<b:includable id='comments' var='post'> ကို ရွာေပးပါ။ သူနဲ႔ မနီးမေ၀းမွာ <dl id='comments-block'> နဲ႔ စတဲ့ စာပိုဒ္ ရွိပါတယ္။ ေအာက္က စာပိုဒ္နဲ႔ အနီးစပ္ဆံုး ခပ္ဆင္ဆင္ ရွိပါလိမ့္မယ္။
ေတြ႕ၿပီ ဆုိရင္ေတာ့ အဲဒီ စာတစ္ပိုဒ္လံုးကို ေအာက္မွာ ျပထားတဲ့ Code နဲ႔ အစားထုိးေပးပါ။
ဟုတ္ကဲ့။ ၿပီးၿပီ ဆိုရင္ေတာ့ Template ကို Save လုပ္လိုက္ပါ။ က်ေနာ္တို႔ လိုခ်င္တာ လုပ္လို႔ ၿပီးပါၿပီ။ တစ္ခ်က္ေလာက္ ဘေလာ့ဂ္ကို ေခၚၾကည့္ပါဦး။ အဆင္ေျပပါေစဗ်ာ။
Comment ေတြကို နံပါတ္စဥ္ ထိုးရေအာင္
အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း
အထက္ CSS ေတြကို Style Sheet မွာ သြားထည့္ေပးပါ။ <b:skin><![CDATA[ နဲ႔ ]]></b:skin> ၾကားကို Style Sheet လုိ႔ ေခၚပါတယ္။ သူတို႔ရဲ႕ ၾကား တစ္ေနရာရာမွာ အထက္က CSS ကို ထည့္ေပးပါ။
အဆင့္ (၂) Widget တြင္ ျပင္ဆင္ ျဖည့္စြပ္ျခင္း
<b:includable id='comments' var='post'> ကို ရွာေပးပါ။ သူနဲ႔ မနီးမေ၀းမွာ <dl id='comments-block'> နဲ႔ စတဲ့ စာပိုဒ္ ရွိပါတယ္။ အဲဒီ စာပိုဒ္ထဲမွာ ေအာက္မွာ ျပထားတဲ့ ေနရာေတြမွာ အနီေရာင္နဲ႔ Code ေတြကို ထည့္ေပးပါ။
<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>
ဟုတ္ကဲ့။ ၿပီးၿပီ ဆိုရင္ေတာ့ Template ကို Save လုပ္လိုက္ပါ။ က်ေနာ္တို႔ လိုခ်င္တာ လုပ္လို႔ ၿပီးပါၿပီ။ တစ္ခ်က္ေလာက္ ဘေလာ့ဂ္ကို ေခၚၾကည့္ပါဦး။ အဆင္ေျပပါေစဗ်ာ။
ပံုကို တစ္ေနရာတည္းတြင္ အေသ ေပၚေနႏိုင္ရန္
ဒီပံုကို က်ေနာ္တို႔ ပံုမွန္အားျဖင့္ ေပၚခ်င္တယ္ဆိုရင္ ဒီလို ေရးပါတယ္။
ကလစ္ႏွိပ္တာနဲ႔ တစ္ခုခုကို ၫႊန္းခ်င္ရင္ေတာ့ ဒီလို ေရးပါတယ္။
တစ္ေနရာတည္း အေသ ကပ္ေနေစခ်င္ရင္ေတာ့ စတိုင္ သက္မွတ္ေပးရပါမယ္။ ဒါဆုိ ဒီလို ျဖစ္သြားၿပီေပါ႔။
က်ေနာ္ရဲ႕ ဘေလာ့မွာ လုပ္ထားတာက သူ႔ဖာသာ ေနေနခ်ိန္မွာ မွိန္ေနၿပီး Mouse Pointer ေရာက္သြားရင္ လင္းလာပါတယ္။ အဲဒါ လုပ္ဖို႔ အတြက္ က်ေနာ္ ဒီေနရာမွာ class="linkopacity" ကို ထပ္ထည့္ေပးရပါမယ္။ ဒီ လုပ္ေဆာင္ခ်က္ အေသးစိတ္ကို ဒီမွာ သြားဖတ္ေစခ်င္တယ္။
ျပင္ႏိုင္မယ့္ဟာေလးေတြ နည္းနည္း ေျပာျပပါ႔မယ္။
bottom:5px; ေအာက္ဘက္ကေန 5px အကြာမွာ ရွိပါမယ္။ အေပၚမွာ ေပၚခ်င္တယ္ ဆိုရင္ေတာ့ top လို႔ ေရးပါမယ္။
right:5px; ညာဘက္ကေန 5 px ခြာပါ႔မယ္။ ဒီေနရာမွာ ေနာက္တစ္ပံု ထပ္တုိးခ်င္ရင္ သူ႔ရဲ႕ အရြယ္ေပၚမူတည္ၿပီး ေျပာင္းေပးပါ။ ဘယ္ဘက္မွာ ေပၚခ်င္ရင္ေတာ့ left လို႔ ေရးေပးပါ။
href="http://pikay.myanmarbloggers.org" ကလစ္ႏွိပ္ရင္ ေရာက္သြားမယ့္ လိပ္စာ။
title="Home" Mouse Pointer ပံုအေပၚ ေရာက္သြားရင္ Home ဆိုတဲ့ စာလံုးေပၚပါမယ္။ ေပၚခ်င္တဲ့ စာလံုးကို Home ေနရာမွာ ျပင္ထည့္ႏိုင္တယ္။
src="http://img528.imageshack.us/img528/5822/homeuv0.png" ေပၚခ်င္တဲ့ ပံုရဲ႕ လိပ္စာပါ။ Icon ေလးေတြကို http://www.iconarchive.com/ မွာ သြားရွာပါ။ အဲဒီမွာ အမ်ားႀကီး ရွိတယ္။
အဆင္ေျပပါေစဗ်ာ။
Image Rollover with Opacity
ေအာက္မွာ ျမင္ရတဲ့ 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" ဟာ အေၾကာင္းတစ္ခုခုေၾကာင့္ ပံု မေပၚခဲ့ဘူးဆိုရင္ ပံုအစား ေပၚဖို႔ စာကို သက္မွတ္ေပးတာပါ။
ဒါဆို နားလည္ေလာက္ၿပီလို႔ ေမွ်ာ္လင့္မိပါတယ္။ အဆင္ေျပပါေစဗ်ာ။
ေနာက္ခံပံုျဖင့္ စာပုိဒ္ ဖန္တီးျခင္း
Opacity: 0.5;
ေနာက္ခံ အမွိန္
စာလံုး နဂိုအတိုင္း
width : 200px; height: 159px; မွာ ပံု၏ အလ်ားအနံ ျဖစ္သည္။
opacity: .50; မွာ ပံု မူလပံုအား ၅၀% အလင္းက်န္ေအာင္ ျပဳလုပ္ျခင္း ျဖစ္သည္။
background:url မွာ မိမိ ထည့္လိုေသာ ပံု၏ လိပ္စာ ထည့္ရန္ ျဖစ္သည္။
color: black; မွာ ပံု မ်က္ႏွာစာတြင္ ေပၚမည့္ စာ၏ အေရာင္ ျဖစ္သည္။
ပံုတစ္ပံုကို မွိန္ေအာင္ ျပဳလုပ္ျခင္း
Opacity : 25,50,75,100
အထက္ပံုထဲမွာ ညာဘက္ဆံုးက ပံုဟာ မူရင္းပံုပါ။ Opacity ရဲ႕ တန္ဖိုးကို ေလွ်ာ့လိုက္တာနဲ႔ မွိန္မွိန္သြားတာ ေတြ႕ရပါလိမ့္မယ္။ မူရင္း Code က ဒီလုိပါ။
<img src="http://www.mandarindesign.com/images/v91.gif" style="FILTER: alpha(opacity=50); -moz-opacity: .5; opacity: .5" />
FILTER: alpha(opacity=50); -moz-opacity: .5; ဆိုတဲ့ Code ေတြဟာ IE Browser အတြက္ လုိအပ္ပါတယ္။ တကယ္လို႔ အဲဒီ Code မပါရင္ IE မွာ အေရာင္မွိန္တဲ့ အလုပ္ မလုပ္ပါဘူး။
တကယ္လို႔ Mozilla Firefox သံုးမယ္ဆုိရင္ opacity: .5; ဆိုတာနဲ႔တင္ လံုေလာက္ပါတယ္။ တကယ္လို႔ Firefox နဲ႔ Blogger ကို တင္ၿပီး ပို႔စ္ေရးရင္ FILTER: alpha(opacity=50); -moz-opacity: .5; ကို မလိုတာေၾကာင့္ အလိုအေလ်ာက္ ေဖ်ာက္ပစ္တတ္ပါတယ္။ ဒါဆို IE မွာ အလုပ္မလုပ္ေတာ့ပါဘူး။ Opacity ရဲ႕ တန္ဖိုးက 1.0 ထားရင္ေတာ့ မူလအတိုင္း ေပၚမွာျဖစ္ၿပီး တန္ဖုိးနည္းေလေလ မိွန္ေလေလပါ။ Opacity : 0 ဆိုရင္ေတာ့ အမွိန္လြန္ၿပီး လံုး၀ မေပၚေတာ့ပါဘူး။
စမ္းသပ္ရင္း လိုရာ ဖန္တီးႏိုင္ပါေစဗ်ာ။
စာလံုးကို မွိန္ေအာင္ ျပဳလုပ္ျခင္း
is beige then the
pullquote area that is beige
will be blended with 10% white...
Syntax Hightlighter ျဖင့္ Code မ်ားကို Post တြင္ ေဖာ္ျပျခင္း
က်ေနာ္တို႔ ေအာက္က ပံုစံအတိုင္း Code ကို ေဖာ္ျပခ်င္တယ္ ဆိုရင္ ....
ဇယားရဲ႕ အေပၚနားမွာ 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!
မာတိကာ တစ္ခု ဖန္တီးျခင္း (JSon)
မာတိကာတစ္ခု လုပ္ၿပီး က်ေနာ္တို႔ ေနရာ သံုးေနရာမွာ သြားထားလို႔ ရပါတယ္။
(၁) Widget တစ္ခု အျဖစ္ Sidebar တြင္ ဖန္တီးျခင္း (Sidebar Widget)
(၂) Widget တစ္ခု အျဖစ္ Header ၏ ေအာက္တြင္ ဖန္တီးျခင္း (Header Widget)
(၃) ပို႔စ္တစ္ခု အျဖစ္ ဖန္တီးျခင္း (Post Widget)
ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ရေအာင္။
ေနာက္ၿပီး Header ရဲ႕ ေအာက္မွာလဲ Add a page element ေတြ႕ပါလိမ့္မယ္။ ကလစ္ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ေနာက္ၿပီး Text Box ထဲမွာ <div id="toc"></div> ကို ထည့္ၿပီး Save ေပးပါ။ ဒါဆို မာတိကာ ပါတဲ့ Header Widget တစ္ခု ဖန္တီးလို႔ ၿပီးပါၿပီ။
Template ကို Save လိုက္ပါ။ ၿပီး Posting မွာ New Post ယူလိုက္ပါ။ ၿပီးရင္ Post Editor မွာ ေအာက္က Code ေတြကို ကူးထည့္ေပးပါ။ http://YOURBLOGURL.com ဆိုတဲ့ ေနရာမွာ ကိုယ့္ရဲ႕ ဘေလာ့ဂ္ လိပ္စာ ျပင္ဖို႔ မေမ့ပါနဲ႔။ ၿပီးရင္ Publish လုပ္လိုက္ပါ။
ရက္စြဲအား ျပကၡဒိန္ပံုစံျဖင့္ ေဖာ္ျပျခင္း
က်ေနာ္တို႔ ဘေလာ့ဂ္ အမ်ားစုမွာ ပံုမွန္ အားျဖင့္ 01 Aug 2008 ဆိုၿပီး ခပ္႐ိုး႐ိုးပဲ ရက္စြဲကို ျပတတ္ပါတယ္။ အထက္က ပံုအတိုင္း စတိုင္ခပ္ဆန္းဆန္းနဲ႔ ျပကၡဒိန္ ပံုစံအတုိင္း ျပခ်င္တယ္ဆိုရင္ က်ေနာ္ ေအာက္မွာ တင္ျပထားတဲ့ ပံုစံအတုိင္း လိုက္လုပ္ေပးရင္ ျဖစ္ႏိုင္ပါတယ္။ အရင္ဆံုး Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။
အထက္က CSS ကို Style Sheet မွာ ထည့္ေပးပါ။
အထက္က Code ကို </head> ရဲ႕ အထက္နားမွာ ထည့္ေပးပါ။
တကယ္လို႔ ကိုယ့္ဖာသာ Hosting လုပ္ၿပီး တင္ခ်င္တယ္ ဆိုရင္ ဒီမွာ ကလစ္ႏွိပ္ၿပီး Download ယူပါ။
ဒီအဆင့္ ေလးဆင့္ လုပ္ၿပီး သြားၿပီဆုိရင္ က်ေနာ္တို႔ လိုခ်င္တဲ့ စတိုင္က်က် ရက္စြဲဒီဇိုင္းေလးကို ရၿပီ ျဖစ္ပါတယ္။ စမ္းၾကည့္ပါဦး။ အဆင္မေျပရင္ ကြန္းမန္႔မွာ ေျပာခဲ့ေပးပါ။ အဆင္ေျပပါေစဗ်ာ။
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 ဘယ္လို လုပ္သလဲ ဆိုတာ သိေလာက္ နားလည္ေလာက္ပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။
Title Bar ေပၚမွ ေခါင္းစဥ္ ပံုစံေျပာင္းျခင္း
အဲဒီ စာေၾကာင္းအစား ေအာက္က Code ေတြကို အစားထိုးေပးပါ။
ဆို႐ိုးစကားမ်ားကို အလွည့္က် ေဖာ္ျပႏိုင္ေသာ Widget ဖန္တီးျခင္း
ဒီထက္ အဆင္ေျပ လြယ္ကူတဲ့ နည္းတစ္နည္း ရွိပါေသးတယ္။ Hackosphere ကေန Widget တစ္ခု ဖန္တီးေပးထားပါတယ္။ ဒါေပမယ့္ သူက Message ၁၀ ခုပဲ ထည့္လို႔ရပါတယ္။ Message ၁၀ ခုကို ျဖည့္ၿပီး Generate Code လုပ္ၿပီး Add Widget to your blog ဆိုတာနဲ႔ က်ေနာ္တို႔ ဘေလာ့ဂ္မွာ တန္း ထည့္ေပးပါတယ္။ ဒါဆို က်ေနာ္တို႔က ဘာ Code မွ ကိုယ္တိုင္ ေရးစရာ မလုိေတာ့ပါဘူး။ အေတာ္ေလး အဆင္ေျပပါတယ္။ ဒါေပမယ့္ Message ၁၀ ခုပဲ ရပါမယ္။ တကယ္လို႔ ၁၀ ခုနဲ႔ အထက္ ျပခ်င္တယ္ ဆိုရင္ေတာ့ အထက္က နည္းကုိသံုးၿပီး ကိုယ္တုိင္ ေရးထည့္ႏိုင္ပါတယ္။ Random Message Widget Creator ဆိုတာ Hackosphere က လုပ္ထားတဲ့ Widget ပါ။ ကလစ္ႏွိပ္ၿပီး သြားစမ္းၾကည့္ႏိုင္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။
You received this email because you are subscribed to the real_time feed for http://knowhow.myanmarbloggers.org/feeds/posts/default. To change your subscription settings, please log into RSSFWD.