How to blog: August 2008

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 ဘယ္လို လုပ္သလဲ ဆိုတာ သိေလာက္ နားလည္ေလာက္ပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

Title Bar ေပၚမွ ေခါင္းစဥ္ ပံုစံေျပာင္းျခင္း

ဘေလာ့ဂ္တစ္ခုကို ၀င္လိုက္ၿပီဆိုရင္ Browser ရဲ႕ Title Bar မွာ အဲဒီ ဘေလာ့ဂ္ရဲ႕ နာမည္ တခါတည္း ေဖာ္ျပေပးပါတယ္။ ေနာက္ထပ္ ပို႔စ္တစ္ခုကို သီးျခား ထပ္၀င္ျပန္ရင္လည္း Title Bar မွာ Blog Title : Post Title ဆိုၿပီး ဘေလာ့ဂ္နာမည္နဲ႔ ပို႔စ္နာမည္ကို ေရွ႕ဆင့္ေနာက္ဆင့္ ေဖာ္ျပေပးထားတယ္။ ေအာက္က ပံု အတုိင္းပဲေပါ႔။

အရင္က Blogger မွာ ဒီ Title ကို က်ေနာ္တို႔ ျပင္ခြင့္ မရွိပါဘူး။ အခုေတာ့ Blogger က Title ကုိ Tag တစ္ခု အေနနဲ႔ သီးျခား ဖန္တီးလိုက္တဲ့ အခါမွာေတာ့ က်ေနာ္တို႔ လိုသလို ဖန္တီးႏိုင္ခြင့္ ရလာပါတယ္။ တကယ္လို႔ က်ေနာ္တို႔ ေအာက္မွာ ျပထားတဲ့ ပံုကလို Blog Title ကို မေဖာ္ျပဘဲ Post Title ကိုပဲ ျမင္ေစခ်င္တယ္ ဆိုရင္ က်ေနာ္တို႔ ဘယ္လို လုပ္မလဲ ဆိုတာ ဒီပို႔စ္မွာ တင္ျပေပးခ်င္ပါတယ္။

ဘယ္လို လုပ္သလဲဆိုတာ မရွင္းျပခင္မွာ ေမးစရာ ေမးခြန္းတစ္ခု ရွိေနပါတယ္။ ဒီလို လုပ္လိုက္ေတာ့ ဘာပိုထူးလာလို႔လဲ လို႔ ေမးစရာ ရွိပါတယ္။ တကယ္လို႔ လူ တစ္ေယာက္ေယာက္ဟာ ကိုယ္ ဖတ္ခ်င္တဲ့ ပို႔စ္ကို Search Engine ကေန ရွာမယ္ဆိုရင္ အခုလုိ ေျပာင္းလိုက္ျခင္း အားျဖင့္ ပိုၿပီး ရွာရလြယ္တာကို ေတြ႕ပါလိမ့္မယ္။ ဘာလို႔လဲ ဆိုေတာ့ Search အေတာ္မ်ားမ်ားဟာ စာလံုးေတြကို ရွာတဲ့အခါမွာ Title Tag ကို ဦးစားေပးၿပီး ရွာတတ္ပါတယ္။ တကယ္လို႔ ကိုယ့္ဘေလာ့ရဲ႕ Title Tag ဟာ ကိုယ့္ ပို႔စ္ရဲ႕ နာမည္ျဖစ္ေနတယ္ဆိုရင္ အဲဒီ ပို႔စ္ကို အလြယ္တကူ ေတြ႕ႏိုင္ၿပီး ဦးစားေပး ေဖာ္ျပတဲ့အထဲ ပါသြားပါတယ္။ ဒါေၾကာင့္ အခုလို ေျပာင္းလုိက္ရင္ Search Engine နဲ႔ ရွာတဲ့အခါ အရင္ကထက္ ရွာေတြ႕ဖို႔ ပို နီးစပ္သြားတယ္လို႔ ေျပာတာပါ။ ကဲ က်ေနာ္တို႔ အေရးပါတဲ့ အေၾကာင္းရင္းေလး သိၿပီးသြားၿပီဆိုေတာ့ ေလ့က်င့္ခန္းေလး စလိုက္ၾကရေအာင္။ Layout >> Edit HTML ကို သြားေပးပါ။

အေပၚနားေလးမွာပဲ <title><data:blog.pageTitle/></title> ဆိုတာကို အလြယ္တကူ ေတြ႕ႏိုင္ပါတယ္။

အဲဒီ စာေၾကာင္းအစား ေအာက္က Code ေတြကို အစားထိုးေပးပါ။

ျပင္ၿပီး ဆိုရင္ေတာ့ Template ကို Save ၿပီး ပို႔စ္တစ္ခုခုကို ကလစ္ႏွိပ္ၾကည့္လိုက္ပါ။ Title Bar မွာ ပို႔စ္နာမည္ပဲ ျပၿပီး အေရွ႕မွာ Blog Title ေပ်ာက္သြားတာ ေတြ႕ရပါလိမ့္မယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

ဆို႐ိုးစကားမ်ားကို အလွည့္က် ေဖာ္ျပႏိုင္ေသာ Widget ဖန္တီးျခင္း

က်ေနာ္တို႔ရဲ႕ ဘေလာ့္ကို တန္ဆာဆင္တဲ့ အေနနဲ႔ Sidebar ေတြမွာ ဆို႐ိုးစကားေတြ၊ ဆံုးမစကားေတြ၊ ဗုဒၶတရားေတာ္ေတြကို ေရးသားထားတတ္ၾကတယ္။ အဲဒီလို ေရးသားၾကတဲ့ အခါမွာ ပံုမွန္အားျဖင့္ Text Widget နဲ႔ လုပ္ၾကတာ မ်ားပါတယ္။ က်ေနာ္ အခု တင္ျပခ်င္တာက မိမိ ႀကိဳက္ႏွစ္သက္တဲ့ ဆုိ႐ိုးစကားေတြကို (၁၅ ခု ဆိုပါစို႔) အေသ သက္မွတ္ထားၿပီး၊ အဲဒီ ဆို႐ိုးစကားေတြကို တစ္ခါ ဖြင့္တုိင္း တစ္ခုကို အလွည့္က်၊ တစ္ခါနဲ႔ တစ္ခါ မတူေအာင္ ေဖာ္ျပလို႔ရမယ့္ Widget ေလး အေၾကာင္း ရွင္းျပခ်င္ပါတယ္။

အထက္မွာ ရွိတဲ့ Code မွာ new Array(6); ဆိုတာ က်ေနာ္တို႔ ဆို႐ိုးစကား ၆ ခု ထဲက အလွည့္က် ေဖာ္ျပခ်င္လို႔ပါ။ တကယ္လို႔ အခု (၂၀) ကမွ အလွည့္က် ေဖာ္ျပခ်င္ရင္ေတာ့ new Array(20); လုိ႔ ျပင္ေပး႐ံုပါပဲ။ ေနာက္ၿပီး quotes[] ကုိလည္း quotes[19] = "ဆို႐ိုးစကား (၂၀)"; အထိ ေရးေပးရပါ႔မယ္။ ဆို႐ိုးစကား () ဆိုတဲ့ေနရာမွာ ကိုယ္ ႀကိဳက္ႏွစ္သက္တဲ့ စကားပံု၊ အဆိုအမိန္႔ စသျဖင့္ ထည့္လို႔ရပါတယ္။ အဲလို ျပင္ၿပီးၿပီ ဆိုရင္ Layout >> Page Elements က SideBar မွာ Add a Page Element ကို ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ၿပီးရင္ ေပၚလာတဲ့ Text Box ထဲမွာ ျပင္ထားတဲ့ Code ကုိ ထည့္ၿပီး Save ေပးပါ။ ဒါဆို အဆင္ေျပသြားၿပီ။

ဒီထက္ အဆင္ေျပ လြယ္ကူတဲ့ နည္းတစ္နည္း ရွိပါေသးတယ္။ Hackosphere ကေန Widget တစ္ခု ဖန္တီးေပးထားပါတယ္။ ဒါေပမယ့္ သူက Message ၁၀ ခုပဲ ထည့္လို႔ရပါတယ္။ Message ၁၀ ခုကို ျဖည့္ၿပီး Generate Code လုပ္ၿပီး Add Widget to your blog ဆိုတာနဲ႔ က်ေနာ္တို႔ ဘေလာ့ဂ္မွာ တန္း ထည့္ေပးပါတယ္။ ဒါဆို က်ေနာ္တို႔က ဘာ Code မွ ကိုယ္တိုင္ ေရးစရာ မလုိေတာ့ပါဘူး။ အေတာ္ေလး အဆင္ေျပပါတယ္။ ဒါေပမယ့္ Message ၁၀ ခုပဲ ရပါမယ္။ တကယ္လို႔ ၁၀ ခုနဲ႔ အထက္ ျပခ်င္တယ္ ဆိုရင္ေတာ့ အထက္က နည္းကုိသံုးၿပီး ကိုယ္တုိင္ ေရးထည့္ႏိုင္ပါတယ္။ Random Message Widget Creator ဆိုတာ Hackosphere က လုပ္ထားတဲ့ Widget ပါ။ ကလစ္ႏွိပ္ၿပီး သြားစမ္းၾကည့္ႏိုင္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

“ဆက္ႏြယ္ေသာပို႔စ္မ်ား” ကို ဇယားျဖင့္ ေဖာ္ျပျခင္း

က်ေနာ္တို႔ ဘေလာ့ဂ္ ေရးတဲ့အခါမွာ အေၾကာင္းအရာ တခ်ဳိ႕ကို ပို႔စ္ေပါင္းမ်ားစြာ ခြဲၿပီး ေရးတတ္ၾကပါတယ္။ ဥပမာ ၀တၳဳလိုေပါ႔။ ပို႔စ္တစ္ခုတည္းနဲ႔ မၿပီးျပတ္ႏိုင္တာေၾကာင့္ ခြဲေရးရပါတယ္။ အဲဒီေတာ့ အဲဒီ ပို႔စ္ရဲ႕ ေအာက္ေျခတိုင္းမွာ သူတုိ႔နဲ႔ ဆက္ႏြယ္မႈ ရွိတဲ့ ပို႔စ္ေတြကို တခ်ဳိ႕ ျပန္ၫႊန္းတတ္ပါတယ္။ တခ်ဳိ႕က် (Further Reading) ဆက္ဖတ္ေစလုိေသာ ပို႔စ္မ်ား ဆိုၿပီး ထပ္ၫႊန္းတတ္ၾကတယ္။ ပံုမွန္အားျဖင့္ အဲဒီ Links ေတြကို Bullets ေတြနဲ႔ လုပ္လိုက္ၾကတာပါပဲ။ တကယ္လို႔ အဲဒါေလးကို ဇယားေလးနဲ႔ အေရာင္ေလးေတြ ထည့္ၿပီး ေသသပ္သပ္ ႐ႈခ်င္စဖြယ္ ျဖစ္ေနမယ္ဆို ပိုေကာင္းသြားမွာေပါ႔။ က်ေနာ္ ဒီပို႔စ္မွာ အဲဒီလို အေရာင္နဲ႔ ဇယား ဘယ္လို လုပ္သလဲဆိုတာ ေဆြးေႏြးေပးခ်င္တာပါ။ ေအာက္မွာ ျပထားတဲ့ ပံုက ဇယားလုပ္ၿပီးပံု မလုပ္ခင္ ပံုရဲ႕ ကြာျခားခ်က္ပါ။ ကဲ က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ရေအာင္။ Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။

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

အထက္က CSS ေတြကုိ Style Sheet မွာ ထည့္ေပးပါ။ background-color နဲ႔ color ကို မိမိ ႀကိဳက္ႏွစ္သက္ရာ ေျပာင္းေပးပါ။ width ကိုလည္း မိမိ ပို႔စ္ရဲ႕ အက်ယ္နဲ႔ လိုက္ေလ်ာညီေထြ ျဖစ္ေအာင္ ျပင္ေပးပါ။ ျပင္ၿပီးသြားရင္ Template ကို Save ေပးပါ။

အဆင့္ (၂) ပို႔စ္အတြင္း၌ ထည့္သြင္းေရးသားျခင္း

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

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

အျပာေရာင္ စာလံုးေတြ ေနရာမွာ ၫႊန္းခ်င္တဲ့ လိပ္စာကို ထည့္ေပးပါ။ အနက္ေရာင္ စာလံုးေတြ ေနရာမွာ ၫႊန္းခ်င္တဲ့ ေခါင္းစဥ္ကို ေရးေပးပါ။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

Widget ကို Home Page တြင္ မေပၚေအာင္ ျပဳလုပ္ျခင္း

တခ်ဳိ႕ Widget ေတြဟာ ဘေလာ့ဂ္ ရဲ႕ ပထမဆံုး စာမ်က္ႏွာမွာ ေပၚေနဖို႔ မသင့္ေလ်ာ္တာေတြ ရွိပါတယ္။ ဥပမာ ႏွီးႏြယ္ေသာပို႔စ္မ်ား (Related Posts) Widget ပါ။ “ႏွီးႏြယ္တဲ့ပို႔စ္မ်ား” ဆိုတာ ကိုယ္ အခု ဖတ္ေနတဲ့ သီးသန္႔ ပို႔စ္တစ္ခုခ်င္းစီနဲ႔ပဲ သက္ဆိုင္ပါတယ္။ မူလစာမ်က္ႏွာမွာ ရွိရွိသမွ် ပို႔စ္ေတြ ေဖာ္ျပထားတာ ျဖစ္လို႔ သူတို႔နဲ႔ ဆက္ႏြယ္တဲ့ ပို႔စ္ရယ္လို႔ ေဖာ္ျပစရာ မရွိပါဘူး။ ဒါေၾကာင့္ “ႏွီးႏြယ္ေသာပို႔စ္မ်ား” (Related Post) ဆိုတဲ့ Widget ဟာ Home Page မွာ ေပၚမေနသင့္ပါဘူး။ အဲဒီလို တျခား Widget ေတြလည္း ရွိဦးမွာပါ။ အခု က်ေနာ္ တင္ျပခ်င္တာက Widget တစ္ခုကို ၀င္၀င္ခ်င္း Home Page မွာ မေပၚေအာင္ ဘယ္လို လုပ္မလဲ ဆိုတာပါ။ ကဲ က်ေနာ္တို႔ရဲ႕ ေလ့က်င္းခန္းေလး စလိုက္ၾကရေအာင္။ အရင္ဆံုး Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။

အဆင့္ (၁) ျပဳျပင္လိုေသာ Widget အား ရွာေဖြျခင္း

ပထမဆံုး အေနနဲ႔ က်ေနာ္တို႔ ျပဳျပင္လိုတဲ့ Widget ကို အရင္ ရွာရပါမယ္။ Widget မွန္သမွ်ဟာ <b:widget id=' .... ဆိုတာနဲ႔ စတာပါ။ ဥပမာ Related Post Widget ဆိုရင္ HTML ပဲ ျဖစ္ႏိုင္ပါတယ္။ ဒါေၾကာင့္ သူက <b:widget id='HTML နဲ႔ စမွာေတာ့ ေသခ်ာတယ္။ ကိုယ္ရွာေနတဲ့ Widget ဟုတ္မဟုတ္ကို အေနာက္မွာပါတဲ့ title ဆိုတာနဲ႔ တိုက္ဆိုင္ စစ္ေဆးၾကည့္ပါ။ ဟုတ္ကဲ့။ က်ေနာ္တို႔ ကိုယ္ ျပင္ခ်င္တဲ့ Widget ကုိ ေတြ႕ၿပီ ဆိုၾကပါစုိ႔။

အဆင့္ (၂) Widget ၌ Code ျပင္ဆင္ျခင္း

က်ေနာ္တို႔ ျပင္ခ်င္တဲ့ Widget မွာ ဒီ <div class='widget-content'> စာေၾကာင္းကုိ ရွာေပးပါ။
ရွာေတြ႕ၿပီ ဆိုရင္ သူ႔ အေပၚနားမွာ <b:if cond='data:blog.pageType == "item"'> စာေၾကာင္းကို ထည့္ေပးပါ။
ေနာက္ၿပီး <div class='widget-content'> ကုိ ပိတ္ထားတဲ့ အပိတ္ </div> ကို ေတြ႕ေအာင္ရွာပါ။
ေတြ႔ၿပီဆိုရင္ သူ႔ ေအာက္နားမွာ </b:if> ကို ထည့္ေပးပါ။
ဒါဆိုရင္ က်ေနာ္တို႔ ျပဳျပင္ထားတဲ့ Widget ဟာ Home Page မွာ မေပၚေတာ့ပါဘူး။

ဥပမာ အေနနဲ႔ ျပရမယ္ဆိုရင္

<b:widget id='HTML10' locked='false' title='Popular Pages' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

အဲဒီမွာ အနီေရာင္ ျပထားတဲ့ Code ေတြဟာ ထပ္ျဖည့္ထားတဲ့ Code ေတြပဲ ျဖစ္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

[+/-]

စာေရးသူ တစ္ေယာက္ခ်င္းစီ အတြက္ မတူေသာ အေရာင္မ်ား သက္မွတ္ျခင္း

အခုဆိုရင္ ဘေလာ့္ေတြမွာ တစ္ေယာက္တည္း သီးသန္႔ ေရးၾကတာ မဟုတ္ဘဲ အုပ္စုဖြဲ႔ၿပီး ေရးေနတဲ့ ဘေလာ့ဂ္ေတြ အေတာ္မ်ားမ်ား ေတြ႕လာရပါတယ္။ မ်ားေသာအားျဖင့္ ဘယ္သူ ဘယ္၀ါ ေရးသလဲဆိုတာကို က်ေနာ္တုိ႔ ပို႔စ္ ေအာက္ေျခက Posted by ဆိုတာနဲ႔ ခြဲျခားၾကပါတယ္။ တခ်ဳိ႕ဆိုလည္း Label ေလးေတြမွာ ကိုယ့္နာမည္ ကိုယ္ေပးၿပီး ခြဲျခား ၾကတယ္။ စာေရးသူ တစ္ေယာက္နဲ႔ တစ္ေယာက္ ကြဲကြဲျပားျပား ျဖစ္ဖို႔ ဒီမွာ နည္းလမ္းေလး ရွိပါတယ္။ အဓိကကေတာ့ စာေရးသူ တစ္ေယာက္ခ်င္းဆီအတြက္ သီးသန္႔ ေနာက္ခံအေရာင္နဲ႔ စာလံုး အေရာင္ သက္မွတ္ေပးတာပါ။ အဲလုိ သက္မွတ္ေပးလိုက္ရင္ ဒါဘယ္သူေရးသလဲ၊ ေရးတဲ့သူေတြ မတူဘူးဆိုတာေတာ့ အၾကမ္းဖ်င္း ခန္႔မွန္းလို႔ ရသြားၿပီေပါ႔။ ဒီလို လုပ္ဖုိ႔ ဆိုရင္ ပို႔စ္ေရးတဲ့ အခါမွာ <p style="background:#EEEEEE; color:#336633"> </p> ဆိုၿပီး တစ္ေယာက္ကို တစ္ေရာင္စီ သက္မွတ္ေပးလိုက္ရင္ ျဖစ္ပါတယ္။ ဒါေပမယ့္ အဲလို တစ္ပုဒ္ေရးတုိင္း တစ္ခါ ထည့္ေနရရင္ အေတာ္ေလး ပင္ပန္းပါတယ္။ အခု က်ေနာ္ တင္ျပမယ့္ နည္းကို တစ္ခ်က္ေလာက္ ေလ့လာၾကည့္ပါဦး။ ပို လြယ္ကူတာ ေတြ႕ရပါလိမ့္မယ္။ ပထမဆံုး ဘာမွ မလုပ္ခင္ Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။

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

ထံုးစံအတိုင္း CSS ထည့္မွာမို႔ Style Sheet ကို သြားေပးပါ။

အထက္က CSS မွာ အျပာေရာင္ ျပထားတဲ့ Code ေတြဟာ ေျပာင္းဖို႔ လိုအပ္တဲ့ Code ေတြပါ။ pikay ဆိုတဲ့ ေနရာမွာ စာေရးသူ တစ္ေယာက္ခ်င္းစီ အတြက္ သီးျခား နာမည္တစ္ခုစီ ေပးေပးပါ။ စာေရးသူ ႏွစ္ေယာက္ အတြက္ဆိုရင္ အေပၚကလို CSS Code ကို နာမည္ႏွစ္မ်ဳိးနဲ႔ ႏွစ္ခုျဖစ္ပါမယ္။ background နဲ႔ color မွာ ကိုယ္ ႀကိဳက္တဲ့ အေရာင္ရဲ႕ Code No ကုိ ထည့္ေပးပါ။ Color No မသိရင္ ဒီမွာ သြားၾကည့္ပါ။

အဆင့္ (၂) ပို႔စ္ ေရးသားျခင္း

ပို႔စ္ေရးမယ္ ဆိုရင္ Posting မွာ Create လုပ္ေပးပါ။ (အေျခခံအဆင့္သာ ရွိသူမ်ားအတြက္ ၫႊန္းၾကားျခင္း ျဖစ္သည္။) Post Editor မွာ

တကယ္လို႔ တျခား စာေရးသူ တစ္ေယာက္အတြက္ ဆိုရင္ တျခား နာမည္တစ္ခုနဲ႔ id နာမည္ ေျပာင္းေပးပါ။

ဒါဆိုရင္ စာေရးသူ တစ္ေယာက္စီအတြက္ သီးျခား စာလံုးအေရာင္နဲ႔ ျဖစ္သြားပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။

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

pollcode.com free polls

How to blog

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

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

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

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

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

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

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

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

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

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

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

Image Rollover with Opacity

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

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

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

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

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

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

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

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

Title Bar ေပၚမွ ေခါင္းစဥ္ ပံုစံေျပာင္းျခင္း

ဆို႐ိုးစကားမ်ားကို အလွည့္က် ေဖာ္ျပႏိုင္ေသာ Widget ဖန္တီးျခင္း

“ဆက္ႏြယ္ေသာပို႔စ္မ်ား” ကို ဇယားျဖင့္ ေဖာ္ျပျခင္း

Widget ကို Home Page တြင္ မေပၚေအာင္ ျပဳလုပ္ျခင္း

စာေရးသူ တစ္ေယာက္ခ်င္းစီ အတြက္ မတူေသာ အေရာင္မ်ား သက္မွတ္ျခင္း

Blog Archive

Labels

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

Blogging Tools

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