Menu Tabs hpe gara hku galaw na.

Website ni, Blog ni yawng ngu na daram, Menu Tabs ni hpe bang da ai mu lu ai. N-dai KC Bloggers Helpdesk hta mung, Simple Menu Tabs bang ai hpe, Ta Tut hku n-na sang lang dan ngut sai hpe mu lu ai. N-dai zawn contribute galaw ya ai, Ta Tut hpe ma grai chyeju dum ai hku re. Madu chye ai hpaji ni, machye machyang ni hpe, n-dai blog kaw garan gachyan mayu ai nga jang, kcbloggershelpdesk@gmail.com de' shana wa marit.. Blog hpaji sha n-rai, chye machye hpaji yawng hpe garan gachyan na matu, Hkap Tau la ga ai. :)

Ok.. N-dai kalang gaw, Menu Tabs hpe loi shatsawm la yu ga deng..Ya galaw na, Menu Tabs a hkrang gaw n-pu kaw madun da ai hku re.

Step By Step gau ngwi hti n-na galaw ga, myit n-tin ga. Hpa na ta nga yang, HTML gaw, kachyi mi sha, byen shut yang mung n-mai ai majaw re. Ok hpang saga.

1. Menu Tabs tawn da na shara hpe shawng galaw ga. Blogger kaw Menu Tabs ni hpe, law malawng gaw, Blog Header hte Blog Post a lapran e` tawn ai hku re. Blog Header hte Blog Post a lapran e` tawn na matu, Blog Header hte Blog Post a lapran e, Add A Page Element widget hpe shawng bang la ra na re. Dai hpe bang la na matu, madu a Layout n-pu kaw na, Edit Html Section kaw dip let, n-pu na code hpe mu hkra tam ga. Code ni hpe tam ai shaloi Ctrl + F hpe dip let tam yang grau loi ai hku re. Ctrl + F hte, tam n-mu jang, Scroll down galaw di tam ga. Code gaw,

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

Lahta na code hpe mu sai nga jang, showaddelement='no' nga ai hpe showaddelement='yes' ngu byen la ga. Dai hku byen ngut jang gaw Layout n-pu kaw, n-pu na sumla kaw zawn, Blog header hte, Blog Post a lapran kaw, Add A Page Element jat wa ai hpe mu lu na re.

2. Ngut sai nga jang, Edit HTML n-pu kaw sha, ]]></b:skin> nga ai code hpe bai mu hkra tam ga, (Ctrl + F) hpe dip let tam ga. Mu sai nga jang, N-pu na code ni hpe copy galaw n-htawm, dai ]]></b:skin> nga ai a, lahta kaw paste galaw dat ga.

<script type="text/javascript" src="http://kcbloggershelpdesk.googlepages.com/MenuTabsJS.js"></script>
<style>
#MainMenu
{
height:37px;
background:#FFFFFF url(http://kcbloggershelpdesk.googlepages.com/bmid_104.gif);
margin:0;
border:0;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:#000000 url(http://kcbloggershelpdesk.googlepages.com/bright_104.gif) no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}
#tab a span
{
display:block;
background:url(http://kcbloggershelpdesk.googlepages.com/bleft_104.gif) no-repeat left top;
padding:0 25px 0 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:37px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#FFFFFF;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0 solid ;
background: #FFFFFF url(http://kcbloggershelpdesk.googlepages.com/bmid_104.gif);
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0;
padding:0;
display:block;
border:0 solid ;
color:#FFFFFF;
background:url(http://kcbloggershelpdesk.googlepages.com/bleft_104.gif) no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:37px;
background:url(http://kcbloggershelpdesk.googlepages.com/bright_104.gif) no-repeat right top;
padding:0 25px 0 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0 solid ;
background-position:left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#FFFFFF;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#FFFFFF;
font-weight:bold;
}

3. Ngut jang, template hpe save galaw ga. Layout de' bai wa n-htawm, Blog Header hte' Blog Post a lapran kaw na, mi yet bang dat ai Add A Page Element widget hpe dip let, dai kaw na, HTML/JAVASCRIPT nga ai hpe lata ngut jang, pru wa ai box hta, n-pu na code hpe copy galaw n-htawm, paste galaw ga.

</style>
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="#"><span>Home</span></a></li>
<li><a href="Na A Link"><span>News</span></a></li>
<li><a href="Na A Link"><span>Video</span></a></li>
<li><a href="Na A Link"><span>About</span></a></li>
<li><a href="Na A Link"><span>Contact</span></a></li>
</ul>
</div>
</div>

5. Home, News, Videos, About, Contact nga ai shara kaw, madu na menu tabs mying hte' galai bang la ga. "Na A Link" nga ai kaw, madu na link hpe gayet bang la ga. Menu tabs kaw bang na matu, links hpe la ai shaloi, La ma na, myitsu wa gaw, News nga ai menu tabs a link hpe la mayu ai nga jang, Post n-pu kaw na, Label: News nga ai shara kaw na, News nga ai kaw Right click hpe dip let, Properties kaw News nga ai menu tabs a links hpe la ra na hku re. N-pu kaw sumla hte' madun da ai hku re.

Link hpe lu jang, "Na A Link" nga ai kaw, paste galaw bang la ga.

Ngut jang, save kaw dip dat n-na, madu a blog hpe bai yu dat ai shaloi, tsawm htap la ai, menu tabs hpe, mu lu na hku re. :).. N-chye na kau dat ai ni nga yang, Cbox kaw san da marit. Dang di ai daram mi, chye na hkra bai san lang dan mat wa na re. Ra rawng ai ni nga yang, mara raw dat ya marit.

Awng Dang U Ga,
Hkung Ga Let,
ShanglawtBlog