Menu Tab လုပ္နည္းမ်ား - ပုံစံ (၁)
written by Yan
at Sunday, June 1, 2008
Contributor: ရန္ေအာင္
အားလုံးပဲ မဂၤလာပါ ခင္ဗ်ာ.
ဒီတစ္ခါမွ်ေ၀ခ်င္တာကေတာ႔ ဘေလာ႔ဂ္မွာ Menu Tab လုပ္နည္းေလးပါပဲ. ဒီပုိ႔စ္ေလးကုိ ေရးဖုိ႔ အားခဲထားတာ ၾကာပါျပီ. အခုမွပဲ စတင္ အေကာင္အထည္ေဖာ္ျဖစ္ေတာ႔တယ္ဗ်ာ. အခု ကၽြန္ေတာ္႔ရဲ႔ ပုိ႔စ္ေလးကုိ ပုံစံ (၁)လုိ႔ နာမည္ေပးထားရတာက ေနာက္ထပ္ ပုံစံကဲြေလးေတြ ရွိေသးလုိ႔ပါပဲ. အဲဒါေလးေတြကုိလည္း ထပ္ေရးေပးသြားပါမယ္. ပုိ႔စ္တစ္ခုတည္းမွာ ေရးလုိက္ရင္ ရႈပ္ကုန္မွာစုိးလုိ႔ ခဲြထုတ္ေရးသားဖုိ႔ ရည္ရြယ္ထားတာပါ.
ကဲ. ဒီေတာ႔ Menu Tab ဆုိတာ ဘာလဲဆုိတာကေန စၾကည္႔လုိက္ရေအာင္. ပုံေလးေတြကုိ ၾကည္႔လုိက္ပါ. အဲဒါ Menu Tab ေလးေတြပါပဲ.
ဘေလာ႔ဂ္တန္းပလိတ္တုိင္းမွာ Menu Tab မပါၾကပါဘူး. ပါတဲ႔ တန္းပလိတ္ တစ္ခ်ိဳ႔ ရွိပါတယ္. ဒါေပမယ္႔ Wordpress အတြက္ အမ်ားစုျဖစ္ေနၾကတယ္. Blogger Platoform အတြက္က်ျပန္ေတာ႔လည္း ရွိေတာ႔ရွိပါရဲ႔. Classic Template အတြက္ ျဖစ္ေနတတ္ျပီးေတာ႔ New Blogger Widget Template အတြက္ Menu Tab ထည္႔ေပးျပီးသား မရွိတတ္ၾကပါဘူး. ဒီေတာ႔ ကုိယ္တုိင္ကုိယ္က် ထည္႔တတ္ေအာင္ ေလ႔လာသင္ယူလုိက္တာ အေကာင္းဆုံးပဲ မဟုတ္ဘူးလားဗ်ာ…
ပထမဦးဆုံးအေနနဲ႔ ကုိယ္လုပ္မယ္႔ Menu Tab အတြက္ Button ေလးေတြကုိ ဖန္တီးယူရပါမယ္. Photoshop ႏုိင္နင္းတဲ႔သူေတြအတြက္ဆုိရင္ေတာ႔ ကုိယ္ပုိင္ Button ေလးေတြကုိ ဖန္တီးႏုိင္မွာပါ. Flash သမားေတြဆုိရင္ ပုိေတာင္မွ အဆင္႔ျမင္႔တဲ႔ Button ေလးေတြ လုပ္ဖုိ႔ အခြင္႔အလမ္းအမ်ားၾကီးရွိပါတယ္. အဲ. ကုိယ္တုိင္ မလုပ္တတ္ရင္လည္း စိတ္မပူပါနဲ႔. ဒီမွာ အဆင္သင္႔ လုပ္ေပးျပီးသား Button ေလးေတြ ရွိပါတယ္. ကုိယ္႔စိတ္ၾကိဳက္ ပုံေလးေတြကုိ သိမ္းထားႏုိင္ပါတယ္.
Black
Blackleft.gif
Blackright.gif
Blue
Blueleft.gif
Blueright.gif
Green
Greenleft.gif
Greenright.gif
Red
Redleft.gif
Redright.gif
Ungu
Unguleft.gif
Unguright.gif
White
whiteleft.gif
whiteright.gif
Yellow
yellowleft.gif
yellowright.gif
ကဲ. ပုံေလးေတြ ယူလုိက္ျပီေနာ္. ဒါဆုိရင္ စလုိက္ၾကရေအာင္.
အဆင႔္ (၁)
- Blogger ထဲကုိ Sign in ၀င္ပါ. Layout>Template>Edit Html ကုိသြားပါ.
- တန္းပလိတ္ကုိ Backup လုပ္ဖုိ႔ လုံး၀ (လုံး၀) မေမ႔ပါနဲ႔. ဒါမွ မေတာ္တဆ အမွားလုပ္ခဲ႔မိရင္ေတာင္ ကုိယ႔္ဘေလာ႔ဂ္ေလး မပ်က္စီးႏုိင္ေတာ႔ဘူးေပါ႔.
- Expand Widget Templates ဆုိတဲ႔ Box ေလးကုိ Check လုပ္ခဲ႔ပါ.
အဆင္႔ (၂)
- ျပီးသြားရင္ေတာ႔ တန္းပလိတ္ထဲမွာ ]]></b:skin> ဆုိတဲ႔ Code ေလးကုိ လုိက္ရွာပါ. ေတြ႔ျပီဆုိတာနဲ႔ ေအာက္မွာ ေဖာ္ျပေပးမယ္႔ ကုဒ္ဒင္းေလးေတြကုိ အေပၚကေန ကပ္လ်က္ထည္႔ေပးလုိက္ပါ.
/* Menu Tab Starts Here */
tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://www.fileden.com/files/2007/2/17/784534/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://www.fileden.com/files/2007/2/17/784534/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
အေပၚမွာ ျပထားတဲ႔ ကုဒ္ဒင္းေလးေတြထဲမွာ Default အေနနဲ႔ Black Button ေလးကုိ ထည္႔ေပးထားပါတယ္. ကုိယ္ၾကိဳက္တဲ႔ အေရာင္ ေျပာင္းယူႏုိင္ပါတယ္. အနီေရာင္ၾကိဳက္ရင္ blackleft.gif ေနရာမွာ redleft.gif ဆုိျပီးေတာ႔ တစ္ခါ၊ blackright.gif ေနရာမွာ redright.gif ဆုိျပီးေတာ႔ တစ္ခါ ႏွစ္ေနရာမွာ ေျပာင္းေပးရပါမယ္. ဒီေလာက္ဆုိ သေဘာေပါက္ျပီထင္ပါတယ္.
ဒီေနရာမွာ တစ္ခု ျဖတ္ေျပာခ်င္ပါတယ္. ဘာလဲဆုိေတာ႔ အခုကၽြန္ေတာ္ေပးထားတဲ႔ Button ေလးေတြအတြက္ URL ေတြကုိ သူမ်ားတင္ေပးျပီးသား လင္႔ခ္ေတြကုိ ယူသုံးတာထက္ Hosting Site တစ္ခုခုမွာ ကုိယ္ပုိင္ေကာက္တင္ျပီး ယူသုံးတာ ကုိယ္႔အတြက္ ပုိစိတ္ခ်ရပါတယ္. မဟုတ္ရင္ေတာ႔ ၀ိုင္းျပီး သုံးသူေတြ မ်ားႏုိင္တာေၾကာင္႔ Bandwidth မႏိုင္တာေတြ ျဖစ္လာႏုိင္ျပီး ကုိယ္႔ဘေလာ႔ဂ္မွာ တင္ထားတဲ႔ Menu Tab ေလးေတြ ခဏခဏ ေဒါင္းသြားတတ္ပါတယ္.
File Hosting မလုပ္ခင္ ကုိယ္ၾကိဳက္တဲ႔ ပုံေလးေတြကုိ အရင္ဆုံး Save လုပ္ပါ. ဖုိင္လ္ေတြကုိ ဘယ္လုိမ်ိဳး Host လုပ္ရလဲဆုိတာကုိ သိခ်င္ရင္ေတာ႔ ဒီပုိ႔စ္ေလးကုိ ဖတ္ျပီး ေလ႔လာစမ္းသပ္ၾကည္႔ပါခင္ဗ်ာ….
Button ေလးတစ္ခုကို အစမ္းသေဘာအေနနဲ႔ တင္ျပေပးပါမယ္. အစိမ္းေရာင္ေလးကုိ ေရြးလုိက္ပါမယ္. တင္ရမယ္႔ ဖုိင္က ႏွစ္ခုပါ. Greenleft.gif နဲ႔ Greenright.gif ပါ.
File Hosting လုပ္နည္း အက်ဥ္းခ်ဳပ္
Free File Hosting ေပးတဲ႔ Site ေတြထဲကမွ Fileden ကုိ ကၽြန္ေတာ္ေရြးလုိက္ပါမယ္.
Upload ဆုိတဲ႔ Tab ေလးကို ေရြးပါမယ္.
ကုိယ္တင္ခ်င္တဲ႔ ဖုိင္ေလးေတြကုိ Browse ကေန တစ္ဆင္႔ ေရြးပါမယ္. ျပီးရင္ေတာ႔ Upload လုပ္ပါမယ္.
ကၽြန္ေတာ္တင္ခ်င္တဲ႔ Greenleft.gif နဲ႔ Greenright.gif ဖုိင္ေလးေတြကုိ ေရြးျပီးေတာ႔ Upload လုပ္ပါမယ္.
ေနာက္တစ္မ်က္ႏွာမွာ ေပၚလာမွာကေတာ႔ ကၽြန္ေတာ္တုိ႔တင္လုိက္တဲ႔ ဖုိင္ေလးေတြရဲ႔ URL လင္႔ခ္ေလးေတြပါပဲ. Selection လုပ္ျပထားတဲ႔ URL ေလးေတြကုိ ကူးယူလုိက္ရင္ File Hosting လုပ္တဲ႔ Process ေအာင္ျမင္စြာ ျပီးဆုံးသြားပါျပီ.
အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ Case မွာေတာ႔ ဒီလင္႔ခ္ေလးႏွစ္ခုကုိ ယူလာရပါမယ္.
http://www.fileden.com/files/2007/2/17/784534/greenleft.gif နဲ႔
http://www.fileden.com/files/2007/2/17/784534/greenright.gif တုိ႔ပဲ ျဖစ္ပါတယ္.
အဲဒီ႔လင္႔ခ္ေလးႏွစ္ခုကုိ အေပၚမွာ ေဆြးေႏြးထားခဲ႔သလုိပဲ
http://www.fileden.com/files/2007/2/17/784534/blackleft.gif နဲ႔
http://www.fileden.com/files/2007/2/17/784534/blackright.gif ဆုိတဲဲ႔
ေနရာေလးေတြမွာ အသီးသီး အစားသြင္းေပးလုိက္ရင္ ကုိယ္႔စိတ္ၾကိဳက္ Button ေလးေတြကုိ Menu Tab လုပ္တဲ႔ အဆင္႔ျပီးသြားျပန္ပါျပီ….
အဆင္႔ (၃)
ဒီအဆင္႔က နည္းနည္းခက္ပါတယ္. လန္႔မသြားပါနဲ႔ဦး. သတိထားျပီး ဖတ္ေစခ်င္လုိ႔ပါ. ဘာလုိ႔လဲဆုိေတာ႔ ဘေလာ႔ဂါေတြ သုံးတဲ႔ တန္းပလိတ္ေတြက တစ္ခုနဲ႔ တစ္ခု မတူၾကဘူးမဟုတ္လား. ဒီေတာ႔ အခုျပမယ္႔ Tricks ေလးေတြထဲက တစ္ခုခုနဲ႔ အဆင္ေျပမေျပ ကုိယ္တုိင္ အရင္စမ္းသပ္ၾကည္႔ဖုိ႔ လုိပါတယ္. ဒါေၾကာင္႔ ဒီအဆင္႔ေလးကုိ သတိထားျပီး ဖတ္ေစခ်င္ပါတယ္ ခင္ဗ်ာ.
ပထမဦးဆုံး အခု ကၽြန္ေတာ္ေပးလုိက္မယ္႔ ကုဒ္ဒင္းေလးကုိ ေကာ္ပီကူးထားေစခ်င္ပါတယ္.
<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href=" http://yanaung.blogspot.com/ ">မူလစာမ်က္ႏွာသုိ႔</a></li>
<li><a href="Your Link Here">Your Link Name</a></li>
<li><a href="Your Link Here">Your Link Name</a></li>
</ul>
</div >
ဥပမာ လုပ္ျပေပးထားတဲ႔ လင္႔ခ္ေလးေတြေနရာမွာ ကုိယ္႔စိတ္ၾကိဳက္ လင္႔ခ္ေလးေတြ ထည္႔ေပးဖုိ႔ေတာ႔ မေမ႔ပါနဲ႔.
ရျပီဆုိရင္ေတာ႔ အဲဒီ႔ကုဒ္ဒင္းေလးေတြကုိ ေကာ္ပီကူးျပီး အသင္႔ျပင္ထားေနာ္.
ကဲ. ဆက္လုပ္လုိက္ၾကရေအာင္.
နည္းလမ္း (၁)
<div id="content-wrapper"> ဆုိတဲ႔ ကုဒ္ဒင္းေလးကုိ ေတြ႔ေအာင္ ရွာပါ. ေတြ႔ခဲ႔ရင္ေတာ႔ အခုနက ကၽြန္ေတာ္တုိ႔ ေကာ္ပီကူးထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ အခုေတြ႔ေနရတဲ႔ <div id="content-wrapper"> ဆိုတဲ႔ ကုဒ္ဒင္းေလးအေပၚကေန ကပ္လ်က္ ထည္႔ေပးလုိက္ပါ.
Template ကုိ Save မလုပ္ပါနဲ႔ဦး. အရင္ဆုံး Preview ၾကည္႔ၾကည္႔ပါ. ၾကိဳက္ျပီလား. အုိေက. ဒါဆုိရင္ Save လုပ္လုိ႔ရပါျပီ.
ဟာ. မဟုတ္ေသးဘူး. Menu Tab ေပၚေနတဲ႔ ေနရာကုိ မၾကိဳက္ဘူး. ဒါဆုိရင္ေတာ႔ ေနာက္တစ္မ်ိဳး ၾကိဳးစားၾကည္႔ပါမယ္.
တန္းပလိတ္ထဲမွာ </div> ဆုိတဲ႔ ကုဒ္ဒင္းေလးေတြ အမ်ားၾကီးရွိပါတယ္. အဲဒါေလးေတြကုိ ရွာျပီး အေပၚကေန ကပ္လ်က္မွာ ေကာ္ပီကူးဖုိ႔ ေျပာထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ. တန္းပလိတ္ထဲမွာ </div> ဆုိတာေလးေတြ အမ်ားၾကီးပါပါလိမ္႔မယ္. ၾကိဳးစားၾကည္႔ပါ. ကုိယ္႔စိတ္ၾကိဳက္ေနရာမွာ Menu Tab ေလးေပၚလာသည္အထိေပါ႔. Preview ခဏခဏ လုပ္ၾကည္႔ပါ. စိတ္ၾကိဳက္ရျပီဆုိေတာ႔မွ Save Template လုပ္ပါ.
ဒါက နည္းလမ္း (၁) ေပါ႔. တန္းပလိတ္အမ်ားစုက ဒီနည္းလမ္းနဲ႔ အဆင္ေျပတတ္ၾကပါတယ္.
မေျပဘူးဆုိခဲ႔ရင္ေရာ…
Fine! Here is another method…
နည္းလမ္း (၂)
တန္းပလိတ္ထဲမွာ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ လုိက္ရွာပါ.
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
ေတြ႔ခဲ႔ရင္ အနီေရာင္ေနရာေလးေတြကုိ အခုလုိ ျပင္လုိက္ပါ.
<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
ျပီးသြားခဲ႔ရင္ေတာ႔ တန္းပလိတ္ကုိ Save လုပ္ခဲ႔ပါ. ျပီးရင္ Page Element> Add Page Element> HTML/Javascript ကို ေရြးပါ. ရျပီဆုိရင္ေတာ႔ ခုနက ေကာ္ပီကူးခုိင္းထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ ေပၚလာမယ္႔ Content Box ေလးထဲမွာ ထည္႔ေပးလုိက္ပါ. Save လုပ္ပါ. Preview ၾကည္႔ၾကည္႔ပါ.
ကဲ. အဆင္ေျပေခ်ာေမြ႔ၾကပါေစဗ်ာ. အဆင္မေျပခဲ႔တာေတြ ရွိခဲ႔ရင္လည္း ေကာ္မန္႔မွာ ေမးျမန္းႏုိင္ပါတယ္.
Menu Tab တင္နည္း ပုံစံ (၂) ကုိ မၾကာခင္ ဆက္လက္ေရးသားေဆြးေႏြးေပးသြားပါမယ္.
Acknowledgement:
ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိျဖည္႔စြက္ ေရးသားထားျခင္းျဖစ္ပါတယ္ ခင္ဗ်ာ....
အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္.
Read More...
အားလုံးပဲ မဂၤလာပါ ခင္ဗ်ာ.
ဒီတစ္ခါမွ်ေ၀ခ်င္တာကေတာ႔ ဘေလာ႔ဂ္မွာ Menu Tab လုပ္နည္းေလးပါပဲ. ဒီပုိ႔စ္ေလးကုိ ေရးဖုိ႔ အားခဲထားတာ ၾကာပါျပီ. အခုမွပဲ စတင္ အေကာင္အထည္ေဖာ္ျဖစ္ေတာ႔တယ္ဗ်ာ. အခု ကၽြန္ေတာ္႔ရဲ႔ ပုိ႔စ္ေလးကုိ ပုံစံ (၁)လုိ႔ နာမည္ေပးထားရတာက ေနာက္ထပ္ ပုံစံကဲြေလးေတြ ရွိေသးလုိ႔ပါပဲ. အဲဒါေလးေတြကုိလည္း ထပ္ေရးေပးသြားပါမယ္. ပုိ႔စ္တစ္ခုတည္းမွာ ေရးလုိက္ရင္ ရႈပ္ကုန္မွာစုိးလုိ႔ ခဲြထုတ္ေရးသားဖုိ႔ ရည္ရြယ္ထားတာပါ.
ကဲ. ဒီေတာ႔ Menu Tab ဆုိတာ ဘာလဲဆုိတာကေန စၾကည္႔လုိက္ရေအာင္. ပုံေလးေတြကုိ ၾကည္႔လုိက္ပါ. အဲဒါ Menu Tab ေလးေတြပါပဲ.
ဘေလာ႔ဂ္တန္းပလိတ္တုိင္းမွာ Menu Tab မပါၾကပါဘူး. ပါတဲ႔ တန္းပလိတ္ တစ္ခ်ိဳ႔ ရွိပါတယ္. ဒါေပမယ္႔ Wordpress အတြက္ အမ်ားစုျဖစ္ေနၾကတယ္. Blogger Platoform အတြက္က်ျပန္ေတာ႔လည္း ရွိေတာ႔ရွိပါရဲ႔. Classic Template အတြက္ ျဖစ္ေနတတ္ျပီးေတာ႔ New Blogger Widget Template အတြက္ Menu Tab ထည္႔ေပးျပီးသား မရွိတတ္ၾကပါဘူး. ဒီေတာ႔ ကုိယ္တုိင္ကုိယ္က် ထည္႔တတ္ေအာင္ ေလ႔လာသင္ယူလုိက္တာ အေကာင္းဆုံးပဲ မဟုတ္ဘူးလားဗ်ာ…
ပထမဦးဆုံးအေနနဲ႔ ကုိယ္လုပ္မယ္႔ Menu Tab အတြက္ Button ေလးေတြကုိ ဖန္တီးယူရပါမယ္. Photoshop ႏုိင္နင္းတဲ႔သူေတြအတြက္ဆုိရင္ေတာ႔ ကုိယ္ပုိင္ Button ေလးေတြကုိ ဖန္တီးႏုိင္မွာပါ. Flash သမားေတြဆုိရင္ ပုိေတာင္မွ အဆင္႔ျမင္႔တဲ႔ Button ေလးေတြ လုပ္ဖုိ႔ အခြင္႔အလမ္းအမ်ားၾကီးရွိပါတယ္. အဲ. ကုိယ္တုိင္ မလုပ္တတ္ရင္လည္း စိတ္မပူပါနဲ႔. ဒီမွာ အဆင္သင္႔ လုပ္ေပးျပီးသား Button ေလးေတြ ရွိပါတယ္. ကုိယ္႔စိတ္ၾကိဳက္ ပုံေလးေတြကုိ သိမ္းထားႏုိင္ပါတယ္.
ကဲ. ပုံေလးေတြ ယူလုိက္ျပီေနာ္. ဒါဆုိရင္ စလုိက္ၾကရေအာင္.
အဆင႔္ (၁)
- Blogger ထဲကုိ Sign in ၀င္ပါ. Layout>Template>Edit Html ကုိသြားပါ.
- တန္းပလိတ္ကုိ Backup လုပ္ဖုိ႔ လုံး၀ (လုံး၀) မေမ႔ပါနဲ႔. ဒါမွ မေတာ္တဆ အမွားလုပ္ခဲ႔မိရင္ေတာင္ ကုိယ႔္ဘေလာ႔ဂ္ေလး မပ်က္စီးႏုိင္ေတာ႔ဘူးေပါ႔.
- Expand Widget Templates ဆုိတဲ႔ Box ေလးကုိ Check လုပ္ခဲ႔ပါ.
အဆင္႔ (၂)
- ျပီးသြားရင္ေတာ႔ တန္းပလိတ္ထဲမွာ ]]></b:skin> ဆုိတဲ႔ Code ေလးကုိ လုိက္ရွာပါ. ေတြ႔ျပီဆုိတာနဲ႔ ေအာက္မွာ ေဖာ္ျပေပးမယ္႔ ကုဒ္ဒင္းေလးေတြကုိ အေပၚကေန ကပ္လ်က္ထည္႔ေပးလုိက္ပါ.
/* Menu Tab Starts Here */
tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://www.fileden.com/files/2007/2/17/784534/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://www.fileden.com/files/2007/2/17/784534/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
အေပၚမွာ ျပထားတဲ႔ ကုဒ္ဒင္းေလးေတြထဲမွာ Default အေနနဲ႔ Black Button ေလးကုိ ထည္႔ေပးထားပါတယ္. ကုိယ္ၾကိဳက္တဲ႔ အေရာင္ ေျပာင္းယူႏုိင္ပါတယ္. အနီေရာင္ၾကိဳက္ရင္ blackleft.gif ေနရာမွာ redleft.gif ဆုိျပီးေတာ႔ တစ္ခါ၊ blackright.gif ေနရာမွာ redright.gif ဆုိျပီးေတာ႔ တစ္ခါ ႏွစ္ေနရာမွာ ေျပာင္းေပးရပါမယ္. ဒီေလာက္ဆုိ သေဘာေပါက္ျပီထင္ပါတယ္.
ဒီေနရာမွာ တစ္ခု ျဖတ္ေျပာခ်င္ပါတယ္. ဘာလဲဆုိေတာ႔ အခုကၽြန္ေတာ္ေပးထားတဲ႔ Button ေလးေတြအတြက္ URL ေတြကုိ သူမ်ားတင္ေပးျပီးသား လင္႔ခ္ေတြကုိ ယူသုံးတာထက္ Hosting Site တစ္ခုခုမွာ ကုိယ္ပုိင္ေကာက္တင္ျပီး ယူသုံးတာ ကုိယ္႔အတြက္ ပုိစိတ္ခ်ရပါတယ္. မဟုတ္ရင္ေတာ႔ ၀ိုင္းျပီး သုံးသူေတြ မ်ားႏုိင္တာေၾကာင္႔ Bandwidth မႏိုင္တာေတြ ျဖစ္လာႏုိင္ျပီး ကုိယ္႔ဘေလာ႔ဂ္မွာ တင္ထားတဲ႔ Menu Tab ေလးေတြ ခဏခဏ ေဒါင္းသြားတတ္ပါတယ္.
File Hosting မလုပ္ခင္ ကုိယ္ၾကိဳက္တဲ႔ ပုံေလးေတြကုိ အရင္ဆုံး Save လုပ္ပါ. ဖုိင္လ္ေတြကုိ ဘယ္လုိမ်ိဳး Host လုပ္ရလဲဆုိတာကုိ သိခ်င္ရင္ေတာ႔ ဒီပုိ႔စ္ေလးကုိ ဖတ္ျပီး ေလ႔လာစမ္းသပ္ၾကည္႔ပါခင္ဗ်ာ….
Button ေလးတစ္ခုကို အစမ္းသေဘာအေနနဲ႔ တင္ျပေပးပါမယ္. အစိမ္းေရာင္ေလးကုိ ေရြးလုိက္ပါမယ္. တင္ရမယ္႔ ဖုိင္က ႏွစ္ခုပါ. Greenleft.gif နဲ႔ Greenright.gif ပါ.
Free File Hosting ေပးတဲ႔ Site ေတြထဲကမွ Fileden ကုိ ကၽြန္ေတာ္ေရြးလုိက္ပါမယ္.
Upload ဆုိတဲ႔ Tab ေလးကို ေရြးပါမယ္.
ကုိယ္တင္ခ်င္တဲ႔ ဖုိင္ေလးေတြကုိ Browse ကေန တစ္ဆင္႔ ေရြးပါမယ္. ျပီးရင္ေတာ႔ Upload လုပ္ပါမယ္.
ကၽြန္ေတာ္တင္ခ်င္တဲ႔ Greenleft.gif နဲ႔ Greenright.gif ဖုိင္ေလးေတြကုိ ေရြးျပီးေတာ႔ Upload လုပ္ပါမယ္.
ေနာက္တစ္မ်က္ႏွာမွာ ေပၚလာမွာကေတာ႔ ကၽြန္ေတာ္တုိ႔တင္လုိက္တဲ႔ ဖုိင္ေလးေတြရဲ႔ URL လင္႔ခ္ေလးေတြပါပဲ. Selection လုပ္ျပထားတဲ႔ URL ေလးေတြကုိ ကူးယူလုိက္ရင္ File Hosting လုပ္တဲ႔ Process ေအာင္ျမင္စြာ ျပီးဆုံးသြားပါျပီ.
အခု ကၽြန္ေတာ္တုိ႔ရဲ႔ Case မွာေတာ႔ ဒီလင္႔ခ္ေလးႏွစ္ခုကုိ ယူလာရပါမယ္.
http://www.fileden.com/files/2007/2/17/784534/greenleft.gif နဲ႔
http://www.fileden.com/files/2007/2/17/784534/greenright.gif တုိ႔ပဲ ျဖစ္ပါတယ္.
အဲဒီ႔လင္႔ခ္ေလးႏွစ္ခုကုိ အေပၚမွာ ေဆြးေႏြးထားခဲ႔သလုိပဲ
http://www.fileden.com/files/2007/2/17/784534/blackleft.gif နဲ႔
http://www.fileden.com/files/2007/2/17/784534/blackright.gif ဆုိတဲဲ႔
ေနရာေလးေတြမွာ အသီးသီး အစားသြင္းေပးလုိက္ရင္ ကုိယ္႔စိတ္ၾကိဳက္ Button ေလးေတြကုိ Menu Tab လုပ္တဲ႔ အဆင္႔ျပီးသြားျပန္ပါျပီ….
အဆင္႔ (၃)
ဒီအဆင္႔က နည္းနည္းခက္ပါတယ္. လန္႔မသြားပါနဲ႔ဦး. သတိထားျပီး ဖတ္ေစခ်င္လုိ႔ပါ. ဘာလုိ႔လဲဆုိေတာ႔ ဘေလာ႔ဂါေတြ သုံးတဲ႔ တန္းပလိတ္ေတြက တစ္ခုနဲ႔ တစ္ခု မတူၾကဘူးမဟုတ္လား. ဒီေတာ႔ အခုျပမယ္႔ Tricks ေလးေတြထဲက တစ္ခုခုနဲ႔ အဆင္ေျပမေျပ ကုိယ္တုိင္ အရင္စမ္းသပ္ၾကည္႔ဖုိ႔ လုိပါတယ္. ဒါေၾကာင္႔ ဒီအဆင္႔ေလးကုိ သတိထားျပီး ဖတ္ေစခ်င္ပါတယ္ ခင္ဗ်ာ.
ပထမဦးဆုံး အခု ကၽြန္ေတာ္ေပးလုိက္မယ္႔ ကုဒ္ဒင္းေလးကုိ ေကာ္ပီကူးထားေစခ်င္ပါတယ္.
<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href=" http://yanaung.blogspot.com/ ">မူလစာမ်က္ႏွာသုိ႔</a></li>
<li><a href="Your Link Here">Your Link Name</a></li>
<li><a href="Your Link Here">Your Link Name</a></li>
</ul>
</div >
ဥပမာ လုပ္ျပေပးထားတဲ႔ လင္႔ခ္ေလးေတြေနရာမွာ ကုိယ္႔စိတ္ၾကိဳက္ လင္႔ခ္ေလးေတြ ထည္႔ေပးဖုိ႔ေတာ႔ မေမ႔ပါနဲ႔.
ရျပီဆုိရင္ေတာ႔ အဲဒီ႔ကုဒ္ဒင္းေလးေတြကုိ ေကာ္ပီကူးျပီး အသင္႔ျပင္ထားေနာ္.
ကဲ. ဆက္လုပ္လုိက္ၾကရေအာင္.
နည္းလမ္း (၁)
<div id="content-wrapper"> ဆုိတဲ႔ ကုဒ္ဒင္းေလးကုိ ေတြ႔ေအာင္ ရွာပါ. ေတြ႔ခဲ႔ရင္ေတာ႔ အခုနက ကၽြန္ေတာ္တုိ႔ ေကာ္ပီကူးထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ အခုေတြ႔ေနရတဲ႔ <div id="content-wrapper"> ဆိုတဲ႔ ကုဒ္ဒင္းေလးအေပၚကေန ကပ္လ်က္ ထည္႔ေပးလုိက္ပါ.
Template ကုိ Save မလုပ္ပါနဲ႔ဦး. အရင္ဆုံး Preview ၾကည္႔ၾကည္႔ပါ. ၾကိဳက္ျပီလား. အုိေက. ဒါဆုိရင္ Save လုပ္လုိ႔ရပါျပီ.
ဟာ. မဟုတ္ေသးဘူး. Menu Tab ေပၚေနတဲ႔ ေနရာကုိ မၾကိဳက္ဘူး. ဒါဆုိရင္ေတာ႔ ေနာက္တစ္မ်ိဳး ၾကိဳးစားၾကည္႔ပါမယ္.
တန္းပလိတ္ထဲမွာ </div> ဆုိတဲ႔ ကုဒ္ဒင္းေလးေတြ အမ်ားၾကီးရွိပါတယ္. အဲဒါေလးေတြကုိ ရွာျပီး အေပၚကေန ကပ္လ်က္မွာ ေကာ္ပီကူးဖုိ႔ ေျပာထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ. တန္းပလိတ္ထဲမွာ </div> ဆုိတာေလးေတြ အမ်ားၾကီးပါပါလိမ္႔မယ္. ၾကိဳးစားၾကည္႔ပါ. ကုိယ္႔စိတ္ၾကိဳက္ေနရာမွာ Menu Tab ေလးေပၚလာသည္အထိေပါ႔. Preview ခဏခဏ လုပ္ၾကည္႔ပါ. စိတ္ၾကိဳက္ရျပီဆုိေတာ႔မွ Save Template လုပ္ပါ.
ဒါက နည္းလမ္း (၁) ေပါ႔. တန္းပလိတ္အမ်ားစုက ဒီနည္းလမ္းနဲ႔ အဆင္ေျပတတ္ၾကပါတယ္.
မေျပဘူးဆုိခဲ႔ရင္ေရာ…
Fine! Here is another method…
နည္းလမ္း (၂)
တန္းပလိတ္ထဲမွာ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ လုိက္ရွာပါ.
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
ေတြ႔ခဲ႔ရင္ အနီေရာင္ေနရာေလးေတြကုိ အခုလုိ ျပင္လုိက္ပါ.
<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
ျပီးသြားခဲ႔ရင္ေတာ႔ တန္းပလိတ္ကုိ Save လုပ္ခဲ႔ပါ. ျပီးရင္ Page Element> Add Page Element> HTML/Javascript ကို ေရြးပါ. ရျပီဆုိရင္ေတာ႔ ခုနက ေကာ္ပီကူးခုိင္းထားတဲ႔ ကုဒ္ဒင္းေလးေတြကုိ ေပၚလာမယ္႔ Content Box ေလးထဲမွာ ထည္႔ေပးလုိက္ပါ. Save လုပ္ပါ. Preview ၾကည္႔ၾကည္႔ပါ.
ကဲ. အဆင္ေျပေခ်ာေမြ႔ၾကပါေစဗ်ာ. အဆင္မေျပခဲ႔တာေတြ ရွိခဲ႔ရင္လည္း ေကာ္မန္႔မွာ ေမးျမန္းႏုိင္ပါတယ္.
Menu Tab တင္နည္း ပုံစံ (၂) ကုိ မၾကာခင္ ဆက္လက္ေရးသားေဆြးေႏြးေပးသြားပါမယ္.
Acknowledgement:
ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိျဖည္႔စြက္ ေရးသားထားျခင္းျဖစ္ပါတယ္ ခင္ဗ်ာ....
အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္.
Read More...
ဓာတ္ပုံေတြကုိ မူရင္းအရြယ္အစားအတုိင္း ေပၚေစလုိလွ်င္...
written by Yan
at Tuesday, May 6, 2008
Contributor: ရန္ေအာင္
အားလုံးပဲ မဂၤလာပါ.
ဒီတစ္ခါေတာ႔ ဘေလာ႔ဂ္မွာ ဓာတ္ပုံေတြ တင္တဲ႔ အေၾကာင္းေလး ေဆြးေႏြးခ်င္ပါတယ္…
အဲလုိေျပာလုိက္လုိ႔. “ဟာ… ဒီတို္င္းဓာတ္ပုံေကာက္တင္တာမ်ား ေရးၾကီးခြင္က်ယ္ ပုိ႔စ္တစ္ခုေရးေနစရာလား” လုိ႔ အေျပာမေစာလုိက္ပါနဲ႔ဦး.
မတူပါဘူးခင္ဗ်ာ. အထူးသျဖင္႔ Screenshot နဲ႔ ရုိက္ယူထားတဲ႔ Thumbnail အရြယ္အစားဓာတ္ပုံေလးေတြဆုိရင္ ဘေလာ႔ဂ္မွာ ဒီတုိင္းတင္လုိက္ရင္ သိပ္ျပီးေတာ႔ မသဲကဲြ မျပတ္သားေတြ ရွိႏုိင္ပါတယ္. အဲဒီ႔အခ်ိန္က်ရင္ ဒီပုိ႔စ္ေလးရဲ႔ အသုံး၀င္ပုံကုိ သတိတရ ရွိေနၾကလိမ္႔မယ္လုိ႔ ေမွ်ာ္လင္႔ပါတယ္.
မတူပုံကုိ ဒီမွာၾကည္႔ပါ.
ဒါက PayPal Website မွာ ကၽြန္ေတာ္ေျပာျပခ်င္တဲ႔ အပုိင္းေလးကုိ Screenshot ရုိက္ယူခဲ႔ပါတယ္. ျပီးေတာ႔ ဓာတ္ပုံတင္တဲ႔အခါမွာ Large ကုိ ေရြးျပီး တင္လုိက္ပါတယ္.
လက္ေတြ႔မွာ ထြက္လာတဲ႔ ပုံက ဒီလုိပါ.
စာဖတ္သူမွာ ေတာ္ေတာ္ေလးကုိ အားစုိက္ျပီး ဖတ္ယူရလိမ္႔မယ္လုိ႔ ထင္ပါတယ္. ဒီေတာ႔ စာဖတ္သူဟာ အဲဒ႔ီပုံေလးကုိ ကလစ္ေခါက္လုိက္ျပီး အသစ္ပြင္႔လာမယ္႔ Windows မွာ ပုံၾကီးၾကီးနဲ႔ ေပၚလာတာကို ျပန္ၾကည္႔ယူရပါတယ္.
အလုပ္ရႈပ္သြားတာေပါ႔ဗ်ာ ေနာ္.အဲဒါကုိ ေျဖရွင္းခ်င္လုိ႔ ဒီပုိ႔စ္ေလးေရးတာပါ.
ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔ ခုနက တင္လုိက္တဲ႔ ဓာတ္ပုံမွာ ဘာေတြထူးျခားသြားလဲဆုိတာေလးကုိ သူ႔ရဲ႔ ကုဒ္ဒင္းေလး ယူျပီး ၾကည္႔လုိက္ၾကရေအာင္.
Code:
အဲဒီ႔မွာ စာေၾကာင္းႏွစ္ေၾကာင္းရဲ႔ ထူးျခားခ်က္ကုိ ေလ႔လာၾကည္႔လုိက္ၾကရေအာင္.
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/s1600-h/PayPal8.bmp">
နဲ႔
src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/s400/PayPal8.bmp
သူတို႔ႏွစ္ေၾကာင္းမွာ ကြာျခားခ်က္တစ္ခုပဲ ရွိပါတယ္. ဘာလဲဆုိေတာ႔ s1600-h နဲ႔ s400 ပါ. က်န္တာအားလုံးအတူတူပဲ ျဖစ္ပါတယ္.
သူတုိ႔ေတြက ဘာကုိဆုိလုိတာလဲ ဆက္ၾကည္႔လုိက္ၾကရေအာင္.
အေပၚက s1600-h ပါတဲ႔ စာေၾကာင္းက စာဖတ္သူအေနနဲ႔ ဘေလာ႔ဂ္ေပၚက ဓာတ္ပုံကုိ ကလစ္ေခါက္လုိက္ရင္ ေပၚလာမယ္႔ နဂုိမူရင္း အရြယ္အစားရွိတဲ႔ ဓာတ္ပုံျဖစ္ပါတယ္.
ေအာက္က စာေၾကာင္းေလးထဲမွာပါတဲ႔ s400 ကေတာ႔ မူရင္း ဓာတ္ပုံကုိ က်ဳံ႔လုိက္ျပီး ဘေလာ႔ဂ္ေပၚတင္လုိ႔ရေအာင္ လုပ္ေပးထားတာ ျဖစ္ပါတယ္.
ကၽြန္ေတာ္တုိ႔က လက္ရွိ Blogger Platform က ေပးထားတဲ႔ ဓာတ္ပုံဆုိဒ္ထက္ ပုိၾကီးတာလုိခ်င္ေနတယ္.
ဆုိလုိတာက နဂုိမူရင္း အရြယ္အစားကုိပဲ တင္ခ်င္တာ. ဒါမွ စာေသးေသးေလးေတြပါ ေပၚမယ္ေလ.
ဒီေတာ႔ ဘာလုပ္မလဲ.
လြယ္ပါတယ္.
အဲဒီ႔ အရြယ္အစားကုိ ကန္႔သတ္ေပးေနတဲ႔ s1600 တုိ႔၊ s400 (Large ျဖစ္လွ်င္)၊ s320 (Medium ျဖစ္လွ်င္)၊ s200 (Small ျဖစ္လွ်င္) ေတြကုိ ဖ်က္လုိက္ရုံပါပဲ.
ေအာက္ကပုံစံေလးအတုိင္း ျပင္ေပးလုိက္ရုံပါပဲေလ…
ဒါဆုိရင္ အခုလုိမ်ိဳး မူရင္းအရြယ္အစားအတုိင္း ရွိတဲ႔ ဓာတ္ပုံေလးေတြကုိ မိမိတုိ႔ရဲ႔ ဘေလာ႔ဂ္ေလးေတြေပၚမွာ အကန္႔အသတ္ အဆီးအတားမရွိ တင္ႏုိင္ပါျပီ ခင္ဗ်ား
က်န္တဲ႔ အသုံးခ်လုိ႔ ရႏုိင္ဦးမယ္႔ အပိုင္းေတြကုိေတာ႔ ဥာဏ္ရွိသလုိ အသုံးခ်ပါလုိ႔ပဲ တုိက္တြန္းေျပာဆုိလုိပါတယ္…
ကဲ. ႏိႈင္းယွဥ္ျပီးေတာ႔ အကဲျဖတ္ၾကည္႔ပါခင္ဗ်ာ…
Before:
After:
၀န္ခံခ်က္။ ။
ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိေရးသားပါတယ္ ခင္ဗ်ာ...
အားလုံးကို ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္ Read More...
အားလုံးပဲ မဂၤလာပါ.
ဒီတစ္ခါေတာ႔ ဘေလာ႔ဂ္မွာ ဓာတ္ပုံေတြ တင္တဲ႔ အေၾကာင္းေလး ေဆြးေႏြးခ်င္ပါတယ္…
အဲလုိေျပာလုိက္လုိ႔. “ဟာ… ဒီတို္င္းဓာတ္ပုံေကာက္တင္တာမ်ား ေရးၾကီးခြင္က်ယ္ ပုိ႔စ္တစ္ခုေရးေနစရာလား” လုိ႔ အေျပာမေစာလုိက္ပါနဲ႔ဦး.
မတူပါဘူးခင္ဗ်ာ. အထူးသျဖင္႔ Screenshot နဲ႔ ရုိက္ယူထားတဲ႔ Thumbnail အရြယ္အစားဓာတ္ပုံေလးေတြဆုိရင္ ဘေလာ႔ဂ္မွာ ဒီတုိင္းတင္လုိက္ရင္ သိပ္ျပီးေတာ႔ မသဲကဲြ မျပတ္သားေတြ ရွိႏုိင္ပါတယ္. အဲဒီ႔အခ်ိန္က်ရင္ ဒီပုိ႔စ္ေလးရဲ႔ အသုံး၀င္ပုံကုိ သတိတရ ရွိေနၾကလိမ္႔မယ္လုိ႔ ေမွ်ာ္လင္႔ပါတယ္.
မတူပုံကုိ ဒီမွာၾကည္႔ပါ.
ဒါက PayPal Website မွာ ကၽြန္ေတာ္ေျပာျပခ်င္တဲ႔ အပုိင္းေလးကုိ Screenshot ရုိက္ယူခဲ႔ပါတယ္. ျပီးေတာ႔ ဓာတ္ပုံတင္တဲ႔အခါမွာ Large ကုိ ေရြးျပီး တင္လုိက္ပါတယ္.
လက္ေတြ႔မွာ ထြက္လာတဲ႔ ပုံက ဒီလုိပါ.
စာဖတ္သူမွာ ေတာ္ေတာ္ေလးကုိ အားစုိက္ျပီး ဖတ္ယူရလိမ္႔မယ္လုိ႔ ထင္ပါတယ္. ဒီေတာ႔ စာဖတ္သူဟာ အဲဒ႔ီပုံေလးကုိ ကလစ္ေခါက္လုိက္ျပီး အသစ္ပြင္႔လာမယ္႔ Windows မွာ ပုံၾကီးၾကီးနဲ႔ ေပၚလာတာကို ျပန္ၾကည္႔ယူရပါတယ္.
အလုပ္ရႈပ္သြားတာေပါ႔ဗ်ာ ေနာ္.အဲဒါကုိ ေျဖရွင္းခ်င္လုိ႔ ဒီပုိ႔စ္ေလးေရးတာပါ.
ဒီေတာ႔ ကၽြန္ေတာ္တုိ႔ ခုနက တင္လုိက္တဲ႔ ဓာတ္ပုံမွာ ဘာေတြထူးျခားသြားလဲဆုိတာေလးကုိ သူ႔ရဲ႔ ကုဒ္ဒင္းေလး ယူျပီး ၾကည္႔လုိက္ၾကရေအာင္.
Code:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/s1600-h/PayPal8.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/s400/PayPal8.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5197518797336563474" /></a>
အဲဒီ႔မွာ စာေၾကာင္းႏွစ္ေၾကာင္းရဲ႔ ထူးျခားခ်က္ကုိ ေလ႔လာၾကည္႔လုိက္ၾကရေအာင္.
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/s1600-h/PayPal8.bmp">
နဲ႔
src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/s400/PayPal8.bmp
သူတို႔ႏွစ္ေၾကာင္းမွာ ကြာျခားခ်က္တစ္ခုပဲ ရွိပါတယ္. ဘာလဲဆုိေတာ႔ s1600-h နဲ႔ s400 ပါ. က်န္တာအားလုံးအတူတူပဲ ျဖစ္ပါတယ္.
သူတုိ႔ေတြက ဘာကုိဆုိလုိတာလဲ ဆက္ၾကည္႔လုိက္ၾကရေအာင္.
အေပၚက s1600-h ပါတဲ႔ စာေၾကာင္းက စာဖတ္သူအေနနဲ႔ ဘေလာ႔ဂ္ေပၚက ဓာတ္ပုံကုိ ကလစ္ေခါက္လုိက္ရင္ ေပၚလာမယ္႔ နဂုိမူရင္း အရြယ္အစားရွိတဲ႔ ဓာတ္ပုံျဖစ္ပါတယ္.
ေအာက္က စာေၾကာင္းေလးထဲမွာပါတဲ႔ s400 ကေတာ႔ မူရင္း ဓာတ္ပုံကုိ က်ဳံ႔လုိက္ျပီး ဘေလာ႔ဂ္ေပၚတင္လုိ႔ရေအာင္ လုပ္ေပးထားတာ ျဖစ္ပါတယ္.
ကၽြန္ေတာ္တုိ႔က လက္ရွိ Blogger Platform က ေပးထားတဲ႔ ဓာတ္ပုံဆုိဒ္ထက္ ပုိၾကီးတာလုိခ်င္ေနတယ္.
ဆုိလုိတာက နဂုိမူရင္း အရြယ္အစားကုိပဲ တင္ခ်င္တာ. ဒါမွ စာေသးေသးေလးေတြပါ ေပၚမယ္ေလ.
ဒီေတာ႔ ဘာလုပ္မလဲ.
လြယ္ပါတယ္.
အဲဒီ႔ အရြယ္အစားကုိ ကန္႔သတ္ေပးေနတဲ႔ s1600 တုိ႔၊ s400 (Large ျဖစ္လွ်င္)၊ s320 (Medium ျဖစ္လွ်င္)၊ s200 (Small ျဖစ္လွ်င္) ေတြကုိ ဖ်က္လုိက္ရုံပါပဲ.
ေအာက္ကပုံစံေလးအတုိင္း ျပင္ေပးလုိက္ရုံပါပဲေလ…
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFjUwMcjmTnztYXt9znYxzr63feCmxbFws9NPshE2KHrl9rTKp5K-m-wyo_OqZr976gj5aTYOe-q0pcSZuv8mIU95eG0o6aSeahKdb7hZAUT6RJh0-dn-JBLnSSQOzmFJkOLxtHryyNwe/" border="0" alt=""id="BLOGGER_PHOTO_ID_5197518797336563474" /></a>
ဒါဆုိရင္ အခုလုိမ်ိဳး မူရင္းအရြယ္အစားအတုိင္း ရွိတဲ႔ ဓာတ္ပုံေလးေတြကုိ မိမိတုိ႔ရဲ႔ ဘေလာ႔ဂ္ေလးေတြေပၚမွာ အကန္႔အသတ္ အဆီးအတားမရွိ တင္ႏုိင္ပါျပီ ခင္ဗ်ား
က်န္တဲ႔ အသုံးခ်လုိ႔ ရႏုိင္ဦးမယ္႔ အပိုင္းေတြကုိေတာ႔ ဥာဏ္ရွိသလုိ အသုံးခ်ပါလုိ႔ပဲ တုိက္တြန္းေျပာဆုိလုိပါတယ္…
ကဲ. ႏိႈင္းယွဥ္ျပီးေတာ႔ အကဲျဖတ္ၾကည္႔ပါခင္ဗ်ာ…
Before:
After:
၀န္ခံခ်က္။ ။
ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိေရးသားပါတယ္ ခင္ဗ်ာ...
အားလုံးကို ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္ Read More...
Adding a top of page icon link in blog
written by CHAN MYA SOE
at Saturday, April 19, 2008
Contributor: CMS
Source : Blogger Buster Read More...
Blog
တုိင္းမွာ ထည့္သြင္းထားသင့္တဲ့ Link Icon တစ္ခုလို႔ ထင္ပါတယ္။
ကိုယ့္ဘေလာ့ရဲ႕ ပို႔စ္ေတြကို reader ေတြ ဖတ္ရင္း Blog Page ရဲ႕
ေအာက္ဆံုးကို ေရာက္သြားတဲ့အခါမွာ top of the page ကို
ျပန္သြားႏုိင္ဖို႔အတြက္ ရည္ရြယ္ပါတယ္။ ကၽြန္ေတာ့္ Blog
ရဲ႕ bottom-right hand corner မွာ ထည့္သြင္းထားတာကို ေတြ႔ျမင္ႏုိင္ပါတယ္။
ထည့္သြင္း အသံုးျပဳပံုကေတာ့ အရမ္း လြယ္ကူပါတယ္။ Blogger မွာ sign in လုပ္၊
layout page ကိုသြားၿပီး Add a page element ကို ေရြးရပါမယ္။ Element list
ထဲကေန HTML/Javascript ကိုေရြးၿပီး ေအာက္ပါ coding ကို
ထည့္သြင္းေပးလိုက္ရံုပါပဲ။
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top">
<img src="http://farm3.static.flickr.com/2112/2424600997_f0ef13d47b_o.gif"/></a>
Source : Blogger Buster Read More...
Alert Message Box ေလးမ်ားလုပ္နည္း
written by Yan
at Thursday, April 17, 2008
Contributor: ရန္ေအာင္
အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ…
ဒီတစ္ခါေတာ႔ အသစ္အဆန္းေလးတစ္ခု ေတြ႔ရွိလုိ႔ ျပန္လည္ ေ၀မွ်ခ်င္ပါတယ္.
ဘာလဲဆုိေတာ႔ Alert Message Box ေလးေတြ လုပ္နည္းပါ.
ကုိယ္႔ဘေလာ႔ဂ္ (သုိ႔) ၀က္ဘ္ဆုိက္ထဲကုိ ၀င္လာတဲ႔ စာဖတ္သူကုိ Message Box ေလးနဲ႔ ၾကိဳဆုိတာပဲျဖစ္ေစ၊ သိေစခ်င္တဲ႔ ေၾကျငာခ်က္ေလးေတြကုိ Highlight လုပ္ျပတာပဲ ျဖစ္ေစျဖစ္ေစ၊ သတိေပးေၾကျငာခ်င္တာေလးေတြကုိ ေျပာျပခ်င္တာပဲ ျဖစ္ေစေပါ႔ အလုိရွိသလုိ အသုံးခ်ႏုိင္ပါတယ္.
Message Box ေလးေတြကုိ လုပ္နည္း အမ်ိဳးမ်ိဳးရွိတဲ႔ အထဲက အဆင္ေျပဆုံး နည္းလမ္းေလးကုိ ေရြးခ်ယ္ျပီး ျပန္လည္ေဆြးေႏြးထားျခင္းသာ ျဖစ္ပါတယ္.
ကဲ. စလုိက္ၾကရေအာင္လားဗ်ာ…
Alert Box with OK Button
အဲဒါေလးကုိ လုပ္ဖုိ႔အတြက္ Template ထဲကုိသြားပါ. Page Elements ကုိသြားပါ. ျပီးေတာ႔ Add a page Element လုပ္ျပီး HTML/Javascript ကုိေရြးပါ. ျပီးရင္ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ.
<script type="text/javascript">
alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>
အနီေရာင္နဲ႔ ျပထားတာေလးေတြက ကုိယ္ေပၚေစခ်င္တဲ႔ Message ေလးေတြပါ. အျပာေရာင္ေလးနဲ႔ ျပထားတာေလးကေတာ႔ တကယ္လုိ႔မ်ား user က သူ႔ရဲ႔ Browser မွာ Javascript Functions ကုိ off လုပ္ထားခဲ႔ရင္ ျပန္ဖြင္႔ေအာင္ သတိေပးထားတာပါ.
ျမန္မာလုိ ေပၚေစခ်င္တယ္ဆုိရင္ေတာ႔ Zawgyi-One ကုိ ထည္႔ေၾကျငာေပးရပါမယ္. ဒီမွာ အစမ္းလုပ္ျပထားတာ ၾကည္႔ပါ.
<script type="text/javascript">
alert(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္.'</font>)
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>
ဒါမ်ိဳးေလးေပၚလာမွာ ျဖစ္ပါတယ္.
Alert Box with Confirmation Button
ဒါကက်ေတာ႔ စာဖတ္သူကုိ ေရြးခ်ယ္ခြင္႔ေပးတာပါ. ဆက္သြားမလား. ဒါမွမဟုတ္ မဖတ္ေတာ႔ဘဲ ျပန္ထြက္မလားဆိုတာကုိ ေရြးခုိင္းတာေပါ႔.
ခုနကလုိပါပဲ. Template ထဲကုိသြားပါ. Page Elements ကုိသြားပါ. ျပီးေတာ႔ Add a page Element လုပ္ျပီး HTML/Javascript ကုိေရြးပါ. ျပီးရင္ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ.
<script type="text/javascript">
confirm('This site contains explicit blogger hacks and tircks. You might bet dizzy. Are you sure you want to continue?');
if (confirm('This site contains explicit blogger hacks and tricks. You might bet dizzy. Are you sure you want to continue?')) {
window.location = "http://mmbloggershelpdesk.blogspot.com/";
}
else {
window.location = "http://www.yanaung.blogspot.com/";
}
</script>
အနီေရာင္နဲ႔ ျပထားတာေလးေတြက သင္ေပၚေစခ်င္တဲ႔ စာေၾကာင္းေလးေတြ ျဖစ္ပါတယ္. အျပာေရာင္ေလးနဲ႔ ျပထားတာေလးကေတာ႔ OK Button ကုိ ႏွိပ္လုိက္ရင္ ေရာက္ရွိသြားမယ္႔ လင္႔ခ္ျဖစ္ပါတယ္. လိေမၼာ္ေရာင္ေလးနဲ႔ ျပထားတာကေတာ႔ Cancel Button ကုိ ႏွိပ္လုိက္ရင္ စာဖတ္သူကုိ ျပန္ျပီးေတာ႔ Redirect လုပ္ေပးမယ္႔ စာမ်က္ႏွာျဖစ္ပါတယ္.
ဒါကေတာ႔ ျမန္မာလုိ ဥပမာေပးထားတာပါ.
<script type="text/javascript">
confirm(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္. OK ကုိ ႏွိပ္လုိက္ရင္ ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ေလးကုိ ေရာက္လာမွာ ျဖစ္ျပီးေတာ႔ Cancel ကုိ ႏွိပ္လုိက္ရင္ေတာ႔ Helpdesk Blog ေလးကို ေရာက္သြားပါလိမ္႔မယ္. It’s up to you!'</font>);
if (confirm(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္. OK ကုိ ႏွိပ္လုိက္ရင္ ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ေလးီကုိ ေရာက္လာမွာ ျဖစ္ျပီးေတာ႔ Cancel ကုိ ႏွိပ္လုိက္ရင္ေတာ႔ Helpdesk Blog ေလးကို ေရာက္သြားပါလိမ္႔မယ္. It’s up to you!'</font>)) {
window.location = "http://yanaung.blogspot.com/";
}
else {
window.location = "http://mmbloggershelpdesk.blogspot.com/";
}
</script>
ဒီလုိေလး ျဖစ္သြားပါလိမ္႔မယ္...
ဒီေလာက္ပါပဲ…
သိပ္ေတာ႔ အခက္အခဲမရွိလွဘူးလုိ႔ ထင္ပါတယ္.
ကဲ. ေကာင္းက်ိဳးဆုိးက်ဳိးေလးေတြ ဆက္ေဆြးေႏြးၾကည္႔လုိက္ၾကရေအာင္လားဗ်ာ..
ဒီလုိ Message Box ေလးေတြ လုပ္ထားတာဟာ ကုိယ္႔ရဲ႔ ဘေလာ႔ဂ္ (၀ါ) ၀က္ဘ္ဆုိက္အတြက္ လိုအပ္မွသာ လုပ္သင္႔ပါတယ္. ဘာလုိ႔လဲဆုိေတာ႔ အဲဒီ႔ Message Box ေလးေတြဟာ System Dialog Windows ေလးေတြ ျဖစ္ေနလုိ႔ပါပဲ. ဆုိလုိတာက ဒီ Box ေလးေတြ ေပၚဖုိ႔အတြက္ Browser မွာ Javascript ကုိ Enable လုပ္ထားရပါမယ္. ဒီေတာ႔ ကုိယ္႔ရဲ႔ Blog Page (or) Web Page ကုိ Upload လုပ္ေနရတဲ႔ အခ်ိန္ ပုိၾကာသြားႏုိင္ပါတယ္.
ေကာင္းတဲ႔ဖက္က ၾကည႔္မယ္ဆုိရင္ေတာ႔လည္း စာဖတ္သူကုိ Respect ေပးရာက်ပါတယ္.
ဥပမာဗ်ာ. ညစ္ညမ္းတဲ႔ Website တစ္ခုကို ၀င္ေတာ႔မယ္ ဆုိရင္.
“You must be at least 18 years old to enter this site!” ဆုိတဲ႔ Message Box ေလး ေပၚလာျပီး OK ႏွိပ္လုိက္မွ ဆက္ျပီး ခြင္႔ျပဳတာမ်ိဳးဆုိရင္ Internet Law ကုိ လုိက္နာရာက်ပါတယ္.
ဒါက ဥပမာ ေျပာျပတာပါ. တစ္ျခား အသုံး၀င္ေအာင္ သုံးတတ္ရင္ သုံးလုိ႔ျဖစ္မယ္႔ ေနရာေတြ အမ်ားၾကီး ရွိပါေသးတယ္. ၾကိဳက္သလုိသုံးပါ. ဥာဏ္ရွိသလုိ သုံးပါ.
ကၽြန္ေတာ္တုိ႔ ဘေလာ႔ဂ္ေလာကမွာေတာ႔ ဘာစည္းမ်ဥ္းဥပေဒသမွ မရိွေသးပါဘူး. ဒါေပမယ္႔ ဒီ Message box ေလးေတြဟာ စာဖတ္သူရဲ႔ ဥာဏ္ကြန္႔ျမဴးႏုိင္မႈေပၚ မူတည္ျပီး အမ်ိဳးမ်ိဳး အဖုံဖုံ အသုံး၀င္လာႏုိင္တာမုိ႔ ကၽြန္ေတာ္ဖတ္မွတ္ခဲ႔ဖူးတာေလးကုိ ျပန္လည္ေ၀မွ်လုိက္ျခင္းသာ ျဖစ္ပါတယ္ ခင္ဗ်ာ…
မွတ္ခ်က္။
သုံးတဲ႔ Browser နဲ႔ Operating Systems (ME, XP, Vista) စတာေတြေပၚ မူတည္ျပီးေတာ႔ ေပၚလာမယ္႔ Message Box ေလးေတြရဲ႔ ပုံစံလည္း ကဲြျပားျခားနားႏုိင္ပါတယ္.
အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္
Read More...
အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ…
ဒီတစ္ခါေတာ႔ အသစ္အဆန္းေလးတစ္ခု ေတြ႔ရွိလုိ႔ ျပန္လည္ ေ၀မွ်ခ်င္ပါတယ္.
ဘာလဲဆုိေတာ႔ Alert Message Box ေလးေတြ လုပ္နည္းပါ.
ကုိယ္႔ဘေလာ႔ဂ္ (သုိ႔) ၀က္ဘ္ဆုိက္ထဲကုိ ၀င္လာတဲ႔ စာဖတ္သူကုိ Message Box ေလးနဲ႔ ၾကိဳဆုိတာပဲျဖစ္ေစ၊ သိေစခ်င္တဲ႔ ေၾကျငာခ်က္ေလးေတြကုိ Highlight လုပ္ျပတာပဲ ျဖစ္ေစျဖစ္ေစ၊ သတိေပးေၾကျငာခ်င္တာေလးေတြကုိ ေျပာျပခ်င္တာပဲ ျဖစ္ေစေပါ႔ အလုိရွိသလုိ အသုံးခ်ႏုိင္ပါတယ္.
Message Box ေလးေတြကုိ လုပ္နည္း အမ်ိဳးမ်ိဳးရွိတဲ႔ အထဲက အဆင္ေျပဆုံး နည္းလမ္းေလးကုိ ေရြးခ်ယ္ျပီး ျပန္လည္ေဆြးေႏြးထားျခင္းသာ ျဖစ္ပါတယ္.
ကဲ. စလုိက္ၾကရေအာင္လားဗ်ာ…
Alert Box with OK Button
အဲဒါေလးကုိ လုပ္ဖုိ႔အတြက္ Template ထဲကုိသြားပါ. Page Elements ကုိသြားပါ. ျပီးေတာ႔ Add a page Element လုပ္ျပီး HTML/Javascript ကုိေရြးပါ. ျပီးရင္ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ.
<script type="text/javascript">
alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>
အနီေရာင္နဲ႔ ျပထားတာေလးေတြက ကုိယ္ေပၚေစခ်င္တဲ႔ Message ေလးေတြပါ. အျပာေရာင္ေလးနဲ႔ ျပထားတာေလးကေတာ႔ တကယ္လုိ႔မ်ား user က သူ႔ရဲ႔ Browser မွာ Javascript Functions ကုိ off လုပ္ထားခဲ႔ရင္ ျပန္ဖြင္႔ေအာင္ သတိေပးထားတာပါ.
ျမန္မာလုိ ေပၚေစခ်င္တယ္ဆုိရင္ေတာ႔ Zawgyi-One ကုိ ထည္႔ေၾကျငာေပးရပါမယ္. ဒီမွာ အစမ္းလုပ္ျပထားတာ ၾကည္႔ပါ.
<script type="text/javascript">
alert(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္.'</font>)
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>
ဒါမ်ိဳးေလးေပၚလာမွာ ျဖစ္ပါတယ္.
Alert Box with Confirmation Button
ဒါကက်ေတာ႔ စာဖတ္သူကုိ ေရြးခ်ယ္ခြင္႔ေပးတာပါ. ဆက္သြားမလား. ဒါမွမဟုတ္ မဖတ္ေတာ႔ဘဲ ျပန္ထြက္မလားဆိုတာကုိ ေရြးခုိင္းတာေပါ႔.
ခုနကလုိပါပဲ. Template ထဲကုိသြားပါ. Page Elements ကုိသြားပါ. ျပီးေတာ႔ Add a page Element လုပ္ျပီး HTML/Javascript ကုိေရြးပါ. ျပီးရင္ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ.
<script type="text/javascript">
confirm('This site contains explicit blogger hacks and tircks. You might bet dizzy. Are you sure you want to continue?');
if (confirm('This site contains explicit blogger hacks and tricks. You might bet dizzy. Are you sure you want to continue?')) {
window.location = "http://mmbloggershelpdesk.blogspot.com/";
}
else {
window.location = "http://www.yanaung.blogspot.com/";
}
</script>
အနီေရာင္နဲ႔ ျပထားတာေလးေတြက သင္ေပၚေစခ်င္တဲ႔ စာေၾကာင္းေလးေတြ ျဖစ္ပါတယ္. အျပာေရာင္ေလးနဲ႔ ျပထားတာေလးကေတာ႔ OK Button ကုိ ႏွိပ္လုိက္ရင္ ေရာက္ရွိသြားမယ္႔ လင္႔ခ္ျဖစ္ပါတယ္. လိေမၼာ္ေရာင္ေလးနဲ႔ ျပထားတာကေတာ႔ Cancel Button ကုိ ႏွိပ္လုိက္ရင္ စာဖတ္သူကုိ ျပန္ျပီးေတာ႔ Redirect လုပ္ေပးမယ္႔ စာမ်က္ႏွာျဖစ္ပါတယ္.
ဒါကေတာ႔ ျမန္မာလုိ ဥပမာေပးထားတာပါ.
<script type="text/javascript">
confirm(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္. OK ကုိ ႏွိပ္လုိက္ရင္ ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ေလးကုိ ေရာက္လာမွာ ျဖစ္ျပီးေတာ႔ Cancel ကုိ ႏွိပ္လုိက္ရင္ေတာ႔ Helpdesk Blog ေလးကို ေရာက္သြားပါလိမ္႔မယ္. It’s up to you!'</font>);
if (confirm(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္. OK ကုိ ႏွိပ္လုိက္ရင္ ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ေလးီကုိ ေရာက္လာမွာ ျဖစ္ျပီးေတာ႔ Cancel ကုိ ႏွိပ္လုိက္ရင္ေတာ႔ Helpdesk Blog ေလးကို ေရာက္သြားပါလိမ္႔မယ္. It’s up to you!'</font>)) {
window.location = "http://yanaung.blogspot.com/";
}
else {
window.location = "http://mmbloggershelpdesk.blogspot.com/";
}
</script>
ဒီလုိေလး ျဖစ္သြားပါလိမ္႔မယ္...
ဒီေလာက္ပါပဲ…
သိပ္ေတာ႔ အခက္အခဲမရွိလွဘူးလုိ႔ ထင္ပါတယ္.
ကဲ. ေကာင္းက်ိဳးဆုိးက်ဳိးေလးေတြ ဆက္ေဆြးေႏြးၾကည္႔လုိက္ၾကရေအာင္လားဗ်ာ..
ဒီလုိ Message Box ေလးေတြ လုပ္ထားတာဟာ ကုိယ္႔ရဲ႔ ဘေလာ႔ဂ္ (၀ါ) ၀က္ဘ္ဆုိက္အတြက္ လိုအပ္မွသာ လုပ္သင္႔ပါတယ္. ဘာလုိ႔လဲဆုိေတာ႔ အဲဒီ႔ Message Box ေလးေတြဟာ System Dialog Windows ေလးေတြ ျဖစ္ေနလုိ႔ပါပဲ. ဆုိလုိတာက ဒီ Box ေလးေတြ ေပၚဖုိ႔အတြက္ Browser မွာ Javascript ကုိ Enable လုပ္ထားရပါမယ္. ဒီေတာ႔ ကုိယ္႔ရဲ႔ Blog Page (or) Web Page ကုိ Upload လုပ္ေနရတဲ႔ အခ်ိန္ ပုိၾကာသြားႏုိင္ပါတယ္.
ေကာင္းတဲ႔ဖက္က ၾကည႔္မယ္ဆုိရင္ေတာ႔လည္း စာဖတ္သူကုိ Respect ေပးရာက်ပါတယ္.
ဥပမာဗ်ာ. ညစ္ညမ္းတဲ႔ Website တစ္ခုကို ၀င္ေတာ႔မယ္ ဆုိရင္.
“You must be at least 18 years old to enter this site!” ဆုိတဲ႔ Message Box ေလး ေပၚလာျပီး OK ႏွိပ္လုိက္မွ ဆက္ျပီး ခြင္႔ျပဳတာမ်ိဳးဆုိရင္ Internet Law ကုိ လုိက္နာရာက်ပါတယ္.
ဒါက ဥပမာ ေျပာျပတာပါ. တစ္ျခား အသုံး၀င္ေအာင္ သုံးတတ္ရင္ သုံးလုိ႔ျဖစ္မယ္႔ ေနရာေတြ အမ်ားၾကီး ရွိပါေသးတယ္. ၾကိဳက္သလုိသုံးပါ. ဥာဏ္ရွိသလုိ သုံးပါ.
ကၽြန္ေတာ္တုိ႔ ဘေလာ႔ဂ္ေလာကမွာေတာ႔ ဘာစည္းမ်ဥ္းဥပေဒသမွ မရိွေသးပါဘူး. ဒါေပမယ္႔ ဒီ Message box ေလးေတြဟာ စာဖတ္သူရဲ႔ ဥာဏ္ကြန္႔ျမဴးႏုိင္မႈေပၚ မူတည္ျပီး အမ်ိဳးမ်ိဳး အဖုံဖုံ အသုံး၀င္လာႏုိင္တာမုိ႔ ကၽြန္ေတာ္ဖတ္မွတ္ခဲ႔ဖူးတာေလးကုိ ျပန္လည္ေ၀မွ်လုိက္ျခင္းသာ ျဖစ္ပါတယ္ ခင္ဗ်ာ…
မွတ္ခ်က္။
သုံးတဲ႔ Browser နဲ႔ Operating Systems (ME, XP, Vista) စတာေတြေပၚ မူတည္ျပီးေတာ႔ ေပၚလာမယ္႔ Message Box ေလးေတြရဲ႔ ပုံစံလည္း ကဲြျပားျခားနားႏုိင္ပါတယ္.
အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္
Playtagger နဲ႔ သီခ်င္းတင္နည္း (အေသးစိတ္ ရွင္းလင္းခ်က္)
written by Yan
at Thursday, March 13, 2008
Contributor: ရန္ေအာင္
အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.
အရင္ဆုံး Playtagger ေလးအေၾကာင္း ပုိရွင္းေအာင္ ေဆြးေႏြးခ်င္ပါတယ္.
ကဲ. လုိရင္းကုိ တုိက္ရုိက္မသြားခင္ ဘာေၾကာင္႔ ဒီလုိ Process ေလးေတြ လုပ္ရတယ္ဆုိတာကုိ ေနာက္ျပန္ ျပန္စဥ္းစားလုိက္ရေအာင္လား..
သီခ်င္းတင္ခ်င္တယ္.
အုိေက..
ဒါဆုိရင္ အဲဒီ႔သီခ်င္းကုိ ဘယ္မွာတင္မွာလဲ.
အင္တာနက္ေပၚမွာ တင္မွာေပါ႔. ဟုတ္တယ္ဟုတ္.
ဒါဆုိရင္ စဥ္းစားၾကည္႔ရေအာင္လား. ခင္ဗ်ားစက္ထဲမွာ ရွိေနတဲ႔ သီခ်င္းတစ္ပုဒ္ကုိ တစ္ကမၻာလုံးမွာ ရွိေနတဲ႔ အင္တာနက္ သုံးသူေတြ နားဆင္ႏုိင္ေအာင္ ခင္ဗ်ား တစ္ခုခုကုိ လုပ္ရေတာ႔မယ္.
ဒီမွာ ေ၀ါဟာရအသစ္တစ္ခု ၀င္လာျပီ. ဖုိင္ဟုိစတင္း(File Hosting) တဲ႔…
ဒါကို ခင္ဗ်ားနားလည္ဖုိ႔ လုိအပ္လာျပီ.
သူက ဘာလုပ္တာလဲဆုိေတာ႔ ခင္ဗ်ားတင္ခ်င္တဲ႔ သီခ်င္းကို အင္တာနက္ေပၚမွာ တင္ႏုိင္ေအာင္ URL လင္႔ခ္တစ္ခုထုတ္ေပးတာေပါ႔ဗ်ာ. ေျပာရရင္ေတာ႔ အငွားတည္းခုိခြင္႔ျပဳတာေပါ႔. ဒါေၾကာင္႔လည္း သူ႔ကုိ Host လုပ္ေပးတယ္လုိ႔ ေခၚတာေပါ႔.
ဒါဆုိရင္ ပထမအဆင္႔ နားလည္သြားျပီဗ်ာ ေနာ္.
အဲဒါကို အက်ယ္ခ်ဲ႔ျပီး ထပ္ေျပာရရင္ေတာ႔ သီခ်င္းမွတင္မဟုတ္ပါဘူး. အားလုံးအသုံးျပဳႏုိင္ေအာင္ တစ္စုံတစ္ခုကို ေ၀မွ်ေတာ႔မယ္ ဆုိတာနဲ႔ ခင္ဗ်ားဟာ ဖုိင္ဟုိစတင္း ကိစၥကို အနည္းနဲ႔အမ်ား ထိေတြ႔ရေတာ႔မွာ ျဖစ္ပါတယ္. ဖုိင္ဟုိစတင္း ဘယ္လုိလုပ္လဲ ဆုိတဲ႔ အေသးစိတ္ကုိေတာ႔ ကၽြန္ေတာ္ ဒီေနရာမွာ ေဆြးေႏြးခဲ႔ျပီးပါျပီ. ေလ႔လာဖတ္ရႈႏုိင္ပါတယ္ ခင္ဗ်ာ.
ေနာက္တစ္ဆင္႔ ဆက္ေျပာမယ္.
URL Link ကေတာ႔ ရလာပါျပီ. အဲဒါကုိ ဘယ္လုိတင္ျပရမလဲ.
ဒီေနရာမွာ HTML Coding ေလးတစ္ခုကို နားလည္ဖုိ႔ လုိအပ္လာပါျပီ. အမ်ားၾကီးမလုိပါဘူးေနာ္. တကယ္႔ကုိ နည္းနည္းေလးပါ. လင္႔ခ္ခ်ိတ္တဲ႔ ကုဒ္ဒင္းေလးပါပဲ. Anchor Tag လုိ႔ ေခၚပါတယ္.
<a href= "http://www.mmbloggershelpdesk.blogspot.com">Myanmar Bloggers Helpdesk</a>
ဒါဆုိရင္ ကၽြန္ေတာ္တုိ႔ဟာ Myanmar Blogger Helpdesk ဆုိတဲ႔ site ေလးကုိ လင္႔ခ္လွမ္းခ်ိတ္လုိက္တာပဲ ျဖစ္ပါတယ္.
အခု ကၽြန္ေတာ္တုိ႔ သီခ်င္းတင္ဖုိ႔ သီခ်င္းကုိ Host လုပ္ျပီးျပီ. လင္႔ခ္လည္း ထုတ္ျပီးျပီ. တင္ေတာ႔မယ္ဆုိေတာ႔ အေပၚက ျပထားတဲ႔ အတုိင္းေလး လင္႔ခ္ခ်ိတ္လုိုက္ရင္ ရျပီလား…
ကဲ. တင္လုိက္ျပီဗ်ာ.
<a href= “http://www.fileden.com/files/2007/9/23/1451933/Nay%20Chin%20Dar%20Minn%20Ah%20Narr.mp3”>ေနခ်င္တာ မင္းအနားမွာ</a>
ႏွိပ္ၾကည္႔လုိက္ပါ. ဘာျဖစ္မလဲ..
ဘာမွမျဖစ္လာပါဘူး.
လုပ္ပုံလုပ္နည္းကလည္း မွန္ပါရဲ႔နဲ႔ ဘာလုိ႔ ဒီ playtagger ေလးက အလုပ္မလုပ္တာလဲ…
ရွင္းပါတယ္. ကၽြန္ေတာ္တုိ႔ရဲ႔ ဘေလာ႔ဂ္တန္းပလိတ္ထဲမွာ Playtagger နဲ႔ ပတ္သက္တဲ႔ script ေလး မထည္႔ခဲ႔လုိ႔႔ပါ..
အဲဒါကုိ ဘယ္ေနရာမွာ ထည္႔ရမွာလဲ. အဲဒီ႔ script ေလးေတြက ဘာလဲ..
အုိေက. ေဟာဒီ႔မွာဗ်ာ. လုိအပ္တဲ႔ script ေလးေတြ…
<script src='http://del.icio.us/js/playtagger' type='text/javascript'></script>
ဘယ္ေနရာမွာ ထည္႔ရမလဲဆုိေတာ႔ အရင္ဆုံး ကုိယ္႔ဘေလာ႔ဂ္ရဲ႔ တန္းပလိတ္ကုိ သြားပါ.
ျပီးရင္ေတာ႔ </head> ဆုိတာေလးကုိ ေတြ႔ေအာင္ရွာပါ. ရွာလုိ႔ေတြ႔တာနဲ႔ သူ႔အေပၚ ကပ္လ်က္မွာ ခုနက ေပးထားတဲ႔ script ေလးေတြကုိ ထည္႔ေပးလုိက္ပါ. ဒါဆုိရင္ ျပီးသြားပါျပီ…
ကဲ. ကၽြန္ေတာ္ေနာက္ျပန္ေတြပဲ ျပန္ေျပာျပီးသြားျပီေနာ္. အခုေလာက္ဆုိရင္ ကၽြန္ေတာ္တုိ႔ playtagger နဲ႔ သီခ်င္းတင္ႏိုင္ဖုိ႔ ဘာေတြ လုပ္ရမယ္ဆုိတာကုိ ျခဳံငုံသုံးသပ္မိျပီလုိ႔ ယူဆပါတယ္.
(၁) Playtagger Script ေလးကုိ ဘေလာ႔ဂ္တန္းပလိတ္ရဲ႔ </head> Tag မတုိင္ခင္ေလးမွာ ထည္႔ေပးရမယ္.
(၂) တင္ခ်င္တဲ႔ သီခ်င္းကုိ host လုပ္ျပီး လင္႔ခ္ထုတ္ယူရမယ္.
(၃) <a href= “your song URL”>my song</a> ဆုိတဲ႔ ပုံစံေလးနဲ႔ ကုိယ္႔ရဲ႔ ပုိ႔စ္ေလးထဲမွာ တင္ရမယ္.
ဒါဆုိရင္ ျပီးပါျပီ.
ေနခ်င္တာ မင္းအနားမွာ ဆုိတဲ႔ သီခ်င္းေလးကုိ တင္ခ်င္တယ္. ဒီေတာ႔ ကၽြန္ေတာ္ Fileden.com မွာ သြားျပီး သီခ်င္းေလးကုိ Host လုပ္ပါတယ္. လင္႔ခ္ထုတ္ယူလာခဲ႔ပါတယ္.
အဲဒါကို ကၽြန္ေတာ္႔ရဲ႔ ဘေလာ႔ဂ္ေလးမွာ ဒီလုိေလးတင္လုိက္ပါတယ္.
<a href= “http://www.fileden.com/files/2007/9/23/1451933/Nay%20Chin%20Dar%20Minn%20Ah%20Narr.mp3”>ေနခ်င္တာ မင္းအနားမွာ</a>
အဲလုိလုပ္လုိက္ရင္ ဒီလုိေလးေပၚလာပါလိမ္႔မယ္.
ေနခ်င္တာ မင္းအနားမွာ
အားလုံးပဲ အဆင္ေျပ ေခ်ာေမြ႔စြာ သီခ်င္းေလးမ်ား မွ်ေ၀ခံစားႏုိင္ၾကပါေစခင္ဗ်ာ….
သံစဥ္လႈိင္း ဘေလာ႔ဂ္ေလးကုိလည္း လာေရာက္အပန္းေျဖဖုိ႔ ေႏြးေထြးစြာ ဖိတ္မႏၱက ျပဳပါတယ္.
ခင္မင္ေလးစားလ်က္
ရန္ေအာင္
Read More...
အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.
အရင္ဆုံး Playtagger ေလးအေၾကာင္း ပုိရွင္းေအာင္ ေဆြးေႏြးခ်င္ပါတယ္.
ကဲ. လုိရင္းကုိ တုိက္ရုိက္မသြားခင္ ဘာေၾကာင္႔ ဒီလုိ Process ေလးေတြ လုပ္ရတယ္ဆုိတာကုိ ေနာက္ျပန္ ျပန္စဥ္းစားလုိက္ရေအာင္လား..
သီခ်င္းတင္ခ်င္တယ္.
အုိေက..
ဒါဆုိရင္ အဲဒီ႔သီခ်င္းကုိ ဘယ္မွာတင္မွာလဲ.
အင္တာနက္ေပၚမွာ တင္မွာေပါ႔. ဟုတ္တယ္ဟုတ္.
ဒါဆုိရင္ စဥ္းစားၾကည္႔ရေအာင္လား. ခင္ဗ်ားစက္ထဲမွာ ရွိေနတဲ႔ သီခ်င္းတစ္ပုဒ္ကုိ တစ္ကမၻာလုံးမွာ ရွိေနတဲ႔ အင္တာနက္ သုံးသူေတြ နားဆင္ႏုိင္ေအာင္ ခင္ဗ်ား တစ္ခုခုကုိ လုပ္ရေတာ႔မယ္.
ဒီမွာ ေ၀ါဟာရအသစ္တစ္ခု ၀င္လာျပီ. ဖုိင္ဟုိစတင္း(File Hosting) တဲ႔…
ဒါကို ခင္ဗ်ားနားလည္ဖုိ႔ လုိအပ္လာျပီ.
သူက ဘာလုပ္တာလဲဆုိေတာ႔ ခင္ဗ်ားတင္ခ်င္တဲ႔ သီခ်င္းကို အင္တာနက္ေပၚမွာ တင္ႏုိင္ေအာင္ URL လင္႔ခ္တစ္ခုထုတ္ေပးတာေပါ႔ဗ်ာ. ေျပာရရင္ေတာ႔ အငွားတည္းခုိခြင္႔ျပဳတာေပါ႔. ဒါေၾကာင္႔လည္း သူ႔ကုိ Host လုပ္ေပးတယ္လုိ႔ ေခၚတာေပါ႔.
ဒါဆုိရင္ ပထမအဆင္႔ နားလည္သြားျပီဗ်ာ ေနာ္.
အဲဒါကို အက်ယ္ခ်ဲ႔ျပီး ထပ္ေျပာရရင္ေတာ႔ သီခ်င္းမွတင္မဟုတ္ပါဘူး. အားလုံးအသုံးျပဳႏုိင္ေအာင္ တစ္စုံတစ္ခုကို ေ၀မွ်ေတာ႔မယ္ ဆုိတာနဲ႔ ခင္ဗ်ားဟာ ဖုိင္ဟုိစတင္း ကိစၥကို အနည္းနဲ႔အမ်ား ထိေတြ႔ရေတာ႔မွာ ျဖစ္ပါတယ္. ဖုိင္ဟုိစတင္း ဘယ္လုိလုပ္လဲ ဆုိတဲ႔ အေသးစိတ္ကုိေတာ႔ ကၽြန္ေတာ္ ဒီေနရာမွာ ေဆြးေႏြးခဲ႔ျပီးပါျပီ. ေလ႔လာဖတ္ရႈႏုိင္ပါတယ္ ခင္ဗ်ာ.
ေနာက္တစ္ဆင္႔ ဆက္ေျပာမယ္.
URL Link ကေတာ႔ ရလာပါျပီ. အဲဒါကုိ ဘယ္လုိတင္ျပရမလဲ.
ဒီေနရာမွာ HTML Coding ေလးတစ္ခုကို နားလည္ဖုိ႔ လုိအပ္လာပါျပီ. အမ်ားၾကီးမလုိပါဘူးေနာ္. တကယ္႔ကုိ နည္းနည္းေလးပါ. လင္႔ခ္ခ်ိတ္တဲ႔ ကုဒ္ဒင္းေလးပါပဲ. Anchor Tag လုိ႔ ေခၚပါတယ္.
<a href= "http://www.mmbloggershelpdesk.blogspot.com">Myanmar Bloggers Helpdesk</a>
ဒါဆုိရင္ ကၽြန္ေတာ္တုိ႔ဟာ Myanmar Blogger Helpdesk ဆုိတဲ႔ site ေလးကုိ လင္႔ခ္လွမ္းခ်ိတ္လုိက္တာပဲ ျဖစ္ပါတယ္.
အခု ကၽြန္ေတာ္တုိ႔ သီခ်င္းတင္ဖုိ႔ သီခ်င္းကုိ Host လုပ္ျပီးျပီ. လင္႔ခ္လည္း ထုတ္ျပီးျပီ. တင္ေတာ႔မယ္ဆုိေတာ႔ အေပၚက ျပထားတဲ႔ အတုိင္းေလး လင္႔ခ္ခ်ိတ္လုိုက္ရင္ ရျပီလား…
ကဲ. တင္လုိက္ျပီဗ်ာ.
<a href= “http://www.fileden.com/files/2007/9/23/1451933/Nay%20Chin%20Dar%20Minn%20Ah%20Narr.mp3”>ေနခ်င္တာ မင္းအနားမွာ</a>
ႏွိပ္ၾကည္႔လုိက္ပါ. ဘာျဖစ္မလဲ..
ဘာမွမျဖစ္လာပါဘူး.
လုပ္ပုံလုပ္နည္းကလည္း မွန္ပါရဲ႔နဲ႔ ဘာလုိ႔ ဒီ playtagger ေလးက အလုပ္မလုပ္တာလဲ…
ရွင္းပါတယ္. ကၽြန္ေတာ္တုိ႔ရဲ႔ ဘေလာ႔ဂ္တန္းပလိတ္ထဲမွာ Playtagger နဲ႔ ပတ္သက္တဲ႔ script ေလး မထည္႔ခဲ႔လုိ႔႔ပါ..
အဲဒါကုိ ဘယ္ေနရာမွာ ထည္႔ရမွာလဲ. အဲဒီ႔ script ေလးေတြက ဘာလဲ..
အုိေက. ေဟာဒီ႔မွာဗ်ာ. လုိအပ္တဲ႔ script ေလးေတြ…
<script src='http://del.icio.us/js/playtagger' type='text/javascript'></script>
ဘယ္ေနရာမွာ ထည္႔ရမလဲဆုိေတာ႔ အရင္ဆုံး ကုိယ္႔ဘေလာ႔ဂ္ရဲ႔ တန္းပလိတ္ကုိ သြားပါ.
ျပီးရင္ေတာ႔ </head> ဆုိတာေလးကုိ ေတြ႔ေအာင္ရွာပါ. ရွာလုိ႔ေတြ႔တာနဲ႔ သူ႔အေပၚ ကပ္လ်က္မွာ ခုနက ေပးထားတဲ႔ script ေလးေတြကုိ ထည္႔ေပးလုိက္ပါ. ဒါဆုိရင္ ျပီးသြားပါျပီ…
ကဲ. ကၽြန္ေတာ္ေနာက္ျပန္ေတြပဲ ျပန္ေျပာျပီးသြားျပီေနာ္. အခုေလာက္ဆုိရင္ ကၽြန္ေတာ္တုိ႔ playtagger နဲ႔ သီခ်င္းတင္ႏိုင္ဖုိ႔ ဘာေတြ လုပ္ရမယ္ဆုိတာကုိ ျခဳံငုံသုံးသပ္မိျပီလုိ႔ ယူဆပါတယ္.
(၁) Playtagger Script ေလးကုိ ဘေလာ႔ဂ္တန္းပလိတ္ရဲ႔ </head> Tag မတုိင္ခင္ေလးမွာ ထည္႔ေပးရမယ္.
(၂) တင္ခ်င္တဲ႔ သီခ်င္းကုိ host လုပ္ျပီး လင္႔ခ္ထုတ္ယူရမယ္.
(၃) <a href= “your song URL”>my song</a> ဆုိတဲ႔ ပုံစံေလးနဲ႔ ကုိယ္႔ရဲ႔ ပုိ႔စ္ေလးထဲမွာ တင္ရမယ္.
ဒါဆုိရင္ ျပီးပါျပီ.
ေနခ်င္တာ မင္းအနားမွာ ဆုိတဲ႔ သီခ်င္းေလးကုိ တင္ခ်င္တယ္. ဒီေတာ႔ ကၽြန္ေတာ္ Fileden.com မွာ သြားျပီး သီခ်င္းေလးကုိ Host လုပ္ပါတယ္. လင္႔ခ္ထုတ္ယူလာခဲ႔ပါတယ္.
အဲဒါကို ကၽြန္ေတာ္႔ရဲ႔ ဘေလာ႔ဂ္ေလးမွာ ဒီလုိေလးတင္လုိက္ပါတယ္.
<a href= “http://www.fileden.com/files/2007/9/23/1451933/Nay%20Chin%20Dar%20Minn%20Ah%20Narr.mp3”>ေနခ်င္တာ မင္းအနားမွာ</a>
အဲလုိလုပ္လုိက္ရင္ ဒီလုိေလးေပၚလာပါလိမ္႔မယ္.
ေနခ်င္တာ မင္းအနားမွာ
အားလုံးပဲ အဆင္ေျပ ေခ်ာေမြ႔စြာ သီခ်င္းေလးမ်ား မွ်ေ၀ခံစားႏုိင္ၾကပါေစခင္ဗ်ာ….
သံစဥ္လႈိင္း ဘေလာ႔ဂ္ေလးကုိလည္း လာေရာက္အပန္းေျဖဖုိ႔ ေႏြးေထြးစြာ ဖိတ္မႏၱက ျပဳပါတယ္.
ခင္မင္ေလးစားလ်က္
ရန္ေအာင္
Read More...
ScrollBox ထည္႔နည္း
written by Yan
at Wednesday, February 20, 2008
Contributor: ရန္ေအာင္
အားလုံးပဲ မဂၤလာပါ.
ဒီတစ္ခါေတာ႔ ကၽြန္ေတာ္တုိ႔ရဲ႔ ဘေလာ႔ဂ္ေလးေတြ၊ ၀က္ဘ္ဆုိဒ္ေလးေတြထဲမွာ Scroll Box ေလးေတြ ထည္႔နည္းကုိ ေျပာျပခ်င္ပါတယ္.
အရင္ဆုံး ဒါေလးကုိ မေလ႔လာခင္ Scroll box ေလးေတြ ဆုိတာ ဘာလဲ. ဘယ္လုိေနရာမွာ အသုံး၀င္ႏုိင္သလဲ ဆုိတာေလးကုိ အရင္စဥ္းစားၾကည္႔လုိက္ၾကရေအာင္.
ကဲဗ်ာ.
ခင္ဗ်ားက စာပုိဒ္အရွည္ၾကီးတစ္ခုကုိ အကုိးအကားအေနနဲ႔ ျပခ်င္တယ္. အကုန္လုံးကုိ ရုိက္ျပလုိက္ရင္လည္း ခင္ဗ်ားရဲ႔ ပုိ႔စ္က အရွည္ၾကီး ျဖစ္သြားမယ္. အဲလုိမ်ိဳးဆုိရင္ ခင္ဗ်ားေပးခ်င္တဲ႔ မက္ေဆ႔ခ်္က ေ၀၀ါးသြားမယ္. ခင္ဗ်ားလုပ္ခ်င္တာက အဲဒီ႔ အကုိးအကား စာပုိဒ္ေလးကို ထည္႔ေပးထားျပီး စာဖတ္သူက ဖတ္ခ်င္ရင္ Scroll Down/Up လုပ္ျပီး ဖတ္၊ တကယ္လုိ႔ ဓာတ္ပုံေတြ အမ်ားၾကီး တင္ခ်င္တယ္ဆုိရင္လည္း ဒီလုိ Scroll box ေလးထဲ ထည္႔ျပီး ျပထားလုိက္ရင္ ဓာတ္ပုံ အယ္လ္ဘမ္ တစ္ခု ပုံစံမ်ိဳးေလး ဖန္တီးလုိ႔ရမယ္၊ စာဖတ္သူက ပုံေတြကုိ သူလုိသလုိ၊ ၾကိဳက္သလုိ Scroll Down/Up လုပ္ျပီး ၾကည္႔. ဒါမ်ိဳးေပါ႔ဗ်ာ.
အဓိကကေတာ႔ Space ကုိ အတတ္ႏုိင္ဆုံး က်ဳံ႔လုိက္ျပီး ေပးခ်င္တဲ႔ အေၾကာင္းအရာကုိ သိသာ ထင္ရွားေအာင္ လုပ္ေပးတာပါပဲ.
ဥပမာေလးကုိ ဒီမွာၾကည္႔ပါ.
ကဲ. ဘယ္လုိလုပ္ရမလဲ ဆုိေတာ႔ ဒီလုိလုပ္ပါ ခင္ဗ်ာ…
အခု ကၽြန္ေတာ္ေပးလုိက္မယ္႔ Coding ေလးကုိ ေလ႔လာၾကည္႔ပါ.
Your Text Here ဆုိတဲ႔ေနရာမွာ ကုိယ္တင္ျပခ်င္တဲ႔ စာပုိဒ္ေလး၊ ဓာတ္ပုံ စတာေတြကုိ ပုံမွန္အတုိင္း ရိုက္တင္၊ Upload လုပ္ လုပ္ပါ.
အဲဒါပါပဲ.ဒါဆုိရင္ကိုပဲ Scroll Box ေလး တင္နည္း ျပီးပါျပီ.
ဟင္. ဒါပဲလားဆုိေတာ႔ မဟုတ္ေသးပါဘူး.
အေသးစိတ္ရွင္းျပပါမယ္. ဒါမွ ကုိယ္လုိသလုိ အက်ဥ္းအက်ယ္ ျပဳျပင္ယူႏုိင္မွာေပါ႔ဗ်ာ.
<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>
Border: 3px solid green
အဲဒါေလးက ဘာေျပာလဲ ဆုိေတာ႔ Box အစိမ္းေရာင္ေလး တစ္ခုလုပ္မယ္. ေဘာင္ကုိ 3 pixel အထူေပးမယ္လုိ႔ ဆုိလုိပါတယ္. အေရာင္ေတြ အမ်ိဳးမ်ိဳး ေျပာင္းယူႏုိင္သလုိ border ကုိလည္း Dashed တုိ႔ Dotted တုိ႔ စသျဖင္႔ ေပးႏုိင္ပါတယ္.
height:100px , width:150pxဒါေလးကေတာ႔ Box ေလးရဲ႔ အျမင္႔နဲ႔ အက်ယ္ကုိ ေျပာပါတယ္. နံပါတ္ေလးေတြကုိ လုိသလုိ ကစားၾကည္႔ျပီး ကုိယ္႔စိတ္ၾကိဳက္ Box အရြယ္အစားေလးကုိ ဖန္တီးယူႏုိင္ပါတယ္. color:black ဒါကေတာ႔ Box ေလးထဲမွာ ေပၚမယ္႔ စာသားေလးေတြရဲ႔ အေရာင္ပါ. Red, Orange, Green စသျဖင္႔ စိတ္ၾကိဳက္ေျပာင္းေပးႏုိင္ပါတယ္.
background-color:white
ဒါကေတာ႔ Box ေလးရဲ႔ ေနာက္ခံ အေရာင္ပါ. ကုိယ္ေရြးခ်ယ္တဲ႔ ေနာက္ခံ အေရာင္နဲ႔ Text အေရာင္ကုိ လုိက္ဖက္ေအာင္ ေရြးခ်ယ္ေပးသင္႔ပါတယ္. ဥပမာ. အျဖဴေနာက္ခံမွာ အမည္းစာလုံးေပၚေအာင္ လုပ္သလုိမ်ိဳးေပါ႔ဗ်ာ.
ကဲ. ဒီေလာက္ပါပဲ.
အစမ္းလုပ္ျပထားတဲ႔ Box ေလးကုိ ေလ႔လာၾကည္႔ႏုိင္ပါတယ္. မရွင္းလင္းတာရွိရင္လည္း ေကာ္မန္႔မွာ ဆက္သြယ္ေမးျမန္းႏုိင္ပါတယ္.
အားလုံးပဲ ေပ်ာ္ရႊင္ခ်မ္းေျမ႔စြာ ဘေလာ႔ဂင္းႏုိင္ၾကပါေစခင္ဗ်ာ…
ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္
အေျပာင္းအလဲ
ႏွစ္ဦးတူယွဥ္၊ ဒီအပင္ေအာက္
ပန္းေၾကြေကာက္စဥ္၊ ရင္တထိတ္ထိတ္
ဒီအရိပ္မွာ၊ ခ်စ္စိတ္ေ၀ခဲ႔ဖူးပါတယ္.
သစ္ျမစ္ဆုံခြ၊ ယွဥ္ထုိင္ၾကရင္း
ျမေခ်ာင္းေရေၾကာ၊ ပန္းေၾကြေမွ်ာမိ
ၾကည္႔ရင္းၾကည္ႏူး၊ ေခ်ာင္းနဖူးမွာ
စိတ္ကူးႏုသစ္ခဲ႔ဖူးတယ္.
ခင္ကပစ္ေတာ႔
ဒီသစ္ပင္ေအာက္၊ ပန္းမေကာက္ခ်င္
ႏြမ္းေျခာက္ေသြ႔ဆိတ္၊ ဒီအရိပ္မွာ
လြမ္းစိတ္ရာေထာင္ ေ၀ဖူးတယ္.
ခင္မၾကင္ေတာ႔
ညင္ညင္ေရစီး၊ တမ္းတညည္းဟန္
ခင္႔ရယ္သံလား၊ ၀ုိး၀ါးထင္မိ
ၾကည္႔ေလရာရာ၊ ေ၀ဒနာႏွင္႔
ေရျပာအလွ ကင္းဖူးတယ္.
ေဩာ္… ႏွစ္ေတြၾကာလုိ႔
တစ္ခါတစ္ေခါက္၊ ဒီကုိေရာက္လွ်င္
တုိ႔ငယ္စဥ္က၊ ေႏွာင္မွ်င္တြယ္ရစ္
အခ်စ္အလြမ္း၊ ဖမ္းစားညိွဳ႔ငင္
ဒီသစ္ပင္ကား၊ ေခ်ာင္းေရစား၍
ကမ္းပါးျပဳိေနာက္ ပါေလျပီ…
ဒီကျပန္လွ်င္၊ ရင္မခုန္တတ္
မလြမ္းတတ္ေတာ႔၊ စိတ္ဓာတ္ရင္႔က်က္
ခံစားခ်က္တုိ႔၊ ပ်က္ျပယ္ခဲ႔ရ
အနည္က်ျပီ…
ဘ၀ဆုိတာ… ဒါပဲ ခင္…
ေမာင္စိန္၀င္း (ပုတီးကုန္း)
Read More...
အားလုံးပဲ မဂၤလာပါ.
ဒီတစ္ခါေတာ႔ ကၽြန္ေတာ္တုိ႔ရဲ႔ ဘေလာ႔ဂ္ေလးေတြ၊ ၀က္ဘ္ဆုိဒ္ေလးေတြထဲမွာ Scroll Box ေလးေတြ ထည္႔နည္းကုိ ေျပာျပခ်င္ပါတယ္.
အရင္ဆုံး ဒါေလးကုိ မေလ႔လာခင္ Scroll box ေလးေတြ ဆုိတာ ဘာလဲ. ဘယ္လုိေနရာမွာ အသုံး၀င္ႏုိင္သလဲ ဆုိတာေလးကုိ အရင္စဥ္းစားၾကည္႔လုိက္ၾကရေအာင္.
ကဲဗ်ာ.
ခင္ဗ်ားက စာပုိဒ္အရွည္ၾကီးတစ္ခုကုိ အကုိးအကားအေနနဲ႔ ျပခ်င္တယ္. အကုန္လုံးကုိ ရုိက္ျပလုိက္ရင္လည္း ခင္ဗ်ားရဲ႔ ပုိ႔စ္က အရွည္ၾကီး ျဖစ္သြားမယ္. အဲလုိမ်ိဳးဆုိရင္ ခင္ဗ်ားေပးခ်င္တဲ႔ မက္ေဆ႔ခ်္က ေ၀၀ါးသြားမယ္. ခင္ဗ်ားလုပ္ခ်င္တာက အဲဒီ႔ အကုိးအကား စာပုိဒ္ေလးကို ထည္႔ေပးထားျပီး စာဖတ္သူက ဖတ္ခ်င္ရင္ Scroll Down/Up လုပ္ျပီး ဖတ္၊ တကယ္လုိ႔ ဓာတ္ပုံေတြ အမ်ားၾကီး တင္ခ်င္တယ္ဆုိရင္လည္း ဒီလုိ Scroll box ေလးထဲ ထည္႔ျပီး ျပထားလုိက္ရင္ ဓာတ္ပုံ အယ္လ္ဘမ္ တစ္ခု ပုံစံမ်ိဳးေလး ဖန္တီးလုိ႔ရမယ္၊ စာဖတ္သူက ပုံေတြကုိ သူလုိသလုိ၊ ၾကိဳက္သလုိ Scroll Down/Up လုပ္ျပီး ၾကည္႔. ဒါမ်ိဳးေပါ႔ဗ်ာ.
အဓိကကေတာ႔ Space ကုိ အတတ္ႏုိင္ဆုံး က်ဳံ႔လုိက္ျပီး ေပးခ်င္တဲ႔ အေၾကာင္းအရာကုိ သိသာ ထင္ရွားေအာင္ လုပ္ေပးတာပါပဲ.
ဥပမာေလးကုိ ဒီမွာၾကည္႔ပါ.
မင္းရဲ႔ ဆံႏြယ္ေခြေတြထဲမွာ
တစ္ညတာေလာက္ အိပ္စက္ခြင္႔ရမယ္ဆုိရင္
ငွက္ငယ္ေတြ ၀န္းရံေနတဲ႔
သစ္တစ္ပင္အျဖစ္ကုိေတာင္ စြန္႔လႊတ္၀ံ႔တယ္.
မယုံရင္ ဒီမွာၾကည္႔စမ္း
လြမ္းလြန္းလုိ႔ ျဖစ္လာတဲ႔
မင္းအတြက္ အခ်စ္ပန္း…
<ေရခဲငွက္>
တစ္ညတာေလာက္ အိပ္စက္ခြင္႔ရမယ္ဆုိရင္
ငွက္ငယ္ေတြ ၀န္းရံေနတဲ႔
သစ္တစ္ပင္အျဖစ္ကုိေတာင္ စြန္႔လႊတ္၀ံ႔တယ္.
မယုံရင္ ဒီမွာၾကည္႔စမ္း
လြမ္းလြန္းလုိ႔ ျဖစ္လာတဲ႔
မင္းအတြက္ အခ်စ္ပန္း…
<ေရခဲငွက္>ကဲ. ဘယ္လုိလုပ္ရမလဲ ဆုိေတာ႔ ဒီလုိလုပ္ပါ ခင္ဗ်ာ…
အခု ကၽြန္ေတာ္ေပးလုိက္မယ္႔ Coding ေလးကုိ ေလ႔လာၾကည္႔ပါ.
Your Text Here ဆုိတဲ႔ေနရာမွာ ကုိယ္တင္ျပခ်င္တဲ႔ စာပုိဒ္ေလး၊ ဓာတ္ပုံ စတာေတြကုိ ပုံမွန္အတုိင္း ရိုက္တင္၊ Upload လုပ္ လုပ္ပါ.
အဲဒါပါပဲ.ဒါဆုိရင္ကိုပဲ Scroll Box ေလး တင္နည္း ျပီးပါျပီ.
ဟင္. ဒါပဲလားဆုိေတာ႔ မဟုတ္ေသးပါဘူး.
အေသးစိတ္ရွင္းျပပါမယ္. ဒါမွ ကုိယ္လုိသလုိ အက်ဥ္းအက်ယ္ ျပဳျပင္ယူႏုိင္မွာေပါ႔ဗ်ာ.
<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>
Border: 3px solid green
အဲဒါေလးက ဘာေျပာလဲ ဆုိေတာ႔ Box အစိမ္းေရာင္ေလး တစ္ခုလုပ္မယ္. ေဘာင္ကုိ 3 pixel အထူေပးမယ္လုိ႔ ဆုိလုိပါတယ္. အေရာင္ေတြ အမ်ိဳးမ်ိဳး ေျပာင္းယူႏုိင္သလုိ border ကုိလည္း Dashed တုိ႔ Dotted တုိ႔ စသျဖင္႔ ေပးႏုိင္ပါတယ္.
height:100px , width:150pxဒါေလးကေတာ႔ Box ေလးရဲ႔ အျမင္႔နဲ႔ အက်ယ္ကုိ ေျပာပါတယ္. နံပါတ္ေလးေတြကုိ လုိသလုိ ကစားၾကည္႔ျပီး ကုိယ္႔စိတ္ၾကိဳက္ Box အရြယ္အစားေလးကုိ ဖန္တီးယူႏုိင္ပါတယ္. color:black ဒါကေတာ႔ Box ေလးထဲမွာ ေပၚမယ္႔ စာသားေလးေတြရဲ႔ အေရာင္ပါ. Red, Orange, Green စသျဖင္႔ စိတ္ၾကိဳက္ေျပာင္းေပးႏုိင္ပါတယ္.
background-color:white
ဒါကေတာ႔ Box ေလးရဲ႔ ေနာက္ခံ အေရာင္ပါ. ကုိယ္ေရြးခ်ယ္တဲ႔ ေနာက္ခံ အေရာင္နဲ႔ Text အေရာင္ကုိ လုိက္ဖက္ေအာင္ ေရြးခ်ယ္ေပးသင္႔ပါတယ္. ဥပမာ. အျဖဴေနာက္ခံမွာ အမည္းစာလုံးေပၚေအာင္ လုပ္သလုိမ်ိဳးေပါ႔ဗ်ာ.
ကဲ. ဒီေလာက္ပါပဲ.
အစမ္းလုပ္ျပထားတဲ႔ Box ေလးကုိ ေလ႔လာၾကည္႔ႏုိင္ပါတယ္. မရွင္းလင္းတာရွိရင္လည္း ေကာ္မန္႔မွာ ဆက္သြယ္ေမးျမန္းႏုိင္ပါတယ္.
အားလုံးပဲ ေပ်ာ္ရႊင္ခ်မ္းေျမ႔စြာ ဘေလာ႔ဂင္းႏုိင္ၾကပါေစခင္ဗ်ာ…
ခ်စ္ခင္ေလးစားလ်က္
ရန္ေအာင္
ႏွစ္ဦးတူယွဥ္၊ ဒီအပင္ေအာက္
ပန္းေၾကြေကာက္စဥ္၊ ရင္တထိတ္ထိတ္
ဒီအရိပ္မွာ၊ ခ်စ္စိတ္ေ၀ခဲ႔ဖူးပါတယ္.
သစ္ျမစ္ဆုံခြ၊ ယွဥ္ထုိင္ၾကရင္း
ျမေခ်ာင္းေရေၾကာ၊ ပန္းေၾကြေမွ်ာမိ
ၾကည္႔ရင္းၾကည္ႏူး၊ ေခ်ာင္းနဖူးမွာ
စိတ္ကူးႏုသစ္ခဲ႔ဖူးတယ္.
ခင္ကပစ္ေတာ႔
ဒီသစ္ပင္ေအာက္၊ ပန္းမေကာက္ခ်င္
ႏြမ္းေျခာက္ေသြ႔ဆိတ္၊ ဒီအရိပ္မွာ
လြမ္းစိတ္ရာေထာင္ ေ၀ဖူးတယ္.
ခင္မၾကင္ေတာ႔
ညင္ညင္ေရစီး၊ တမ္းတညည္းဟန္
ခင္႔ရယ္သံလား၊ ၀ုိး၀ါးထင္မိ
ၾကည္႔ေလရာရာ၊ ေ၀ဒနာႏွင္႔
ေရျပာအလွ ကင္းဖူးတယ္.
ေဩာ္… ႏွစ္ေတြၾကာလုိ႔
တစ္ခါတစ္ေခါက္၊ ဒီကုိေရာက္လွ်င္
တုိ႔ငယ္စဥ္က၊ ေႏွာင္မွ်င္တြယ္ရစ္
အခ်စ္အလြမ္း၊ ဖမ္းစားညိွဳ႔ငင္
ဒီသစ္ပင္ကား၊ ေခ်ာင္းေရစား၍
ကမ္းပါးျပဳိေနာက္ ပါေလျပီ…
ဒီကျပန္လွ်င္၊ ရင္မခုန္တတ္
မလြမ္းတတ္ေတာ႔၊ စိတ္ဓာတ္ရင္႔က်က္
ခံစားခ်က္တုိ႔၊ ပ်က္ျပယ္ခဲ႔ရ
အနည္က်ျပီ…
ဘ၀ဆုိတာ… ဒါပဲ ခင္…
ေမာင္စိန္၀င္း (ပုတီးကုန္း)
ဘေလာ႔ဂ္တြင္ ဇယားကြက္ေလးမ်ား ထည္႔သြင္းျခင္း...
written by Yan
at Sunday, January 6, 2008
Contributor: ရန္ေအာင္
အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ. ကၽြန္ေတာ္လည္း နည္းပညာေဆာင္းပါးေလးေတြ မေရးျဖစ္တာ ၾကာပါျပီ. ခုမွပဲ စိတ္ျပန္လည္လာလုိ႔ ျပန္ေရးျဖစ္ေတာ႔မယ္ဗ်ာ.
ဒီတစ္ခါေတာ႔ ဘေလာ႔ဂ္မွာ ဇယားကြက္ေလးေတြ တင္တာကုိ ေျပာျပခ်င္ပါတယ္. HTML နားလည္ျပီးသားသူူေတြေရာ၊ သိပ္မသိေသးတဲ႔သူေတြပါ နားလည္သြားေအာင္ တတ္ႏုိင္သေလာက္ အရွင္းဆုံးပုံစံနဲ႔ ေဆြးေႏြးသြားပါမယ္.
Table ဆုိတာ ဇယားကြက္ေလးေတြေပါ႔ဗ်ာ. ရွင္းပါတယ္ေနာ္.
ဇယားကြက္ေလးေတြကုိ ရည္ရြယ္ခ်က္အမ်ိဳးမ်ဳိးနဲ႔ ဥာဏ္ရွိသလုိ အသုံးျပဳႏုိင္ၾကပါတယ္. တစ္ခ်ိဳ႔က Table လုပ္တဲ႔ Coding ေလးေတြ သိျပီးသားျဖစ္ေနေပမယ္႔ လက္ေတြ႔တင္လုိက္ေတာ႔ ပုိ႔စ္နဲ႔ Table ၾကားမွာ White Space ေတြ အမ်ားၾကီးျဖစ္ျပီး ကုိယ္႔ရဲ႔ ပုိ႔စ္ေလး အရုပ္ဆုိးေနတာကုိ ၾကဳံေတြ႔ဖူးၾကမွာပါ. အဲဒီ႔လုိမျဖစ္ေအာင္ ဘယ္လုိကာကြယ္ရမလဲ ဆုိတာကိုပါ ထည္႔ေျပာသြားပါမယ္ ခင္ဗ်ာ.
ကဲ. စလုိက္ၾကရေအာင္လား.
<center>
<table border="1">
<tr>
<td>ေခါင္းစဥ္ (၁)</td><td> ေခါင္းစဥ္ (၂)</td><td> ေခါင္းစဥ္ (၃)</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>
</center>
အဲဒါဆုိရင္ ေအာက္ပါ Table ေလးကို ရပါျပီ. ဒါေပမယ္႔ Table ေလးရဲ႔ အေပၚမွာ အျဖဴေရာင္ကြက္လပ္ၾကီးေပၚေနတာကုိ ေတြ႔ရပါလိမ္႔မယ္. အဲဒါဘာလုိ႔လဲဆုိေတာ႔ Blogger က ခင္ဗ်ား Enter Key တစ္ခ်က္ႏွိပ္ျပီး ေနာက္တစ္လုိင္း ဆင္းလုိက္တုိင္း <br/> ဆုိတဲ႔ Tag ေလးကို Auto ထည္႔ထည္႔ေပးသြားပါယ္. ဒါေၾကာင္႔ Line Break ေလးေတြ ျဖစ္လာျပီး ပို႔စ္နဲ႔ ဇယားကြက္ေလးၾကားထဲမွာ White Space ၾကီး ျဖစ္ေပၚလာရတာပါ.
ကဲ. အဲဒါကုိ ဘယ္လုိေဖ်ာက္ၾကမလဲ ဆုိေတာ႔ ဒီလုိေဖ်ာက္ပါခင္ဗ်ာ.
အခုေပးမယ္႔ HTML Codes ေလးေတြကုိ ခင္ဗ်ားရဲ႔ ဇယားကြက္ေလး မစတင္ခင္မွာ ထည္႔ေပးလုိက္ပါ. ဇယားကြက္ေလးေတြက တစ္ခုထက္ပုိေနခဲ႔ရင္ေတာ႔ ေနာက္တစ္ခု မစတင္ခင္ အခ်ိန္တုိင္းမွာ ထည္႔ေပးသြားပါ.
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
...the Coding for your Table goes here...
ဒါပဲလားဆုိေတာ႔ မဟုတ္ေသးပါဘူး. ျပီးသြားရင္ </div> Tag ေလးနဲ႔ ျပန္ပိတ္ေပးရပါမယ္.
အဲဒါပါပဲ ခင္ဗ်ာ.
Table ကုဒ္ဒင္းေလးတည္ေဆာက္ပုံကုိ အေသးစိတ္ ရွင္းျပပါမယ္.
<center> ဆုိတာကေတာ႔ Table ေလးကို အလယ္မွာ ေပၚခ်င္လု႔ိ Alignment လုပ္ေပးထားတာပါ. <table border= “1”> ဆုိတာကေတာ႔ Table Border အထူအပါးကို ေျပာပါတယ္. နံပါတ္ၾကီးလာရင္ ပုိျပီးေတာ႔ ထူလာပါမယ္.
<tr> ဆုိတာကေတာ႔ Table Row လုိ႔ ဆုိလုိပါတယ္. <td> ဆိုတာကေတာ႔ Table Data ပါ.
<tr> တစ္ခု စီဟာ Row တစ္ခုစီကုိ ကုိယ္စားျပဳပါတယ္. <tr> တစ္ခုယူျပီးသြားရင္ <td> ေတြ လုိက္ထည္႔လုိ႔ရပါတယ္. <td> တစ္ခုစီဟာ Column တစ္ခုစီကုိ ကုိယ္စားျပဳသြားပါတယ္.
ဥပမာ. ကၽြန္ေတာ္တုိ႔ 3x4 Table တစ္ခု တည္ေဆာက္ေတာ႔မယ္ ဆုိပါစုိ႔ဗ်ာ.
Row 3 ခု နဲ႔ Column 4 ခု ရွိရပါမယ္ေနာ္. အဲဒါဆုိရင္ ဒီလုိတည္ေဆာက္ပါမယ္. မိမိရဲ႔ Coding မွာ <tr> Tag အဖြင္႔အပိတ္ သုံးစုံရွိရပါမယ္. <tr> Tag တစ္ခုစီတုိင္းအတြက္ <td> Tag အဖြင္႔အပိတ္ ေလးစုံစီ ရွိရပါမယ္. ဒါမွ 3x4 Table ျဖစ္ပါမယ္.
<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
</tr>
</table>
</center>
အဲဒါဆုိရင္ Row တစ္ခု ျပီးသြားပါျပီ. Table Data Cell ေလးခုယူထားတဲ႔အတြက္ Column ေလးခုရွိတယ္လုိ႔ မွတ္ယူႏုိင္ပါတယ္. သေဘာေပါက္ေလာက္ပါျပီေနာ္.
ကၽြန္ေတာ္တုိ႔ရဲ႔ Table မွာ Row 3 ခု ရွိရမွာ ျဖစ္တဲ႔အတြက္ စုစုေပါင္း <tr> Tag သုံးခုတဲြစီ ရွိရပါမယ္.
ေနာက္တစ္ခုထပ္ထည္႔ျပီေနာ္.
<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
<tr>
<td>We</td>
<td>Never</td>
<td>Give up</td>
<td>Our Fight!</td>
</tr>
</table>
</center>
ေတြ႔တယ္ေနာ္.
ေနာက္တစ္ခုထပ္ထည္႔ပါမယ္.
<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
</tr>
<tr>
<td>We</td>
<td>Never</td>
<td>Give up</td>
<td>Our Fight!</td>
</tr>
<tr>
<td>We</td>
<td>Row</td>
<td>Till</td>
<td>We Die!!!</td>
</tr>
</table>
</center>
ရရွိလာမယ္႔ Table ေလးကေတာ႔ ဒီလုိေလးပဲ ျဖစ္ပါတယ္ခင္ဗ်ာ.
ကဲ. ဒီေလာက္ဆုိရင္ Table Coding ေလးအေၾကာင္း နားလည္ေလာက္ျပီလုိ႔ ယူဆပါတယ္. ဆက္ျပီးေတာ႔ Advanced Level ေလးေတြကုိ သြားလုိက္ရေအာင္ေနာ္.
ကၽြန္ေတာ္အစမ္းလုပ္ၾကည္႔ထားတဲ႔ ဇယားကြက္ေလးေတြကုိ ရႈစားေတာ္မူၾကပါ.
<center>
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<h3>ဇယား (၁)</h3>
<table border ="1">
<tr>
<td>ပင္မဘေလာ႔ဂ္</td>
<td>သီခ်င္းဘေလာ႔ဂ္</td>
<td>အေထာက္အကူျပဳဘေလာ႔ဂ္</td>
</tr>
<tr>
<td><a href="http://yanaung.blogspot.com" target="_blank">ရန္ေအာင္</a></td>
<td><a href="http://rhythmcorner.blogspot.com" target="_blank">သံစဥ္လႈိင္း</a></td>
<td><a href="http://mmbloggershelpdesk.blogspot.com" target="_blank">Bloggers Helpdesk</a></td>
</tr>
</table>
<h3>ဇယား (၂) </h3>
ဒါကေတာ႔ ဇယားကြက္ေလးေတြရဲ႔ infrastructure ကို ပုံစံလုပ္ျပထားတာပါ. Row ေတြ၊ Column ေတြ ဘယ္လုိ ေရတြက္ရတယ္ဆုိတာ သိေအာင္ေပါ႔.
<table border="1">
<tr>
<td>Heading 1</td><td>Heading 2</td><td>Heading 3</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>
</div>
</center>
ဒီလုိေလးျမင္ရပါမယ္ ခင္ဗ်ာ.
<table border="1"> ေနရာမွာ 1 အစား နံပါတ္ေလးေတြ ေျပာင္းထည္႔ၾကည္႔ႏုိ္င္ပါတယ္.
ဒီလုိစမ္းၾကည္႔မယ္ဗ်ာ.
ကဲ. Table ေလးေတြကုိ ဆက္ျပီး ကလိလုိက္ၾကရေအာင္.
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<center>
<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</center>
အဲဒါဆုိရင္ Table ေလးရဲ႔ ေနာက္မွာ အေရာင္ေလးေတြ ရလာပါလိမ္႔မယ္. Color လုိခ်င္ရင္ blue, green စသည္ျဖင္႔ ရိုက္ထည္႔လုိ႔ ရႏုိင္သလုိ မိမိႏွစ္သက္ရာ Color Coding ေလးမ်ားကုိလည္း အစားသြင္းႏုိင္ပါေသးတယ္. ဒီေနရာမွာ Color Codes ေလးေတြ ရႏုိင္ပါတယ္ ခင္ဗ်ာ.
ဒီတစ္ခါက်ေတာ႔ ေနာက္ခံပုံေလးေတြ ထည္႔ၾကည္႔ပါမယ္
<center>
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<h4>A background image:</h4>
<table border="1"
background=" http://www.fileden.com/files/2007/9/23/1451933/cool_bg_blue_background.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</div>
</center>
အဲဒါဆုိရင္ေတာ႔ Table ေလးေတြရဲ႔ ေနာက္မွာ မိမိၾကိဳက္နွစ္သက္ရာ ပုံေလးေတြ ထည္႔သြင္းအလွဆင္ျခယ္ႏုိင္ပါျပီ. မိမိတင္ခ်င္တဲ႔ ပုံေလးေတြကုိ File Hosting Site တစ္ခုခုမွာ တင္ျပီးေတာ႔မွ လင္႔ခ္ထုတ္ယူဖုိ႔ကိုေတာ႔ မေမ႔ပါနဲ႔ေနာ္. File Hosting လုပ္နည္းကုိ မသိရင္ ဒီေနရာမွာ ေရးခဲ႔ျပီးပါျပီ. ေလ႔လာႏုိင္ပါတယ္ ခင္ဗ်ာ.
ကုိယ္႔ရဲ႔လုိအပ္ခ်က္ေပၚ မူတည္ျပီး ဒီပုိ႔စ္ေလးကုိ အက်ိဳးရွိစြာ အသုံးခ်ႏုိင္ၾကမယ္လုိ႔ ေမွ်ာ္လင္႔မိပါေၾကာင္း….
Acknowledgement:
ဒီေနရာက ပုိ႔စ္ေလးကုိ အေျခခံျပီး သင္႔ေတာ္သလုိ ျဖည္႔စြက္ ေရးသားပါတယ္ ခင္ဗ်ာ.
ခင္မင္ေလးစားလ်က္
ရန္ေအာင္
Read More...
အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ. ကၽြန္ေတာ္လည္း နည္းပညာေဆာင္းပါးေလးေတြ မေရးျဖစ္တာ ၾကာပါျပီ. ခုမွပဲ စိတ္ျပန္လည္လာလုိ႔ ျပန္ေရးျဖစ္ေတာ႔မယ္ဗ်ာ.
ဒီတစ္ခါေတာ႔ ဘေလာ႔ဂ္မွာ ဇယားကြက္ေလးေတြ တင္တာကုိ ေျပာျပခ်င္ပါတယ္. HTML နားလည္ျပီးသားသူူေတြေရာ၊ သိပ္မသိေသးတဲ႔သူေတြပါ နားလည္သြားေအာင္ တတ္ႏုိင္သေလာက္ အရွင္းဆုံးပုံစံနဲ႔ ေဆြးေႏြးသြားပါမယ္.
Table ဆုိတာ ဇယားကြက္ေလးေတြေပါ႔ဗ်ာ. ရွင္းပါတယ္ေနာ္.
ဇယားကြက္ေလးေတြကုိ ရည္ရြယ္ခ်က္အမ်ိဳးမ်ဳိးနဲ႔ ဥာဏ္ရွိသလုိ အသုံးျပဳႏုိင္ၾကပါတယ္. တစ္ခ်ိဳ႔က Table လုပ္တဲ႔ Coding ေလးေတြ သိျပီးသားျဖစ္ေနေပမယ္႔ လက္ေတြ႔တင္လုိက္ေတာ႔ ပုိ႔စ္နဲ႔ Table ၾကားမွာ White Space ေတြ အမ်ားၾကီးျဖစ္ျပီး ကုိယ္႔ရဲ႔ ပုိ႔စ္ေလး အရုပ္ဆုိးေနတာကုိ ၾကဳံေတြ႔ဖူးၾကမွာပါ. အဲဒီ႔လုိမျဖစ္ေအာင္ ဘယ္လုိကာကြယ္ရမလဲ ဆုိတာကိုပါ ထည္႔ေျပာသြားပါမယ္ ခင္ဗ်ာ.
ကဲ. စလုိက္ၾကရေအာင္လား.
<center>
<table border="1">
<tr>
<td>ေခါင္းစဥ္ (၁)</td><td> ေခါင္းစဥ္ (၂)</td><td> ေခါင္းစဥ္ (၃)</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>
</center>
အဲဒါဆုိရင္ ေအာက္ပါ Table ေလးကို ရပါျပီ. ဒါေပမယ္႔ Table ေလးရဲ႔ အေပၚမွာ အျဖဴေရာင္ကြက္လပ္ၾကီးေပၚေနတာကုိ ေတြ႔ရပါလိမ္႔မယ္. အဲဒါဘာလုိ႔လဲဆုိေတာ႔ Blogger က ခင္ဗ်ား Enter Key တစ္ခ်က္ႏွိပ္ျပီး ေနာက္တစ္လုိင္း ဆင္းလုိက္တုိင္း <br/> ဆုိတဲ႔ Tag ေလးကို Auto ထည္႔ထည္႔ေပးသြားပါယ္. ဒါေၾကာင္႔ Line Break ေလးေတြ ျဖစ္လာျပီး ပို႔စ္နဲ႔ ဇယားကြက္ေလးၾကားထဲမွာ White Space ၾကီး ျဖစ္ေပၚလာရတာပါ.
| ေခါင္းစဥ္ (၁) | ေခါင္းစဥ္ (၂) | ေခါင္းစဥ္ (၃) |
| row 1 col 1 | row 1 col 2 | row 1 col 3 |
| row 2 col 1 | row 2 col 2 | row 2 col 3 |
ကဲ. အဲဒါကုိ ဘယ္လုိေဖ်ာက္ၾကမလဲ ဆုိေတာ႔ ဒီလုိေဖ်ာက္ပါခင္ဗ်ာ.
အခုေပးမယ္႔ HTML Codes ေလးေတြကုိ ခင္ဗ်ားရဲ႔ ဇယားကြက္ေလး မစတင္ခင္မွာ ထည္႔ေပးလုိက္ပါ. ဇယားကြက္ေလးေတြက တစ္ခုထက္ပုိေနခဲ႔ရင္ေတာ႔ ေနာက္တစ္ခု မစတင္ခင္ အခ်ိန္တုိင္းမွာ ထည္႔ေပးသြားပါ.
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
...the Coding for your Table goes here...
ဒါပဲလားဆုိေတာ႔ မဟုတ္ေသးပါဘူး. ျပီးသြားရင္ </div> Tag ေလးနဲ႔ ျပန္ပိတ္ေပးရပါမယ္.
အဲဒါပါပဲ ခင္ဗ်ာ.
Table ကုဒ္ဒင္းေလးတည္ေဆာက္ပုံကုိ အေသးစိတ္ ရွင္းျပပါမယ္.
<center> ဆုိတာကေတာ႔ Table ေလးကို အလယ္မွာ ေပၚခ်င္လု႔ိ Alignment လုပ္ေပးထားတာပါ. <table border= “1”> ဆုိတာကေတာ႔ Table Border အထူအပါးကို ေျပာပါတယ္. နံပါတ္ၾကီးလာရင္ ပုိျပီးေတာ႔ ထူလာပါမယ္.
<tr> ဆုိတာကေတာ႔ Table Row လုိ႔ ဆုိလုိပါတယ္. <td> ဆိုတာကေတာ႔ Table Data ပါ.
<tr> တစ္ခု စီဟာ Row တစ္ခုစီကုိ ကုိယ္စားျပဳပါတယ္. <tr> တစ္ခုယူျပီးသြားရင္ <td> ေတြ လုိက္ထည္႔လုိ႔ရပါတယ္. <td> တစ္ခုစီဟာ Column တစ္ခုစီကုိ ကုိယ္စားျပဳသြားပါတယ္.
ဥပမာ. ကၽြန္ေတာ္တုိ႔ 3x4 Table တစ္ခု တည္ေဆာက္ေတာ႔မယ္ ဆုိပါစုိ႔ဗ်ာ.
Row 3 ခု နဲ႔ Column 4 ခု ရွိရပါမယ္ေနာ္. အဲဒါဆုိရင္ ဒီလုိတည္ေဆာက္ပါမယ္. မိမိရဲ႔ Coding မွာ <tr> Tag အဖြင္႔အပိတ္ သုံးစုံရွိရပါမယ္. <tr> Tag တစ္ခုစီတုိင္းအတြက္ <td> Tag အဖြင္႔အပိတ္ ေလးစုံစီ ရွိရပါမယ္. ဒါမွ 3x4 Table ျဖစ္ပါမယ္.
<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
</tr>
</table>
</center>
အဲဒါဆုိရင္ Row တစ္ခု ျပီးသြားပါျပီ. Table Data Cell ေလးခုယူထားတဲ႔အတြက္ Column ေလးခုရွိတယ္လုိ႔ မွတ္ယူႏုိင္ပါတယ္. သေဘာေပါက္ေလာက္ပါျပီေနာ္.
ကၽြန္ေတာ္တုိ႔ရဲ႔ Table မွာ Row 3 ခု ရွိရမွာ ျဖစ္တဲ႔အတြက္ စုစုေပါင္း <tr> Tag သုံးခုတဲြစီ ရွိရပါမယ္.
ေနာက္တစ္ခုထပ္ထည္႔ျပီေနာ္.
<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
<tr>
<td>We</td>
<td>Never</td>
<td>Give up</td>
<td>Our Fight!</td>
</tr>
</table>
</center>
ေတြ႔တယ္ေနာ္.
ေနာက္တစ္ခုထပ္ထည္႔ပါမယ္.
<center>
<table border= “1”>
<tr>
<td>We</td>
<td>Are</td>
<td>Greatest</td>
<td>Bloggers</td>
</tr>
<tr>
<td>We</td>
<td>Never</td>
<td>Give up</td>
<td>Our Fight!</td>
</tr>
<tr>
<td>We</td>
<td>Row</td>
<td>Till</td>
<td>We Die!!!</td>
</tr>
</table>
</center>
ရရွိလာမယ္႔ Table ေလးကေတာ႔ ဒီလုိေလးပဲ ျဖစ္ပါတယ္ခင္ဗ်ာ.
| We | Are | Greatest | Bloggers |
| We | Never | Give up | Our Fight! |
| We | Row | Till | We Die!!! |
ကဲ. ဒီေလာက္ဆုိရင္ Table Coding ေလးအေၾကာင္း နားလည္ေလာက္ျပီလုိ႔ ယူဆပါတယ္. ဆက္ျပီးေတာ႔ Advanced Level ေလးေတြကုိ သြားလုိက္ရေအာင္ေနာ္.
ကၽြန္ေတာ္အစမ္းလုပ္ၾကည္႔ထားတဲ႔ ဇယားကြက္ေလးေတြကုိ ရႈစားေတာ္မူၾကပါ.
<center>
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<h3>ဇယား (၁)</h3>
<table border ="1">
<tr>
<td>ပင္မဘေလာ႔ဂ္</td>
<td>သီခ်င္းဘေလာ႔ဂ္</td>
<td>အေထာက္အကူျပဳဘေလာ႔ဂ္</td>
</tr>
<tr>
<td><a href="http://yanaung.blogspot.com" target="_blank">ရန္ေအာင္</a></td>
<td><a href="http://rhythmcorner.blogspot.com" target="_blank">သံစဥ္လႈိင္း</a></td>
<td><a href="http://mmbloggershelpdesk.blogspot.com" target="_blank">Bloggers Helpdesk</a></td>
</tr>
</table>
<h3>ဇယား (၂) </h3>
ဒါကေတာ႔ ဇယားကြက္ေလးေတြရဲ႔ infrastructure ကို ပုံစံလုပ္ျပထားတာပါ. Row ေတြ၊ Column ေတြ ဘယ္လုိ ေရတြက္ရတယ္ဆုိတာ သိေအာင္ေပါ႔.
<table border="1">
<tr>
<td>Heading 1</td><td>Heading 2</td><td>Heading 3</td>
</tr>
<tr>
<td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td>
</tr>
</table>
</div>
</center>
ဒီလုိေလးျမင္ရပါမယ္ ခင္ဗ်ာ.
ဇယား (၁)
| ပင္မဘေလာ႔ဂ္ | သီခ်င္းဘေလာ႔ဂ္ | အေထာက္အကူျပဳဘေလာ႔ဂ္ |
| ရန္ေအာင္ | သံစဥ္လႈိင္း | Bloggers Helpdesk |
ဇယား (၂)
ဒါကေတာ႔ ဇယားကြက္ေလးေတြရဲ႔ infrastructure ကို ပုံစံလုပ္ျပထားတာပါ. Row ေတြ၊ Column ေတြ ဘယ္လုိ ေရတြက္ရတယ္ဆုိတာ သိေအာင္ေပါ႔.| Heading 1 | Heading 2 | Heading 3 |
| row 1 col 1 | row 1 col 2 | row 1 col 3 |
| row 2 col 1 | row 2 col 2 | row 2 col 3 |
<table border="1"> ေနရာမွာ 1 အစား နံပါတ္ေလးေတြ ေျပာင္းထည္႔ၾကည္႔ႏုိ္င္ပါတယ္.
ဒီလုိစမ္းၾကည္႔မယ္ဗ်ာ.
ဇယား (၁)
table border Value ကုိ နံပါတ္ 8 ေပးထားလွ်င္ ေတြ႔ရမည္႔ပုံ...| ပင္မဘေလာ႔ဂ္ | သီခ်င္းဘေလာ႔ဂ္ | အေထာက္အကူျပဳဘေလာ႔ဂ္ |
| ရန္ေအာင္ | သံစဥ္လႈိင္း | Bloggers Helpdesk |
ဇယား (၂)
table border Value ကုိ နံပါတ္ 15 ေပးထားလွ်င္ ေတြ႔ရမည္႔ပုံ...| ပင္မဘေလာ႔ဂ္ | သီခ်င္းဘေလာ႔ဂ္ | အေထာက္အကူျပဳဘေလာ႔ဂ္ |
| ရန္ေအာင္ | သံစဥ္လႈိင္း | Bloggers Helpdesk |
ဇယား (၃)
table border Value ကုိ နံပါတ္ 24 ေပးထားလွ်င္ ေတြ႔ရမည္႔ပုံ...| ပင္မဘေလာ႔ဂ္ | သီခ်င္းဘေလာ႔ဂ္ | အေထာက္အကူျပဳဘေလာ႔ဂ္ |
| ရန္ေအာင္ | သံစဥ္လႈိင္း | Bloggers Helpdesk |
ကဲ. Table ေလးေတြကုိ ဆက္ျပီး ကလိလုိက္ၾကရေအာင္.
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<center>
<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</center>
အဲဒါဆုိရင္ Table ေလးရဲ႔ ေနာက္မွာ အေရာင္ေလးေတြ ရလာပါလိမ္႔မယ္. Color လုိခ်င္ရင္ blue, green စသည္ျဖင္႔ ရိုက္ထည္႔လုိ႔ ရႏုိင္သလုိ မိမိႏွစ္သက္ရာ Color Coding ေလးမ်ားကုိလည္း အစားသြင္းႏုိင္ပါေသးတယ္. ဒီေနရာမွာ Color Codes ေလးေတြ ရႏုိင္ပါတယ္ ခင္ဗ်ာ.
A background color:
| First | Row |
| Second | Row |
ဒီတစ္ခါက်ေတာ႔ ေနာက္ခံပုံေလးေတြ ထည္႔ၾကည္႔ပါမယ္
<center>
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<h4>A background image:</h4>
<table border="1"
background=" http://www.fileden.com/files/2007/9/23/1451933/cool_bg_blue_background.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</div>
</center>
အဲဒါဆုိရင္ေတာ႔ Table ေလးေတြရဲ႔ ေနာက္မွာ မိမိၾကိဳက္နွစ္သက္ရာ ပုံေလးေတြ ထည္႔သြင္းအလွဆင္ျခယ္ႏုိင္ပါျပီ. မိမိတင္ခ်င္တဲ႔ ပုံေလးေတြကုိ File Hosting Site တစ္ခုခုမွာ တင္ျပီးေတာ႔မွ လင္႔ခ္ထုတ္ယူဖုိ႔ကိုေတာ႔ မေမ႔ပါနဲ႔ေနာ္. File Hosting လုပ္နည္းကုိ မသိရင္ ဒီေနရာမွာ ေရးခဲ႔ျပီးပါျပီ. ေလ႔လာႏုိင္ပါတယ္ ခင္ဗ်ာ.
A background image:
| First | Row |
| Second | Row |
ကုိယ္႔ရဲ႔လုိအပ္ခ်က္ေပၚ မူတည္ျပီး ဒီပုိ႔စ္ေလးကုိ အက်ိဳးရွိစြာ အသုံးခ်ႏုိင္ၾကမယ္လုိ႔ ေမွ်ာ္လင္႔မိပါေၾကာင္း….
Acknowledgement:
ဒီေနရာက ပုိ႔စ္ေလးကုိ အေျခခံျပီး သင္႔ေတာ္သလုိ ျဖည္႔စြက္ ေရးသားပါတယ္ ခင္ဗ်ာ.
ခင္မင္ေလးစားလ်က္
ရန္ေအာင္
Crazy Mac Dock Menu Hack For Your Blog
written by Mhaw Sayar
at Sunday, December 2, 2007
Contributor: ေမွာ္ဆရာ
Mac crazy ေတြေရာ၊ crazy မဟုတ္သူေတြေရာ Mac လို႔ဆိုလိုက္တာနဲ႔ The Most Advance OS on the Whole World ဆိုတာကို သိၿပီးျဖစ္ၾကပါလိမ့္မယ္။ လွပေသသပ္ၿပီး၊ ဆြဲေဆာင္မႈအျပည့္ရွိတဲ့ GUI (Graphical
User Interface) စနစ္၊ လံုၿခံဳမႈအျပည့္နဲ႔ စြမ္းေဆာင္ရည္ျမင့္မားတဲ့
လုပ္ေဆာင္မႈစနစ္ေတြဟာ စားသံုးသူေတြ အတြက္ေတာ့ Mac ကို
လံုး၀လက္မလႊတ္ႏိုင္ေအာင္ ဖမ္းစားထားတဲ့ အခ်က္ေတြပါပဲ။
Mac User ေတြအတြက္ကေတာ့ အကၽြမ္းတ၀င္ျဖစ္ၿပီးသားမို႔ ထပ္ရွင္းစရာ မလိုေလာက္ေတာ့ပါဘူး။ Mac နဲ႔အကၽြမ္းတ၀င္မျဖစ္သူေတြ အတြက္ Mac Dock ဆိုတာဘာလဲ ဆိုတာအနည္းငယ္ ရွင္းဖို႔လိုပါလိမ့္မယ္။ တစ္ကယ္ေတာ့ Mac Dock ဆိုတာ ကၽြန္ေတာ္တို႔ Window ေတြမွာ သံုးသကဲ့သို႔ Application မ်ားကို အလြယ္တစ္ကူ အသံုးျပဳႏိုင္ရန္ Short Cut Icons (My Computer,My Document. အစရွိသည္) မ်ားကို Mac OS ရဲ့ လွပေသသပ္တဲ့ GUI စနစ္မွာ Menu Bar(Iconbar) တစ္ခုအျဖစ္ ေပ်ာ့ေပ်ာင္းစြာ ေပါင္းစည္းထားတဲ့ Mac OS ရဲ့ Desktop Iconbar တစ္ခုပါပဲ။
Mac Dock Menu တစ္ခုကို ဘေလာ့ဂ္မွာ ဘယ္လို အသံုးၿပဳထားသလဲဆိုတာ [ဒီေနရာ] မွာ သြားေရာက္ေလ့လာ ၾကည့္ရႈႏိုင္ပါခင္ဗ်ာ။
ကဲ. ေျပာေနၾကာပါတယ္ဗ်ာ။ လက္ေတြ႔အေနနဲ႔ အခု ေစ်းႀကီးလွတဲ့ Mac ကို ခင္ဗ်ား၀ယ္သံုးစရာ မလိုပါဘူး။ ခပ္မိုက္မိုက္ Mac Dock ေလးတစ္ခု ခင္ဗ်ား ဘေလာ့ဂ္ထဲကို ေရာက္ရွိလာဖို႔ ဒီပို႔စ္ေလးကို ဖတ္လိုက္ဖို႔ပဲ လိုပါတယ္။
စမယ္ဗ်ိဳ႔။ ပထမဆံုးလုပ္ရမွာက ဒီေအာက္က CSS ကုဒ္ေတြကို ]]></b:skin> မတိုင္ခင္ Footer CSS ကုဒ္ရဲ့ ေအာက္မွာ ဆက္ထည့္ေပးပါ။ ဒီ CSS ကုဒ္ေတြက Mac Dock Menu ကို ဘေလာ့ဂ္ ေအာက္ေျခမွာ ေပၚေစမွာျဖစ္ၿပီး အေပၚမွာ ထားလိုသူေတြ အတြက္ကေတာ့ ေအာက္မွာ ဆက္ျပထားတဲ့ ကုဒ္ေတြကိုအသံုးျပဳေပးရပါမယ္။
အဆင့္(၁)
CSS Codes For Mac Dock Menu - For Those Who Want to Use at The Bottom
CSS Codes For Mac Dock Menu - For Those Who Want to Use at The Top
အဆင့္(၂)
ဒီအဆင့္ၿပီးၿပီဆိုတာနဲ႔ ေအာက္က Java Script ကုဒ္ေတြကို ]]></b:skin> ႏွင့္ </head> ၾကားမွာ ထည့္ေပးပါ။ ထံုးစံအတိုင္း Top အတြက္ နဲ႔ Bottom အတြက္ ကုဒ္ (၂) မ်ိဳးခြဲေပးထားပါတယ္။
Java Script For Mac Dock Menu - For Those Who Want to Use at The Bottom
Java Script For Mac Dock Menu - For Those Who Want to Use at The Top
ဒီအဆင့္မွာ သံုးထားတဲ့ .js ႏွင့္ iepngfix.htc ဖိုင္(၂) ခုကို Bandwidth ကုန္သြားတဲ့အခါမ်ိဳးမွာ ပံုမွန္အလုပ္မလုပ္မႈ ျဖစ္ျခင္းမွ ကာကြယ္ရန္အတြက္ မိမိကိုယ္ပိုင္ Fileden | Ripway | Google Pages အစရွိတဲ့ Hosting တစ္ခုခုမွာ ျပန္တင္ၿပီး အသံုးျပဳသင့္ပါတယ္။
အဆင့္(၃)
ေနာက္ဆံုးအဆင့္အေနနဲ႔ Dock Menu ကို Bottom မွာ ထည့္လိုသူမ်ားအတြက္ ဒီကုဒ္ေလးကို ေတြ႔ေအာင္ရွာပါ(Ctrl+F အကူအညီျဖင့္)။
For Those Who Want to Use at The Bottom (HTML Codes for Mac Dock Menu)
Mac Dock Menu ကို ဘေလာ့ဂ္ရဲ့ အေပၚမွာ Navigation Bar သဖြယ္ အသံုးျပဳလိုသူေတြအတြက္ကေတာ့ ဒီကုဒ္ေလးေတြကို ေျပာင္းလဲရွာေဖြဖို႔လိုပါမယ္။
For Those Who Want to Use at The Top (HTML Codes for Mac Dock Menu)
ဒီအဆင့္မွာ မွတ္သားစရာ (၂) ခုရွိပါတယ္။
(က) သံုးထားတဲ့ ပံုအားလံုးဟာ ကၽြန္ေတာ့္ရဲ့ Google Pages စာမ်က္ႏွာမွာ တင္ထားတာျဖစ္တဲ့ အတြက္အကယ္၍ ဒီ Hack ကိုအသံုးျပဳသူမ်ားလာခဲ့ရင္ ပံုေတြရဲ့ Bandwidth ကုန္တဲ့အခ်ိန္ မိမိစာမ်က္ႏွာမွာ ပံုမေပၚတာေတြ၊ ပံုမွန္အလုပ္မလုပ္တာေတြ ျဖစ္ႏိုင္ပါတယ္။ အဲဒီအတြက္ အေကာင္းဆံုးကေတာ့ ပံုအားလံုးကို ေဒါင္းလုဒ္လုပ္ၿပီး မိမိကိုယ္ပိုင္ Google Pages မွာျဖစ္ျဖစ္၊ အျခား Image Hosting မ်ားမွာျဖစ္ေစျပန္တင္ၿပီး အသံုးျပဳသင့္ပါတယ္။
(ခ) မိမိကိုယ္ပိုင္ အျခား Icon Design မ်ားေျပာင္းလဲ အသံုးျပဳလိုတယ္ဆိုရင္ေတာ့ ေအာက္ပါဆိုဒ္ေတြမွာ သြားေရာက္ရွာေဖြ ေဒါင္းလုဒ္ လုပ္ၿပီး အစားထိုးအသံုးျပဳႏိုင္ပါတယ္။
(ဂ)ေနာက္တစ္ခုကေတာ့[href="#"] ဆိုတဲ့ ကုဒ္ရဲ့ [#] ေနရာမွာ မိမိထည့္လိုတဲ့ လင့္ခ္ တစ္ခုစီထည့္ေပးရပါမယ္။ Home,Contact အစရွိတာေတြကို မိမိစိတ္ႀကိဳက္ အမည္ေပး၊ ေရွ႔ေနာက္ ေနရာေျပာင္းေရြ႔လို႔ရပါတယ္။
အားလံုးပဲ အဆင္ေျပၾကလိမ့္မယ္လို႔ ထင္ပါတယ္။ အဆင္မေျပမႈတစ္ခုခုရွိခဲ့ရင္ ဒါမမဟုတ္ ပိုမိုေကာင္းမြန္တဲ့ အႀကံအစည္ေလးမ်ား ရွိခဲ့ရင္လည္း မွတ္ခ်က္မွာ လြတ္လြတ္လပ္လပ္ ၀င္ေရာက္ေဆြးေႏြး၊ အႀကံေပး ေရးသားႏိုင္ပါေၾကာင္း။
Sources: SmashingMagazine
Technorati Tags: Blogger Hacks | Mac Dock | Mac dock menu | Mac dock menu for blog | Mac dock menu hack | Mac dock menu hack for blog | Mac style menubar | Mac style menubar for blog | Mac style menu bar hack | crazy mac dock | crazy mac dock hack | crazy mac dock hack for blog | blogging hacks | blogger hackz
Read More...
Mac User ေတြအတြက္ကေတာ့ အကၽြမ္းတ၀င္ျဖစ္ၿပီးသားမို႔ ထပ္ရွင္းစရာ မလိုေလာက္ေတာ့ပါဘူး။ Mac နဲ႔အကၽြမ္းတ၀င္မျဖစ္သူေတြ အတြက္ Mac Dock ဆိုတာဘာလဲ ဆိုတာအနည္းငယ္ ရွင္းဖို႔လိုပါလိမ့္မယ္။ တစ္ကယ္ေတာ့ Mac Dock ဆိုတာ ကၽြန္ေတာ္တို႔ Window ေတြမွာ သံုးသကဲ့သို႔ Application မ်ားကို အလြယ္တစ္ကူ အသံုးျပဳႏိုင္ရန္ Short Cut Icons (My Computer,My Document. အစရွိသည္) မ်ားကို Mac OS ရဲ့ လွပေသသပ္တဲ့ GUI စနစ္မွာ Menu Bar(Iconbar) တစ္ခုအျဖစ္ ေပ်ာ့ေပ်ာင္းစြာ ေပါင္းစည္းထားတဲ့ Mac OS ရဲ့ Desktop Iconbar တစ္ခုပါပဲ။
Mac Dock Menu တစ္ခုကို ဘေလာ့ဂ္မွာ ဘယ္လို အသံုးၿပဳထားသလဲဆိုတာ [ဒီေနရာ] မွာ သြားေရာက္ေလ့လာ ၾကည့္ရႈႏိုင္ပါခင္ဗ်ာ။
ကဲ. ေျပာေနၾကာပါတယ္ဗ်ာ။ လက္ေတြ႔အေနနဲ႔ အခု ေစ်းႀကီးလွတဲ့ Mac ကို ခင္ဗ်ား၀ယ္သံုးစရာ မလိုပါဘူး။ ခပ္မိုက္မိုက္ Mac Dock ေလးတစ္ခု ခင္ဗ်ား ဘေလာ့ဂ္ထဲကို ေရာက္ရွိလာဖို႔ ဒီပို႔စ္ေလးကို ဖတ္လိုက္ဖို႔ပဲ လိုပါတယ္။
စမယ္ဗ်ိဳ႔။ ပထမဆံုးလုပ္ရမွာက ဒီေအာက္က CSS ကုဒ္ေတြကို ]]></b:skin> မတိုင္ခင္ Footer CSS ကုဒ္ရဲ့ ေအာက္မွာ ဆက္ထည့္ေပးပါ။ ဒီ CSS ကုဒ္ေတြက Mac Dock Menu ကို ဘေလာ့ဂ္ ေအာက္ေျခမွာ ေပၚေစမွာျဖစ္ၿပီး အေပၚမွာ ထားလိုသူေတြ အတြက္ကေတာ့ ေအာက္မွာ ဆက္ျပထားတဲ့ ကုဒ္ေတြကိုအသံုးျပဳေပးရပါမယ္။
အဆင့္(၁)
CSS Codes For Mac Dock Menu - For Those Who Want to Use at The Bottom
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: #FFFFFF;
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px "Zawgyi-One",Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}CSS Codes For Mac Dock Menu - For Those Who Want to Use at The Top
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: #FFFFFF;
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px "Zawgyi-One",Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}အဆင့္(၂)
ဒီအဆင့္ၿပီးၿပီဆိုတာနဲ႔ ေအာက္က Java Script ကုဒ္ေတြကို ]]></b:skin> ႏွင့္ </head> ၾကားမွာ ထည့္ေပးပါ။ ထံုးစံအတိုင္း Top အတြက္ နဲ႔ Bottom အတြက္ ကုဒ္ (၂) မ်ိဳးခြဲေပးထားပါတယ္။
Java Script For Mac Dock Menu - For Those Who Want to Use at The Bottom
<script type="text/javascript" src="http://myanmarne0.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://myanmarne0.googlepages.com/interface.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(http://myanmarne0.googlepages.com/iepngfix.htc) }
</style>
<![endif]-->
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>Java Script For Mac Dock Menu - For Those Who Want to Use at The Top
<script type="text/javascript" src="http://myanmarne0.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://myanmarne0.googlepages.com/interface.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(http://myanmarne0.googlepages.com/iepngfix.htc) }
</style>
<![endif]-->
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script> ဒီအဆင့္မွာ သံုးထားတဲ့ .js ႏွင့္ iepngfix.htc ဖိုင္(၂) ခုကို Bandwidth ကုန္သြားတဲ့အခါမ်ိဳးမွာ ပံုမွန္အလုပ္မလုပ္မႈ ျဖစ္ျခင္းမွ ကာကြယ္ရန္အတြက္ မိမိကိုယ္ပိုင္ Fileden | Ripway | Google Pages အစရွိတဲ့ Hosting တစ္ခုခုမွာ ျပန္တင္ၿပီး အသံုးျပဳသင့္ပါတယ္။အဆင့္(၃)
ေနာက္ဆံုးအဆင့္အေနနဲ႔ Dock Menu ကို Bottom မွာ ထည့္လိုသူမ်ားအတြက္ ဒီကုဒ္ေလးကို ေတြ႔ေအာင္ရွာပါ(Ctrl+F အကူအညီျဖင့္)။
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
ဒီေနရာမွာ ေအာက္က ျပထားတဲ့ ကုဒ္ေတြ ထည့္ရပါမယ္။
</div></div> <!-- end outer-wrapper -->For Those Who Want to Use at The Bottom (HTML Codes for Mac Dock Menu)
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a
class="dock-item2" href="#"><span>Home</span><img
src="http://myanmarne0.googlepages.com/home.png" alt="home"
/></a>
<a class="dock-item2"
href="#"><span>Contact</span><img
src="http://myanmarne0.googlepages.com/email.png" alt="contact"
/></a>
<a class="dock-item2"
href="#"><span>Portfolio</span><img
src="http://myanmarne0.googlepages.com/portfolio.png" alt="portfolio"
/></a>
<a class="dock-item2"
href="#"><span>Music</span><img
src="http://myanmarne0.googlepages.com/music.png" alt="music"
/></a>
<a class="dock-item2"
href="#"><span>Video</span><img
src="http://myanmarne0.googlepages.com/video.png" alt="video"
/></a>
<a class="dock-item2"
href="#"><span>History</span><img
src="http://myanmarne0.googlepages.com/history.png" alt="history"
/></a>
<a class="dock-item2"
href="#"><span>Calendar</span><img
src="http://myanmarne0.googlepages.com/calendar.png" alt="calendar"
/></a>
<a class="dock-item2"
href="#"><span>Links</span><img
src="http://myanmarne0.googlepages.com/link.png" alt="links"
/></a>
<a class="dock-item2"
href="#"><span>RSS</span><img
src="http://myanmarne0.googlepages.com/rss.png" alt="rss"
/></a>
<a class="dock-item2"
href="#"><span>RSS2</span><img
src="http://myanmarne0.googlepages.com/rss2.png" alt="rss"
/></a>
</div>
</div>Mac Dock Menu ကို ဘေလာ့ဂ္ရဲ့ အေပၚမွာ Navigation Bar သဖြယ္ အသံုးျပဳလိုသူေတြအတြက္ကေတာ့ ဒီကုဒ္ေလးေတြကို ေျပာင္းလဲရွာေဖြဖို႔လိုပါမယ္။
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='More Blogging (Header)' type='Header'/>
</b:section>
</div>
ဒီေနရာမွာ ေအာက္က ျပထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးပါ။
<div id='content-wrapper'>For Those Who Want to Use at The Top (HTML Codes for Mac Dock Menu)
<!--top dock -->
<div class="dock" id="dock">
<div class="dock-container">
<a
class="dock-item2" href="#"><span>Home</span><img
src="http://myanmarne0.googlepages.com/home.png" alt="home"
/></a>
<a class="dock-item2"
href="#"><span>Contact</span><img
src="http://myanmarne0.googlepages.com/email.png" alt="contact"
/></a>
<a class="dock-item2"
href="#"><span>Portfolio</span><img
src="http://myanmarne0.googlepages.com/portfolio.png" alt="portfolio"
/></a>
<a class="dock-item2"
href="#"><span>Music</span><img
src="http://myanmarne0.googlepages.com/music.png" alt="music"
/></a>
<a class="dock-item2"
href="#"><span>Video</span><img
src="http://myanmarne0.googlepages.com/video.png" alt="video"
/></a>
<a class="dock-item2"
href="#"><span>History</span><img
src="http://myanmarne0.googlepages.com/history.png" alt="history"
/></a>
<a class="dock-item2"
href="#"><span>Calendar</span><img
src="http://myanmarne0.googlepages.com/calendar.png" alt="calendar"
/></a>
<a class="dock-item2"
href="#"><span>RSS</span><img
src="http://myanmarne0.googlepages.com/rss.png" alt="rss"
/></a>
</div>
</div> ဒီအဆင့္မွာ မွတ္သားစရာ (၂) ခုရွိပါတယ္။(က) သံုးထားတဲ့ ပံုအားလံုးဟာ ကၽြန္ေတာ့္ရဲ့ Google Pages စာမ်က္ႏွာမွာ တင္ထားတာျဖစ္တဲ့ အတြက္အကယ္၍ ဒီ Hack ကိုအသံုးျပဳသူမ်ားလာခဲ့ရင္ ပံုေတြရဲ့ Bandwidth ကုန္တဲ့အခ်ိန္ မိမိစာမ်က္ႏွာမွာ ပံုမေပၚတာေတြ၊ ပံုမွန္အလုပ္မလုပ္တာေတြ ျဖစ္ႏိုင္ပါတယ္။ အဲဒီအတြက္ အေကာင္းဆံုးကေတာ့ ပံုအားလံုးကို ေဒါင္းလုဒ္လုပ္ၿပီး မိမိကိုယ္ပိုင္ Google Pages မွာျဖစ္ျဖစ္၊ အျခား Image Hosting မ်ားမွာျဖစ္ေစျပန္တင္ၿပီး အသံုးျပဳသင့္ပါတယ္။
(ခ) မိမိကိုယ္ပိုင္ အျခား Icon Design မ်ားေျပာင္းလဲ အသံုးျပဳလိုတယ္ဆိုရင္ေတာ့ ေအာက္ပါဆိုဒ္ေတြမွာ သြားေရာက္ရွာေဖြ ေဒါင္းလုဒ္ လုပ္ၿပီး အစားထိုးအသံုးျပဳႏိုင္ပါတယ္။
http://www.crystalxp.net/galerie/en.cat.1.htmlhttp://www.vistaicons.com/http://www.iconarchive.com/http://interfacelift.com/icons-mac/faq.php(ဂ)ေနာက္တစ္ခုကေတာ့[href="#"] ဆိုတဲ့ ကုဒ္ရဲ့ [#] ေနရာမွာ မိမိထည့္လိုတဲ့ လင့္ခ္ တစ္ခုစီထည့္ေပးရပါမယ္။ Home,Contact အစရွိတာေတြကို မိမိစိတ္ႀကိဳက္ အမည္ေပး၊ ေရွ႔ေနာက္ ေနရာေျပာင္းေရြ႔လို႔ရပါတယ္။
အားလံုးပဲ အဆင္ေျပၾကလိမ့္မယ္လို႔ ထင္ပါတယ္။ အဆင္မေျပမႈတစ္ခုခုရွိခဲ့ရင္ ဒါမမဟုတ္ ပိုမိုေကာင္းမြန္တဲ့ အႀကံအစည္ေလးမ်ား ရွိခဲ့ရင္လည္း မွတ္ခ်က္မွာ လြတ္လြတ္လပ္လပ္ ၀င္ေရာက္ေဆြးေႏြး၊ အႀကံေပး ေရးသားႏိုင္ပါေၾကာင္း။
Sources: SmashingMagazine
Technorati Tags: Blogger Hacks | Mac Dock | Mac dock menu | Mac dock menu for blog | Mac dock menu hack | Mac dock menu hack for blog | Mac style menubar | Mac style menubar for blog | Mac style menu bar hack | crazy mac dock | crazy mac dock hack | crazy mac dock hack for blog | blogging hacks | blogger hackz
Blogger Comment ႏွင့္ Post Section တို႔တြင္ Smile ရုပ္ပံုမ်ား ထည့္သြင္းျခင္း
written by Mhaw Sayar
at Thursday, November 8, 2007
Contributor: ေမွာ္ဆရာ
ႏႈတ္တစ္ရာ၊
စာတစ္လံုး။ စာလံုးတစ္ေထာင္ထက္ ရုပ္ပံုတစ္ခုက အဓိပၸာယ္ေပါင္း
ေျမာက္မ်ားစြာကို ေဖာ္ျပနိဳင္စြမ္းရွိပါတယ္။ အဲဒီေတာ့ ကၽြန္ေတာ္တို႔
ေရးသားေနတဲ့ ပို႔စ္ေတြ၊ မွတ္ခ်က္ေတြထဲမွာလည္း သူ႔ေနရာေလးနဲ႔သူ
အဓိပၸာယ္ရွိတဲ့ ပံုေလးေတြနဲ႔ ကိုယ္စားျပဳေဖာ္ျပေပးလိုက္ မယ္ဆိုရင္
အတိုင္းထက္ အလြန္၊ တံခြန္နဲ႔ ကုကၠား ဆိုသလိုပဲ အစစ၊ အရာရာ သာလြန္ျပည့္စံု
ေကာင္းမြန္တဲ့ ပို႔စ္ ေတြ၊ မွတ္ခ်က္ေတြ၊ ေဆြးေႏြးခ်က္
ေတြျဖစ္လာမွာအမွန္ပါပဲ။
မိမိဘေလာ့ဂ္ရဲ့ Comment မွာေရာ၊ ပို႔စ္ေတြထဲမွာပါ အၿပံဳးေလးေတြကို လူမ်ိဳးဘာသာမေရြး အားလံုးအသံုးျပဳနိဳင္ဖို႔ အလြယ္ကူဆံုး နည္းလမ္းမ်ားကို ရွာေဖြ တင္ဆက္ထားပါတယ္။
နည္းလမ္း။ ။ Blogger Comment & Post Section တို႔တြင္ Smiles ရုပ္ပံုမ်ားထည့္သြင္းျခင္း
ေအာက္ပါအတိုင္းလုပ္ေဆာင္ပါ။
(၁) မိမိရဲ့ စက္ထဲမွာ မီးေျမေခြး (FireFox) ဘေရာက္ဇာ ရွိရပါမယ္။ မရွိခဲ့လ်င္ [ဒီေနရာ] မွာေဒါင္းလုဒ္ခ်၍ Install လုပ္ပါ။
(၂) ေနာက္တစ္ခုကေတာ့ Greasemonkey ဆိုတဲ့ FireFox Addon ရွိရပါမယ္။ မရွိခဲ့လ်င္ [ဒီေနရာ] မွာ ေဒါင္းလုဒ္လုပ္၍ Install လုပ္ပါ။ ၎ Addon အား မိမိ FireFox Browser တြင္ Install လုပ္ၿပီးပါက ဘေရာက္ဇာ၏ ညာဘက္ေအာက္ေျခေထာင့္တြင္ နီညိဳေရာင္ ေမ်ာက္ေခါင္းပံုတစ္ခု ေပၚလာမည္ျဖစ္သည္။
(၃) အထက္ပါအဆင့္မ်ား ေအာင္ျမင္စြာျပဳလုပ္ၿပီးစီးပါက Comment Section တြင္ Smiles မ်ားထည့္သြင္းရန္အတြက္ -
[ဤေနရာ] တြင္ ”ကလစ္” လုပ္ပါ။ Greasemonkey မွ ၎ Script ကို Install လုပ္ေပးမည္ျဖစ္၍ ေအာက္ပါအတုိင္း Pop up ၀င္းဒိုး တစ္ခုတက္လာလ်င္ ”Install” ကိုသာ ဆက္၍ ကလစ္လိုက္ပါ။
ၿပီးလ်င္ မိမိ၏ Comment ေရးသားေသာ ေနရာတြင္ ေအာက္ပါအတိုင္း Smile မ်ားႏွင့္တကြ HTML Code အခ်ိဳ႔ကိုပါ အလြယ္သံုးႏိုင္ေအာင္ လုပ္ေပးထားေသာ Tab ေလးမ်ားကို ေတြ႔ရမွာျဖစ္ပါတယ္။
(၄) Post Section တြင္ Smiles မ်ားထည့္သြင္းရန္အတြက္ ကိုမူ -
[ဤေနရာ] တြင္ကလစ္လုပ္ပါ။ အထက္ကအတိုင္း Popup တစ္ခုတက္လာလ်င္ Install ကိုကလစ္ပါ။ၿပီးလ်င္ ေအာက္ပါအတိုင္း ျမင္ေတြ႔နိဳင္ပါၿပီ။
(၅) ဤေနာက္ဆံုးအဆင့္တြင္ ေအာက္ပါကုဒ္ မ်ားကိုရွာ၍ အနီျပထားေသာ ကုဒ္မ်ားကို Delete လုပ္ပါ။
အဆံုးသတ္အေနျဖင့္ ေအာက္ပါကုဒ္ မ်ားကို မိမိ၏ Template ထဲရွိ </head> ဆိုေသာကုဒ္ မတိုင္မွီ Template ၏ CSS အပိုင္းတြင္ထည့္ေပးပါ။
ၿပီးလ်င္ အားလံုး အဆင္သင့္ျဖစ္ပါၿပီ။ ပို႔စ္ေရးေသာအခါ၊ သို႔၊ မွတ္ခ်က္ေရးေသာအခါ တြင္ Smile မ်ားကိုအသံုးျပဳလိုပါက၊ မိမိေပၚေစခ်င္ေသာ ေနရာတြင္ Cursor ခ်ၿပီး၊ အသံုးျပဳမည့္ Smile ေလးမ်ားေပၚတြင္ ကလစ္ေပးလိုက္ရံုသာျဖစ္သည္။
မွတ္ခ်က္။ ။အထက္ပါ Smiles Hack တြင္ Comment Section အတြက္ Hack သည္ ၎ Hack ကို Install လုပ္ထားေသာ ဘေလာ့ဂ္ ႏွင့္ အဆိုပါ စက္တြင္သာျမင္ရမည္ျဖစ္သည္။ အျခားသူမ်ား၏ ဘေလာ့ဂ္ႏွင့္ စက္မ်ားမွ ျမင္ေတြ႔ရမည္မဟုတ္။ထို႔ျပင္ ဘေလာ့ဂ္၏ ပို႔စ္ Section တြင္ Comment မွ Smile မ်ားေပၚမည္မဟုတ္ပဲ သေကၤတမ်ားျဖင့္သာ ကိုယ္စားျပဳမည္ျဖစ္သည္။ ဘေလာ့ဂ္၏ Comment Section တြင္သာ Smiles မ်ားကိုျမင္ေတြ႔ရမည္ျဖစ္သည္။
Sources: BloggerHacked | Notes4PC
Technorati Tags: Blogger Hacks | Smiles Hacks | Blogger Smiles Hacks | how to | tutorial | Blogger Hacks for All
Read More...
မိမိဘေလာ့ဂ္ရဲ့ Comment မွာေရာ၊ ပို႔စ္ေတြထဲမွာပါ အၿပံဳးေလးေတြကို လူမ်ိဳးဘာသာမေရြး အားလံုးအသံုးျပဳနိဳင္ဖို႔ အလြယ္ကူဆံုး နည္းလမ္းမ်ားကို ရွာေဖြ တင္ဆက္ထားပါတယ္။
နည္းလမ္း။ ။ Blogger Comment & Post Section တို႔တြင္ Smiles ရုပ္ပံုမ်ားထည့္သြင္းျခင္း
ေအာက္ပါအတိုင္းလုပ္ေဆာင္ပါ။
(၁) မိမိရဲ့ စက္ထဲမွာ မီးေျမေခြး (FireFox) ဘေရာက္ဇာ ရွိရပါမယ္။ မရွိခဲ့လ်င္ [ဒီေနရာ] မွာေဒါင္းလုဒ္ခ်၍ Install လုပ္ပါ။
(၂) ေနာက္တစ္ခုကေတာ့ Greasemonkey ဆိုတဲ့ FireFox Addon ရွိရပါမယ္။ မရွိခဲ့လ်င္ [ဒီေနရာ] မွာ ေဒါင္းလုဒ္လုပ္၍ Install လုပ္ပါ။ ၎ Addon အား မိမိ FireFox Browser တြင္ Install လုပ္ၿပီးပါက ဘေရာက္ဇာ၏ ညာဘက္ေအာက္ေျခေထာင့္တြင္ နီညိဳေရာင္ ေမ်ာက္ေခါင္းပံုတစ္ခု ေပၚလာမည္ျဖစ္သည္။
(၃) အထက္ပါအဆင့္မ်ား ေအာင္ျမင္စြာျပဳလုပ္ၿပီးစီးပါက Comment Section တြင္ Smiles မ်ားထည့္သြင္းရန္အတြက္ -
[ဤေနရာ] တြင္ ”ကလစ္” လုပ္ပါ။ Greasemonkey မွ ၎ Script ကို Install လုပ္ေပးမည္ျဖစ္၍ ေအာက္ပါအတုိင္း Pop up ၀င္းဒိုး တစ္ခုတက္လာလ်င္ ”Install” ကိုသာ ဆက္၍ ကလစ္လိုက္ပါ။
ၿပီးလ်င္ မိမိ၏ Comment ေရးသားေသာ ေနရာတြင္ ေအာက္ပါအတိုင္း Smile မ်ားႏွင့္တကြ HTML Code အခ်ိဳ႔ကိုပါ အလြယ္သံုးႏိုင္ေအာင္ လုပ္ေပးထားေသာ Tab ေလးမ်ားကို ေတြ႔ရမွာျဖစ္ပါတယ္။
(၄) Post Section တြင္ Smiles မ်ားထည့္သြင္းရန္အတြက္ ကိုမူ -
[ဤေနရာ] တြင္ကလစ္လုပ္ပါ။ အထက္ကအတိုင္း Popup တစ္ခုတက္လာလ်င္ Install ကိုကလစ္ပါ။ၿပီးလ်င္ ေအာက္ပါအတိုင္း ျမင္ေတြ႔နိဳင္ပါၿပီ။
(၅) ဤေနာက္ဆံုးအဆင့္တြင္ ေအာက္ပါကုဒ္ မ်ားကိုရွာ၍ အနီျပထားေသာ ကုဒ္မ်ားကို Delete လုပ္ပါ။
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
font-family: "ZawGyi-One", ZawgyiOne, Zawgyi1;
}အဆံုးသတ္အေနျဖင့္ ေအာက္ပါကုဒ္ မ်ားကို မိမိ၏ Template ထဲရွိ </head> ဆိုေသာကုဒ္ မတိုင္မွီ Template ၏ CSS အပိုင္းတြင္ထည့္ေပးပါ။
img.emoticon {
padding: 0;
margin: 0;
border: 0;
}ၿပီးလ်င္ အားလံုး အဆင္သင့္ျဖစ္ပါၿပီ။ ပို႔စ္ေရးေသာအခါ၊ သို႔၊ မွတ္ခ်က္ေရးေသာအခါ တြင္ Smile မ်ားကိုအသံုးျပဳလိုပါက၊ မိမိေပၚေစခ်င္ေသာ ေနရာတြင္ Cursor ခ်ၿပီး၊ အသံုးျပဳမည့္ Smile ေလးမ်ားေပၚတြင္ ကလစ္ေပးလိုက္ရံုသာျဖစ္သည္။
မွတ္ခ်က္။ ။အထက္ပါ Smiles Hack တြင္ Comment Section အတြက္ Hack သည္ ၎ Hack ကို Install လုပ္ထားေသာ ဘေလာ့ဂ္ ႏွင့္ အဆိုပါ စက္တြင္သာျမင္ရမည္ျဖစ္သည္။ အျခားသူမ်ား၏ ဘေလာ့ဂ္ႏွင့္ စက္မ်ားမွ ျမင္ေတြ႔ရမည္မဟုတ္။ထို႔ျပင္ ဘေလာ့ဂ္၏ ပို႔စ္ Section တြင္ Comment မွ Smile မ်ားေပၚမည္မဟုတ္ပဲ သေကၤတမ်ားျဖင့္သာ ကိုယ္စားျပဳမည္ျဖစ္သည္။ ဘေလာ့ဂ္၏ Comment Section တြင္သာ Smiles မ်ားကိုျမင္ေတြ႔ရမည္ျဖစ္သည္။
Sources: BloggerHacked | Notes4PC
Technorati Tags: Blogger Hacks | Smiles Hacks | Blogger Smiles Hacks | how to | tutorial | Blogger Hacks for All
ဘေလာ့ဂ္ ထိပ္ဆံုးက navbar ေဖ်ာက္ျခင္းသည္ တရား၀င္၊မ၀င္ ?
written by Mhaw Sayar
at Monday, November 5, 2007
Contributor: ေမွာ္ဆရာ
Blogspot
အသံုးျပဳသူတိုင္း မိမိဘေလာ့ဂ္ရဲ့ ထိပ္ဆံုးမွာ ဘေလာ့ဂ္ေတြကို
ရွာေဖြလို႔ရတဲ့ Search Box တစ္ခုနဲ႔ အတူ မိမိရဲ့ Gmail Address
ကိုပါအၿမဲေဖာ္ျပေနတဲ့ Navigation Bar တစ္ခုကို သတိျပဳမိၾကမွာပါ။ တစ္ခ်ိဳ႔
ကအဲဒီဘားကို ႀကိဳက္တာရွိသလို တစ္ခ်ိဳ႔ကလည္း မႀကိဳက္တာေတြရွိၾကပါတယ္။ အဲဒီ
navbar ကလည္း တစ္ခ်ိဳ႔ေသာ Blogger Template ေတြမွာ ပါသလို တစ္ခ်ိဳ႔ေသာ
Template ေတြမွာ မပါပါဘူး။ ေသခ်ာတာက ေတာ့ Blogger.com ရဲ့ မူရင္း Template
အားလံုးလိုလိုမွာ ပါပါတယ္။ေနာက္ မ်ားေသာအားျဖင့္ ဘေလာ့ဂၢါေတြ
ေတာ္ေတာ္မ်ားမ်ားကလည္း အဲဒီ Navigation Bar ကို မိမိနည္း ၊ မိမိဟန္နဲ႔
ေဖ်ာက္ၿပီးအသံုးျပဳေနၾကတာ အစဥ္ အလာတစ္ခုလိုျဖစ္ေနပါၿပီ။
ဒီေနရာမွာ အေရးႀကီးတဲ့ ေမးခြန္းတစ္ခုကေတာ့ အဲဒီလို Navigation Bar ေဖ်ာက္သံုးျခင္းဟာ Google ရဲ့ Terms of Service ေတြ ၊ Privacy Polcy ေတြနဲ႔ညီ မညီဆိုတာပါပဲ။ဒါနဲ႔ပတ္သက္ၿပီး ေလ့လာၾကည့္မိတဲ့ အခ်ိန္မွာ Blogger ရဲ့ TOS စာမ်က္ႏွာ မွာမည္သည့္ ရည္ညႊန္းခ်က္မွ မေတြ႔မိသလို Blogger Support Group ရဲ့ ေဆြးေႏြးခန္း မွာ ဆိုရင္လည္း Navigation Bar နဲ႔ ပတ္သက္တဲ့ ေမးခြန္းတိုင္းကို အၿမဲတေစ ျငင္းပယ္ေလ့ ရွိတာကိုေတြ႔ရပါတယ္။
ဒီျပႆနာကို ရွင္းရွင္းလင္းလင္း သိဖို႔အတြက္ အိႏၵိယ ႏိုင္ငံ ဘန္ဂလိုၿမိဳ႔မွာ ျပဳလုပ္ခဲ့တဲ့ Google ရဲ့ Road Show ျပပြဲအတြင္း Blogger မ်ားမွ navbar Polcy နဲ႔ပတ္သက္တဲ့ အေၾကာင္းအရာမ်ားကို ရွင္းလင္းေျပာၾကားေပးဖို႔ Google ရဲ့တာ၀န္ ရွိသူမ်ားကို ေမးျမန္းခဲ့ၾကပါတယ္။ အဲဒီျပပြဲအတြင္းမွာပဲ Google အမႈေဆာင္အဖြဲ႔( Google's Bangalore office) မွ အေရးေပၚအစည္း အေ၀းေခၚခဲ့ၿပီး navbar ေဖ်ာက္ျခင္းဟာ တရား၀င္(Legal) ျဖစ္ပါေၾကာင္း ေသခ်ာတဲ့ ဆံုးျဖတ္ခ်က္ႏွင့္ ရွင္းရွင္းလင္းလင္းေၾကညာခဲ့ပါတယ္။
ေကာင္းပါၿပီ။ အဲဒီေတာ့ ကၽြန္ေတာ္တို႔ဒီ nvabar ေလးကိုေဖ်ာက္သံုးျခင္းဟာ တရား၀င္ျဖစ္ေၾကာင္း ေသခ်ာသြားပါၿပီ။ ဘယ္လိုေဖ်ာက္မလဲ။ နည္းလမ္းေတြကေတာ့ အမ်ိဳးမ်ိဳးရွိၿပီး၊ အမ်ိဳးမ်ိဳးသံုးၾကပါတယ္။ ဘေလာဂၢါအမ်ားစု သံုးေလ့သံုးထရွိတဲ့ နည္းလမ္းကေတာ့ မိမိရဲ့ Blog Template အတြင္း </head> ဆိုတဲ့ကုဒ္ မတိုင္ခင္မွာ ေအာက္ပါကုဒ္ ေလးထည့္သြင္း လိုက္ၾကျခင္းပါပဲ။
ဒါေပမယ့္ အဲဒီ နည္းလမ္းအရ သံုးတဲ့ navbar ကို ေဖ်ာက္ရာမွာ တိက်ေသခ်ာမႈ သိပ္မရွိလွပါဘူး။ တစ္ခါတစ္ေလ လုပ္တဲ့ ေန႔ကေတာ့ အေကာင္းျဖစ္ေပမယ့္ ေနာက္(၂) ရက္ေလာက္အၾကာမွာ navbar ကျပန္ေပၚလာတတ္ တာမ်ိဳးေတြရွိပါတယ္။
ေနာက္ .. ဒီနည္းနဲ႔လည္း navbar ကိုေဖ်ာက္ႏိုင္ပါေသးတယ္။ မိမိဘေလ့ာဂ္ရဲ့ Edit Html စာမ်က္ႏွာကိုသြား ပါ။
အထက္ပါနည္းေလးကေတာ့ မဆိုးလွပါဘူး။အသံုးျပဳသူေတြကို လံုေလာက္တဲ့ ေက်နပ္မႈရေစမွာပါ။
အေကာင္းဆံုးနဲ႔ လက္ရွိကၽြန္ေတာ္သံုးေနတဲ့ နည္းကေတာ့ ေအာက္ပါ နည္းလမ္း ပါပဲ။
၁) သင့္ ဘေလာ့ဂၢါ အေကာင့္ထ္ ကို၀င္ပါ။ Setting ကိုဆက္၀င္ၿပီး ၊ Template tab မွတဆင့္ Edit HTML ကိုဆက္သြားပါ။ အဲဒီကိုေရာက္ၿပီဆိုတာနဲ႔ ေအာက္ပါ ကုဒ္ ကိုေတြ႔ေအာင္ရွာပါ။
၂)ကုဒ္ကိုေတြ႔ၿပီဆိုပါက ၎၏ေနာက္မွ ကုဒ္မ်ားကို ေအာက္ပါအတိုင္း ဆက္ထည့္ေပးပါ။
ဒါဆိုရင္ မေပၚေစခ်င္တဲ့ navbar လံုး၀ ကိုေပၚလာေတာ့မွာ မဟုတ္ပါဘူး။ navbar မေပၚေစခ်င္သူမ်ား မိမိဘေလာ့ဂ္မွာ လက္ေတြ႔စမ္းသပ္ၾကည့္ႏိုင္ပါတယ္။
Read More...
ဒီေနရာမွာ အေရးႀကီးတဲ့ ေမးခြန္းတစ္ခုကေတာ့ အဲဒီလို Navigation Bar ေဖ်ာက္သံုးျခင္းဟာ Google ရဲ့ Terms of Service ေတြ ၊ Privacy Polcy ေတြနဲ႔ညီ မညီဆိုတာပါပဲ။ဒါနဲ႔ပတ္သက္ၿပီး ေလ့လာၾကည့္မိတဲ့ အခ်ိန္မွာ Blogger ရဲ့ TOS စာမ်က္ႏွာ မွာမည္သည့္ ရည္ညႊန္းခ်က္မွ မေတြ႔မိသလို Blogger Support Group ရဲ့ ေဆြးေႏြးခန္း မွာ ဆိုရင္လည္း Navigation Bar နဲ႔ ပတ္သက္တဲ့ ေမးခြန္းတိုင္းကို အၿမဲတေစ ျငင္းပယ္ေလ့ ရွိတာကိုေတြ႔ရပါတယ္။
ဒီျပႆနာကို ရွင္းရွင္းလင္းလင္း သိဖို႔အတြက္ အိႏၵိယ ႏိုင္ငံ ဘန္ဂလိုၿမိဳ႔မွာ ျပဳလုပ္ခဲ့တဲ့ Google ရဲ့ Road Show ျပပြဲအတြင္း Blogger မ်ားမွ navbar Polcy နဲ႔ပတ္သက္တဲ့ အေၾကာင္းအရာမ်ားကို ရွင္းလင္းေျပာၾကားေပးဖို႔ Google ရဲ့တာ၀န္ ရွိသူမ်ားကို ေမးျမန္းခဲ့ၾကပါတယ္။ အဲဒီျပပြဲအတြင္းမွာပဲ Google အမႈေဆာင္အဖြဲ႔( Google's Bangalore office) မွ အေရးေပၚအစည္း အေ၀းေခၚခဲ့ၿပီး navbar ေဖ်ာက္ျခင္းဟာ တရား၀င္(Legal) ျဖစ္ပါေၾကာင္း ေသခ်ာတဲ့ ဆံုးျဖတ္ခ်က္ႏွင့္ ရွင္းရွင္းလင္းလင္းေၾကညာခဲ့ပါတယ္။
ေကာင္းပါၿပီ။ အဲဒီေတာ့ ကၽြန္ေတာ္တို႔ဒီ nvabar ေလးကိုေဖ်ာက္သံုးျခင္းဟာ တရား၀င္ျဖစ္ေၾကာင္း ေသခ်ာသြားပါၿပီ။ ဘယ္လိုေဖ်ာက္မလဲ။ နည္းလမ္းေတြကေတာ့ အမ်ိဳးမ်ိဳးရွိၿပီး၊ အမ်ိဳးမ်ိဳးသံုးၾကပါတယ္။ ဘေလာဂၢါအမ်ားစု သံုးေလ့သံုးထရွိတဲ့ နည္းလမ္းကေတာ့ မိမိရဲ့ Blog Template အတြင္း </head> ဆိုတဲ့ကုဒ္ မတိုင္ခင္မွာ ေအာက္ပါကုဒ္ ေလးထည့္သြင္း လိုက္ၾကျခင္းပါပဲ။
#navbar-iframe {display:block}ဒါေပမယ့္ အဲဒီ နည္းလမ္းအရ သံုးတဲ့ navbar ကို ေဖ်ာက္ရာမွာ တိက်ေသခ်ာမႈ သိပ္မရွိလွပါဘူး။ တစ္ခါတစ္ေလ လုပ္တဲ့ ေန႔ကေတာ့ အေကာင္းျဖစ္ေပမယ့္ ေနာက္(၂) ရက္ေလာက္အၾကာမွာ navbar ကျပန္ေပၚလာတတ္ တာမ်ိဳးေတြရွိပါတယ္။
ေနာက္ .. ဒီနည္းနဲ႔လည္း navbar ကိုေဖ်ာက္ႏိုင္ပါေသးတယ္။ မိမိဘေလ့ာဂ္ရဲ့ Edit Html စာမ်က္ႏွာကိုသြား ပါ။
body { ဆိုတဲ့ ကုဒ္ ကိုေတြ႔ေအာင္ရွာပါ။ ၿပီးတဲ့ေနာက္ ၎ကုဒ္မတိုင္ခင္ ေအာက္ပါကုဒ္ မ်ားကို ျပထားသည့္ အတိုင္း ထည့္ပါ။.Navbar {
display:none;
visibility:hidden
}
body {အထက္ပါနည္းေလးကေတာ့ မဆိုးလွပါဘူး။အသံုးျပဳသူေတြကို လံုေလာက္တဲ့ ေက်နပ္မႈရေစမွာပါ။
အေကာင္းဆံုးနဲ႔ လက္ရွိကၽြန္ေတာ္သံုးေနတဲ့ နည္းကေတာ့ ေအာက္ပါ နည္းလမ္း ပါပဲ။
၁) သင့္ ဘေလာ့ဂၢါ အေကာင့္ထ္ ကို၀င္ပါ။ Setting ကိုဆက္၀င္ၿပီး ၊ Template tab မွတဆင့္ Edit HTML ကိုဆက္သြားပါ။ အဲဒီကိုေရာက္ၿပီဆိုတာနဲ႔ ေအာက္ပါ ကုဒ္ ကိုေတြ႔ေအာင္ရွာပါ။
<body>၂)ကုဒ္ကိုေတြ႔ၿပီဆိုပါက ၎၏ေနာက္မွ ကုဒ္မ်ားကို ေအာက္ပါအတိုင္း ဆက္ထည့္ေပးပါ။
<body>
<style type="'text/css'">
#navbar-iframe {display:none;}
</style>ဒါဆိုရင္ မေပၚေစခ်င္တဲ့ navbar လံုး၀ ကိုေပၚလာေတာ့မွာ မဟုတ္ပါဘူး။ navbar မေပၚေစခ်င္သူမ်ား မိမိဘေလာ့ဂ္မွာ လက္ေတြ႔စမ္းသပ္ၾကည့္ႏိုင္ပါတယ္။
FavIcon လုပ္ၾကမလား?
written by Mhaw Sayar
Contributor: ေမွာ္ဆရာ
FavIcon ဆိုတာရဲ့ ဆိုလိုရင္းကေတာ့ Favourite Icon
ပါ။ သူ႔ကို အသံုးျပဳတဲ့ ေနရာကေတာ့ ၀ဘ္ဘေရာက္ဇာေတြရဲ့ Website Address
ေတြရဲ့ေရွ႔မွာ ၎၀ဘ္ဆိုဒ္ရဲ့ အမွတ္တံဆိပ္အေသးစားအျဖစ္၊ လႈပ္ရွားေနတဲ့
ပံုေတြအျဖစ္လည္းေကာင္း၊ ပံုေသေတြ အျဖစ္လည္းေကာင္း အသံုးျပဳၾကပါတယ္။
ေအာက္ကပံုကိုၾကည့္လိုက္ရင္ FavIcon ဆိုတာ ဘာလဲဆိုတာပိုရွင္းသြားပါလိမ့္မယ္။
အထက္က ပံုကေတာ့ ကၽြန္ေတာ္တို႔ ေရာင္းရင္းႀကီး Blogger.com ရဲ့ Favicon ပဲျဖစ္ပါတယ္။ မ်ားေသာအားျဖင့္ေတာ့ ကိုယ္ပိုင္ Web Hosting ၀ယ္ၿပီး၊ ကိုယ္ပိုင္၀ဘ္ဆိုဒ္ ေရးသားလြတ္တင္ ထားတဲ့သူေတြ အတြက္ Favicon ကိုမိမိကိုယ္တိုင္ ထည့္သြင္းေပးရပါတယ္။ ဒါေပမယ့္ ကၽြန္ေတာ္တို႔ Blogger.com မွာေတာ့ အလိုအေလ်ာက္ပဲ ပါရွိၿပီးသားျဖစ္တဲ့အတြက္ အဲဒီ မူရင္းပါရွိတဲ့ Blogger ရဲ့ Favicon ကို မိမိစိတ္ႀကိဳက္၊ မိမိရဲ့ အမွတ္တံဆိပ္တစ္ခုနဲ႔ အစားထိုးေဆာင္ရြက္ႀကည္႔ၾကပါမယ္။ ဘယ္လိုအစားထိုးၾကမလဲ။ လုပ္နည္းက သိပ္ကိုလြယ္ပါတယ္။ ေအာက္ပါအတိုင္း ေဆာင္ရြက္ပါ။
နည္းလမ္း(၁)
၁)Favicon အျဖစ္အသံုးျပဳရန္ မိမိ စိတ္ႀကိဳက္ ေဆာ့ဖ္၀ဲလ္တစ္ခုကို အသံုးျပဳကာ စိတ္ႀကိဳက္ဒီဇိုင္းတစ္ခုဖန္တီးပါ။ ၿပီးလ်င္ပံုကို .png အမ်ိဳးအစားဖိုင္ အျဖစ္သိမ္းဆည္းပါ။ ဖိုင္ရဲ့ အရြယ္အစားကေတာ့ ၁၆*၁၆ Pixels မွ ၃၂*၃၂ Pixels အတြင္းႀကိဳက္သလို ဖန္တီးလို႔ရပါတယ္။
၂)၎ Icon ကို (Photobucket သို႔မဟုတ္ Googlepage) စသျဖင့္ တစ္ေနရာရာတြင္ Upload လုပ္ပါ။ရလာေသာ လင့္ခ္ကို တစ္ေနရာတြင္ ေကာ္ပီကူးၿပီးမွတ္ထားပါ။
၃)Blogger Dashboard ကို၀င္ေရာက္ၿပီး၊ Template ေအာက္ရွိ Edit HTML တြင္ေအာက္ပါ ကုဒ္မ်ားကို Ctrl+F အကူအညီျဖင့္ ေတြ႔ေအာင္ရွာေဖြပါ။
၄)ေတြ႔ရွိပါက ၎ကုဒ္မ်ား၏ ေအာက္တြင္ ေအာက္ပါကုဒ္မ်ားကို Copy->Paste လုပ္ပါ။
၅)"URL of your icon file" ဆိုေသာေနရာတြင္ မိမိ Favicon ၏လင့္ခ္ကို အစားထိုး ရပါမယ္။
၆)Template ကို Save လုပ္ပါ။ ၿပီးလ်င္ ဘေရာက္ဇာ အသစ္တစ္ခုဖြင့္ၿပီး မိမိ ဘေလာ့ဂ္လိပ္စာကိုရိုက္ထည့္၍ Favicon ေပၚမေပၚၾကည့္ ၾကည့္ပါ။
အကယ္၍ Favicon မေပၚဘူးဆိုလ်င္ မိမိဘေရာက္ဇာရွိ Temporary Internet ဖိုင္မ်ားကို Delete လုပ္ေပးရပါမယ္။
နည္းလမ္း(၂)
အထက္ပါနည္းမွာ ကိုယ္ပိုင္ Favicon တစ္ခုဖန္တီးဖို႔ဆိုတဲ့ အဆင့္အတြက္ အခက္အခဲ ရွိေကာင္းရွိႏိုင္ပါတယ္။ အကယ္၍ ဖန္တီးဖို႔ အခက္အခဲ မရွိခဲ့ဘူး ဆိုရင္လည္း အခ်ိန္ေပးဖို႔အတြက္ စကားေျပာစရာရွိလာပါမယ္။ အဲဒီအတြက္ အခ်ိန္လည္းေပးစရာမလို၊ ကိုယ္တိုင္လည္း ဘာမွဖန္တီးစရာမလိုပဲ အမိုက္စား Animation FavIcon ေတြကို မိမိစိတ္ႀကိဳက္၊ မိမိစက္ထဲမွာရွိတဲ့ ပံုတစ္ပံုေပးလိုက္ရံု နဲ႔ မိမိဘေလာ့ဂ္ (သို႔) ဆိုဒ္ အတြက္ Favicon တစ္ခုကို အျမန္ဆံုးနဲ႔၊ အလကားဖန္တီးေပးတဲ့ ဒီေနရာ ကိုသြားတာ အေကာင္းဆံုးပါပဲ။
(ကၽြန္ေတာ့္ဆိုဒ္မွာ အဲဒီနည္းကိုသံုးထားပါတယ္။)
ပံုအႀကီးၾကည့္ရႈရန္ ပံုေပၚတြင္ကလစ္ေပးပါ။
အဲဒီေနရာကိုေရာက္ရင္ ညီအစ္ကိုေမာင္ႏွမမ်ား ေတြ႔ၾကတဲ့ အတိုင္းပါပဲ။
၁)Browse ထဲမွေန၍ မိမိစိတ္ႀကိဳက္ပံုတစ္ပံု (အရြယ္အစား၊ဖိုင္အမ်ိဳးအစား ကန္႔သတ္ ခ်က္မရွိ) ကိုေရြးပါ။
၂) ၿပီးလ်င္ Scrolling Text ၏ေဘးမွ အကြက္တြင္ မိမိဘေလာ့ဂ္နာမည္၊ သို႔ မိမိစိတ္ႀကိဳက္ မိမိ ေပၚေစခ်င္ေသာ စာသားကိုရိုက္ထည့္ပါ။
၃)ၿပီးလ်င္ Animate Favicon ၏ေဘးရွိ Check Box တြင္ Enable ေပးၿပီး Generate FavIcon.ico ကိုကလစ္လုပ္ပါ။
၄)ေနာက္တစ္မ်က္ႏွာတြင္ Download ႏွင့္ Preview ဆိုၿပီးျပလာမွာျဖစ္ပါတယ္။ မိမိ၏ FavIcon အထုပ္ကို Download လုပ္ပါ။
၅)ေဒါင္းလုဒ္လုပ္လို႔ရလာတဲ့ အထုပ္ဟာ zip file နဲ႔ထုပ္ထားတာျဖစ္တဲ့ အတြက္ အဲဒီအထုပ္ေပၚမွာ Right Click ေပးၿပီး Extract Here လုပ္ပါ။
၆)Extra File ထုပ္ထဲမွ animated_favicon1 ကိုေရြးခ်ယ္ၿပီး အထက္မွာ ေျပာခဲ့တဲ့အတိုင္း မိမိစိတ္ႀကိဳက္ေနရာတစ္ခုမွာ Upload လုပ္ပါ။ရလာတဲ့ လင့္ခ္ကို ေကာ္ပီကူးၿပီးမွတ္သားထားပါ။
၇)ၿပီးလ်င္ အထက္တြင္ရွင္းၿပခဲ့သည့္အတိုင္း "URL of your icon file" ေနရာတြင္မိမိ FavIcon ရဲ့ လင့္ခ္ကိုအစားထိုးထည့္ပါ။
ထိုစာေၾကာင္းရွိ ' type='image/vnd.microsoft.icon' ဆိုေသာေနရာတြင္ ေအာက္ပါကုဒ္ျဖင့္ အစားထိုးပါ။
၈)Template ကို Save လုပ္ၿပီးလ်င္ အားလံုး Ready ျဖစ္ပါၿပီ။ မိမိဘေလာ့ဂ္အား ဘေရာက္ဇာ အသစ္တြင္ဖြင့္ၿပီး ေက်နပ္မႈရယူပါ။
(Blogging ကိုအခုမွ စတင္ထိေတြ႔သူမ်ားအတြက္ ရည္ရြယ္ၿပီး အေသးစိတ္ ေရးသားေပးထားတာ ျဖစ္ပါတယ္။ တစ္ကယ္လုပ္လ်င္(၂)မိနစ္ ေလာက္အတြင္း ၿပီးစီးသြားႏိုင္ပါတယ္ခင္ဗ်ား။)
Read More...
အထက္က ပံုကေတာ့ ကၽြန္ေတာ္တို႔ ေရာင္းရင္းႀကီး Blogger.com ရဲ့ Favicon ပဲျဖစ္ပါတယ္။ မ်ားေသာအားျဖင့္ေတာ့ ကိုယ္ပိုင္ Web Hosting ၀ယ္ၿပီး၊ ကိုယ္ပိုင္၀ဘ္ဆိုဒ္ ေရးသားလြတ္တင္ ထားတဲ့သူေတြ အတြက္ Favicon ကိုမိမိကိုယ္တိုင္ ထည့္သြင္းေပးရပါတယ္။ ဒါေပမယ့္ ကၽြန္ေတာ္တို႔ Blogger.com မွာေတာ့ အလိုအေလ်ာက္ပဲ ပါရွိၿပီးသားျဖစ္တဲ့အတြက္ အဲဒီ မူရင္းပါရွိတဲ့ Blogger ရဲ့ Favicon ကို မိမိစိတ္ႀကိဳက္၊ မိမိရဲ့ အမွတ္တံဆိပ္တစ္ခုနဲ႔ အစားထိုးေဆာင္ရြက္ႀကည္႔ၾကပါမယ္။ ဘယ္လိုအစားထိုးၾကမလဲ။ လုပ္နည္းက သိပ္ကိုလြယ္ပါတယ္။ ေအာက္ပါအတိုင္း ေဆာင္ရြက္ပါ။
နည္းလမ္း(၁)
၁)Favicon အျဖစ္အသံုးျပဳရန္ မိမိ စိတ္ႀကိဳက္ ေဆာ့ဖ္၀ဲလ္တစ္ခုကို အသံုးျပဳကာ စိတ္ႀကိဳက္ဒီဇိုင္းတစ္ခုဖန္တီးပါ။ ၿပီးလ်င္ပံုကို .png အမ်ိဳးအစားဖိုင္ အျဖစ္သိမ္းဆည္းပါ။ ဖိုင္ရဲ့ အရြယ္အစားကေတာ့ ၁၆*၁၆ Pixels မွ ၃၂*၃၂ Pixels အတြင္းႀကိဳက္သလို ဖန္တီးလို႔ရပါတယ္။
၂)၎ Icon ကို (Photobucket သို႔မဟုတ္ Googlepage) စသျဖင့္ တစ္ေနရာရာတြင္ Upload လုပ္ပါ။ရလာေသာ လင့္ခ္ကို တစ္ေနရာတြင္ ေကာ္ပီကူးၿပီးမွတ္ထားပါ။
၃)Blogger Dashboard ကို၀င္ေရာက္ၿပီး၊ Template ေအာက္ရွိ Edit HTML တြင္ေအာက္ပါ ကုဒ္မ်ားကို Ctrl+F အကူအညီျဖင့္ ေတြ႔ေအာင္ရွာေဖြပါ။
<title><data:blog.pagetitle/></title>၄)ေတြ႔ရွိပါက ၎ကုဒ္မ်ား၏ ေအာက္တြင္ ေအာက္ပါကုဒ္မ်ားကို Copy->Paste လုပ္ပါ။
<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>၅)"URL of your icon file" ဆိုေသာေနရာတြင္ မိမိ Favicon ၏လင့္ခ္ကို အစားထိုး ရပါမယ္။
၆)Template ကို Save လုပ္ပါ။ ၿပီးလ်င္ ဘေရာက္ဇာ အသစ္တစ္ခုဖြင့္ၿပီး မိမိ ဘေလာ့ဂ္လိပ္စာကိုရိုက္ထည့္၍ Favicon ေပၚမေပၚၾကည့္ ၾကည့္ပါ။
အကယ္၍ Favicon မေပၚဘူးဆိုလ်င္ မိမိဘေရာက္ဇာရွိ Temporary Internet ဖိုင္မ်ားကို Delete လုပ္ေပးရပါမယ္။
နည္းလမ္း(၂)
အထက္ပါနည္းမွာ ကိုယ္ပိုင္ Favicon တစ္ခုဖန္တီးဖို႔ဆိုတဲ့ အဆင့္အတြက္ အခက္အခဲ ရွိေကာင္းရွိႏိုင္ပါတယ္။ အကယ္၍ ဖန္တီးဖို႔ အခက္အခဲ မရွိခဲ့ဘူး ဆိုရင္လည္း အခ်ိန္ေပးဖို႔အတြက္ စကားေျပာစရာရွိလာပါမယ္။ အဲဒီအတြက္ အခ်ိန္လည္းေပးစရာမလို၊ ကိုယ္တိုင္လည္း ဘာမွဖန္တီးစရာမလိုပဲ အမိုက္စား Animation FavIcon ေတြကို မိမိစိတ္ႀကိဳက္၊ မိမိစက္ထဲမွာရွိတဲ့ ပံုတစ္ပံုေပးလိုက္ရံု နဲ႔ မိမိဘေလာ့ဂ္ (သို႔) ဆိုဒ္ အတြက္ Favicon တစ္ခုကို အျမန္ဆံုးနဲ႔၊ အလကားဖန္တီးေပးတဲ့ ဒီေနရာ ကိုသြားတာ အေကာင္းဆံုးပါပဲ။
(ကၽြန္ေတာ့္ဆိုဒ္မွာ အဲဒီနည္းကိုသံုးထားပါတယ္။)
ပံုအႀကီးၾကည့္ရႈရန္ ပံုေပၚတြင္ကလစ္ေပးပါ။
အဲဒီေနရာကိုေရာက္ရင္ ညီအစ္ကိုေမာင္ႏွမမ်ား ေတြ႔ၾကတဲ့ အတိုင္းပါပဲ။
၁)Browse ထဲမွေန၍ မိမိစိတ္ႀကိဳက္ပံုတစ္ပံု (အရြယ္အစား၊ဖိုင္အမ်ိဳးအစား ကန္႔သတ္ ခ်က္မရွိ) ကိုေရြးပါ။
၂) ၿပီးလ်င္ Scrolling Text ၏ေဘးမွ အကြက္တြင္ မိမိဘေလာ့ဂ္နာမည္၊ သို႔ မိမိစိတ္ႀကိဳက္ မိမိ ေပၚေစခ်င္ေသာ စာသားကိုရိုက္ထည့္ပါ။
၃)ၿပီးလ်င္ Animate Favicon ၏ေဘးရွိ Check Box တြင္ Enable ေပးၿပီး Generate FavIcon.ico ကိုကလစ္လုပ္ပါ။
၄)ေနာက္တစ္မ်က္ႏွာတြင္ Download ႏွင့္ Preview ဆိုၿပီးျပလာမွာျဖစ္ပါတယ္။ မိမိ၏ FavIcon အထုပ္ကို Download လုပ္ပါ။
၅)ေဒါင္းလုဒ္လုပ္လို႔ရလာတဲ့ အထုပ္ဟာ zip file နဲ႔ထုပ္ထားတာျဖစ္တဲ့ အတြက္ အဲဒီအထုပ္ေပၚမွာ Right Click ေပးၿပီး Extract Here လုပ္ပါ။
၆)Extra File ထုပ္ထဲမွ animated_favicon1 ကိုေရြးခ်ယ္ၿပီး အထက္မွာ ေျပာခဲ့တဲ့အတိုင္း မိမိစိတ္ႀကိဳက္ေနရာတစ္ခုမွာ Upload လုပ္ပါ။ရလာတဲ့ လင့္ခ္ကို ေကာ္ပီကူးၿပီးမွတ္သားထားပါ။
၇)ၿပီးလ်င္ အထက္တြင္ရွင္းၿပခဲ့သည့္အတိုင္း "URL of your icon file" ေနရာတြင္မိမိ FavIcon ရဲ့ လင့္ခ္ကိုအစားထိုးထည့္ပါ။
ထိုစာေၾကာင္းရွိ ' type='image/vnd.microsoft.icon' ဆိုေသာေနရာတြင္ ေအာက္ပါကုဒ္ျဖင့္ အစားထိုးပါ။
type='image/gif'၈)Template ကို Save လုပ္ၿပီးလ်င္ အားလံုး Ready ျဖစ္ပါၿပီ။ မိမိဘေလာ့ဂ္အား ဘေရာက္ဇာ အသစ္တြင္ဖြင့္ၿပီး ေက်နပ္မႈရယူပါ။
(Blogging ကိုအခုမွ စတင္ထိေတြ႔သူမ်ားအတြက္ ရည္ရြယ္ၿပီး အေသးစိတ္ ေရးသားေပးထားတာ ျဖစ္ပါတယ္။ တစ္ကယ္လုပ္လ်င္(၂)မိနစ္ ေလာက္အတြင္း ၿပီးစီးသြားႏိုင္ပါတယ္ခင္ဗ်ား။)
No comments:
Post a Comment