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 ၾကည္႔ၾကည္႔ပါ.
ကုိရန္ေအာင္ ဆီမွကူးယူထားပါသည္။
