Sunday, June 01, 2008

Menu Tab လုပ္နည္းမ်ား - ပုံစံ (၁)

အားလုံးပဲ မဂၤလာပါ ခင္ဗ်ာ. ကၽြန္ေတာ္အလုပ္ေတြမ်ားေနတာရယ္၊ စာေရးဖုိ႔ မုဒ္ေပ်ာက္ေနတာရယ္ေၾကာင္႔ ခုတေလာ စာေရးက်ဲသြားတာ ခြင္႔လႊတ္ပါ.

ဒီတစ္ခါမွ်ေ၀ခ်င္တာကေတာ႔ ဘေလာ႔ဂ္မွာ 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:

ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိျဖည္႔စြက္ ေရးသားထားျခင္းျဖစ္ပါတယ္ ခင္ဗ်ာ....

အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္.

10 comments:

Tea said...

ကိုရန္ေအာင္ေရ.. အခုပဲ စမ္းၾကည့္လိုက္မယ္..
ပထမဦးဆံုး ေက်းဇူးလာတင္သြားသည္။

:)

အားရင္ ပိုစ့္ေတြ မ်ားမ်ားတင္ပါ။
အားေပးလွ်က္။

Tea

Tea said...

ko yan aung,

my template isn't fine with method-1 of last stage.

so, i tried with method-2..

for the early part, i was ok.
I can do "Add a page element" at title bar.

but, when i add the link codes..
they are very big.. and not normal.. fonts are extremely huge... i don't know why..

thx..

အားလံုးကို ေက်ာ္ျဖတ္ရမယ္..... said...

ကိုရန္ေအာင္ခင္ဗ်ား.....

အစ္ကိုေပးထားတဲ့ အတိုင္း လုပ္တာ ျပသနာ ၂
ခု ၾကံဳ ေနလို ့ ....
၁ ။ ပထမေပးတဲ့ link ကို ခ်ိတ္လို ့ မရပါ ၊ ဒုတိယ နဲ ့
တတိယ ကခ်ိတ္လို ့ ရပါတယ္ ။
၂ ။ ဒုတိယ က ေဘးက (Slide Bar) က page elements ေတြက ေအာက္ ကို ေရာက္ သြား တယ္ ခင္ဗ် ။

ျပန္စာေမွ်ာ္လင့္လ်က္ .........
ေလးစားစြာ ျဖင့္
ကိုသားၾကီး

ထြဋ္ေခါင္ said...

အစ္ကိုေျပာတာ စမ္းတဝါးဝါးနဲ႔ လုပ္ၾကည့္လိုက္တာ အကုန္အဆင္ေျပတယ္ဗ်။ ထည့္လို႔ေတာ့ျပီးသြားေပမယ့္ သိခ်င္တာေလး ရွိေနေသးလို႔အစ္ကို။ menu tab တစ္ခုခ်င္း click လိုက္ရင္ သူနဲ့သက္ဆိုင္တဲ post ေလးေတြေပၚလာေအာင္ ဘယ္လိုဆက္လုပ္ရမေလး အစ္ကို။ menu tab တစ္ခုအတြက္ဘေလာ့အသစ္ထပ္လုပ္ျပီး လင့္ခ်ိတ္ရမလိုျဖစ္ေနလို႔ ဘေလာ့တစ္ခုတည္းမွာပဲ အပိုင္းလိုက္ခြဲလို႔ရ/မရ သိခ်င္လို႔ပါ။

က၇င္ အမ်ိဳးသား မိတ္သဟာယ အဖြဲ. said...

အဆင္မေၿပဘူး...ကၽႊန္ေတာ္ကအ၇မ္းကို နားမလည္ေတာ. လုပ္လိုက္တုိင္း တလြဲၿဖစ္ေနတယ္ ကူညီပါအံုး :please:

Anonymous said...

KO Yan Aung,
I cannot do it.I found what you told but I don't know how should attach adding code.I really need u how can you reply me. my gmail is truemoonrider@gmail.com.I waiting you. I believe you will contact me sooner

ရ.က.သ said...

အကိုေရ..ဘေလာ ့နဲ ့ပတ္သက္တဲ ့နည္းပညာေလးေတြကို freebumar2010@gmail.com ကို၊အကိုအားရင္ေမးပို ့ျပီးမွ်ေ၀ေပးပါဦး။ျပီးေတာ ့ကၽြန္ေတာ္ ့ဘေလာ ့ကိုမေက်ာ္ပဲနဲ ့တိုက္ရိုက္ၾကည္ ့လို ့မရဘူးျဖစ္ေနတယ္။အဲဒါတိုက္ရိုက္ၾကည္ ့လို ့ရေအာင္ co.cc အေကာင္ ့ဖြင္ ့ေတာ ့လဲမွားျပီးႏွစ္ခါဖြင္ ့မိလို ့ free domain မျဖစ္ပဲ 3$ ေတာင္းေနတယ္။အဲဒီမွာလဲ setup လုပ္လို ့မရဘူးျဖစ္ေနတယ္။အကိုအၾကံေပးေပးပါဦး။ညီ ့ရဲ ့ဘေလာ ့က http://yakatha.blogspot.com ပါ။

ကိုေနာ said...

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

8Yar said...

လာလည္ပါတယ္ ခင္ဗ်ာ။ ေကာင္းေသာေန႕ေလးျဖစ္ပါေစ။ ကြၽန္ေတာ္ blog မွာ အစ္ကိုတို႕ blog ကို add ခ်င္လို႕ ဘယ္လို ရလဲဆိုတာေလးေျပာျပေပးပါ ခင္ဗ်ာ။

8Yar said...

အစ္ကိုေရ add လို႕ရသြားပါျပီေက်းဇူးပါခင္ဗ်ာ။