Horizontal Menu and Navigation Bar

Text Link Menu Navigation Bars ျပဳလုပ္ဖုိ႔အတြက္ Minima Template ကုိအေျခခံၿပီး ေဖာ္ျပေပးသြားမွာ ျဖစ္ပါတယ္။ အဆင့္(၄)ဆင့္ေလာက္ေတာ့ လုပ္ရပါလိမ့္မယ္-

1. အရင္ဆံုး ရုိးရွင္းတဲ့ Simple Navigation Bar ျပဳလုပ္ဖုိ႔အတြက္ ေအာက္ေဖာ္ျပပါ CSS code ကုိထည့္ေပး ရပါမယ္-

#newnavbar ul li{
font-size:100%;
font-aling:top;
list-style-type: none;
display:inline;
padding:10px;
margin:0px;
border:0px solid;
}

(က) Dashboard ကုိသြားပါ။ Layout==>Edit HTML ကုိ၀င္ပါ။ ထံုစံအတုိင္း Download Full Template ကုိႏွိပ္ၿပီး Template Backup လုပ္ပါ။ ၿပီးရင္ #header-wrapper (သုိ႔မဟုတ္) #header-wrapp စသျဖင့္ တစ္ခုခုကုိ Find box(Ctrl+F) မွာ ထည့္သြင္း ရွာၾကည့္ပါ။ မိမိ Template အေပၚမူတည္ၿပီး မတူညီႏုိင္တဲ့အတြက္ အနီးစပ္ဆံုးကုိ ရွာၿပီး ေတြ႕ရင္ ၄င္းရဲ႕အေပၚမွာ အထက္ေဖာ္ျပပါ code ကုိထည့္သြင္းေပးလုိက္ပါ။ (က်ေနာ္ အသံုးျပဳထားတာကေတာ့ Minima Template Style ျဖစ္ပါတယ္ သူ႔ကုိဆိုရင္ေတာ့ /*Header*/ ကုိရွာၿပီး သူ႔ရဲ႕ေအာက္မွာထည့္သြင္းေပးလုိက္ရံုပါ။) ၄င္း code အတြင္း အနီေရာင္ျဖင့္ျပထားေသာ တန္ဖုိးမ်ားကုိ မိမိလုိအပ္သလုိခ်ိန္ညွိေပးရပါမယ္။
(ခ) <div id='header-wrapper'> ေအာက္မွာရွိတဲ့ ေအာက္ေဖာ္ျပပါ code ကုိရွာပါ
(<div id='header-wrapp'> လဲျဖစ္ခ်င္ျဖစ္ႏုိင္ပါတယ္ မိမိရဲ႕ Template အေပၚပဲ မူတည္ပါတယ္)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

၄င္း code အတြင္း အနီေရာင္ျဖင့္ ျပထားသည္တုိ႔ကုိ ေအာက္ပါအတုိင္းေျပာင္းေပးလုိက္ပါ-

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

maxwidgets value ကုိ မိမိအသံုးျပဳခ်င္သေလာက္ထည့္ေပးႏုိင္ပါတယ္။ေအာက္ပါ ပံုကုိၾကည့္ပါ-

2. Text color ႏွင့္ mouse over Link တုိ႔အတြက္ကုိေတာ့ ေအာက္ေဖာ္ျပ အျပာေရာင္ျဖင့္ ျပထားေသာ code တုိ႔ကုိအပုိဒ္(၁)ပါအတုိင္းျပဳလုပ္ခဲ့ၿပီးေသာ CSS code ေအာက္တြင္ ထပ္မံ ထည့္သြင္းေပးလုိက္ရံုပါ-

#newnavbar ul li{
font-size:85%;
list-style-type: none;
display:inline;
padding:5px;
margin:0px;
border:1px solid;
}
#newnavbar li a{
color:#4CC417;
}
#newnavbar li a:visited {
color: #57E964;
}
#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}

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

3. ဒီအဆင့္ထိၿပီးၿပီဆုိရင္ေတာ့ Dashboard ကုိသြားပါ။ Layout==>Page Elements ကုိသြားပါ။ Add a Gadget ထဲ၀င္ၿပီး HTML/JavaScript ထဲ၀င္ပါ။ ေအာက္ေဖာ္ျပပါ code ကုိ ထည့္သြင္းၿပီး Save ေပးလုိက္ပါ။ အနီေရာင္ျဖင့္ ျပထားေသာ ေနရာတုိ႔တြင္ မိမိ Link ေပးျခင္းေသာ URL ကုိ ထည့္သြင္းေပးရပါမယ္။

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page">Home</a></li>
<li><a href="URL of Music page">Music</a></li>
<li><a href="URL of Books page">Books</a></li>
<li><a href="URL of Links page">Hot Links</a></li>
<li><a href="URL of Profile page">About Me</a></li>
<li><a href="mailto:EMAIL ADDRESS">Contact</a></li>
</ul></div>

4.ေနာက္ဆံုးအဆင့္အေနနဲ႔ ယခုလုိ header wrapper ကုိ align just ျပဳလုပ္ေပးရန္အတြက္ ေအာက္ေဖာ္ျပပါ code ကုိရွာပါ။ showaddelement value ကုိ no ေနရာတြင္ yes ဟု ေျပာင္း ရုိက္ေပး လုိက္ပါ၊ align center ျဖစ္သြားပါမယ္-

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Template ကုိ Save လုိက္ပါၿပီးပါၿပီ။



အဆင္ေျပပါေစ။