Label မ်ားကို ေဒါင္လိုက္ Menu ပံုစံျဖင့္ ေဖာ္ျပျခင္း

အဆင့္ (၁) ေဒါင္လိုက္ Menu စတိုင္ သက္မွတ္ျခင္း

ေအာက္ပါ Code အား ]]></b:skin> မတိုင္ခင္တြင္ ထည့္သြင္းေပးပါ။

#MyMenu li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em; }

အဆင့္ (၂) ႀကိဳက္ႏွစ္သက္ရာ Menu ပံုစံ ေရြးခ်ယ္သက္မွတ္ျခင္း

အထက္ပါပံုအတိုင္း ေပၚႏိုင္မည့္ Menu ပံုစံျဖင့္ နမူနာျပပါမည္။ *အျခားပံုစံမ်ားအတြက္ Code ကို ေအာက္ေျခတြင္ ၾကည့္ပါ။

#MyMenu {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #3D261D;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #E4D6CD;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;
padding: 8px 0 0 10px; }

အထက္ပါ Code အား အဆင့္ (၁) ရွိ Code ၏ ေအာက္ေျခတြင္ ထည့္သြင္းရပါမည္။ Bold ထားေသာ ဖုိင္ရွိရာ လိပ္စာကို မိမိပံု တင္ထားေသာ လိပ္စာသို႔ ေျပာင္းေပးရမည္။

အဆင့္ (၃) Label Widget အား ျပင္ဆင္ျခင္း

Template ၏ HTML မွ Label Widget ကို ရွာၿပီးရင္ သူ၏ ေနရာတြင္ ေအာက္ပါ Code ျဖင့္ အစားထုိးပါ။

မူလရွိေနမည့္ Code မွာ <b:widget id='Label ျဖင့္ အစျပဳမည္ျဖစ္သည္။

ေျပာင္းလဲ Code မွာ

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='MyMenu'>
<ul>
<li>
<a expr:href='data:blog.homepageUrl'>
<span>Home</span>
</a>
</li>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:label.url'>
<span><data:label.name/></span>
<span dir='ltr'>(<data:label.count/>)</span>
</a>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

ထိုအဆင့္အားလံုး ၿပီးစီးပါက အထက္ပါပံုအတိုင္း ျမင္ေတြ႕ႏိုင္မည္ျဖစ္သည္။

ေအာက္ပါတို႔မွာ အဆင့္ (၂) တြင္ မိမိႀကိဳက္ႏွစ္သက္ရာ ေရြးခ်ယ္ထည့္ႏိုင္ရန္ တင္ျပလိုက္ရပါသည္။

ပံုစံ (၁)


#MyMenu {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #3D261D;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #E4D6CD;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၂)


#MyMenu {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #D8D5D1;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #3688BA;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif);
padding: 8px 0 0 30px; }

#MyMenu li a:hover {
color: #3688BA;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif) 0 -32px;
padding: 8px 0 0 32px; }

ပံုစံ (၃)


#MyMenu {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #8BADCF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #627EB7;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၄)


#MyMenu {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၅)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၆)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၇)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif);
padding: 8px 0 0 30px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif) 0 -32px;
padding: 8px 0 0 30px; }

ပံုစံ (၈)


#MyMenu {
width: 200px;
margin: 10px;
border-style: solid;
border-color: #656556;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #656556;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif);
padding: 8px 0 0 20px; }

#MyMenu li a:hover {
color: #474739;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif) 0 -32px;
padding: 8px 0 0 20px; }

ပံုစံ (၉)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif);
padding: 8px 0 0 35px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif) 0 -32px;
padding: 8px 0 0 35px; }

ပံုစံ (၁၀)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #4D4D4D;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FF9834;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၁၁)


#MyMenu {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #889944;
border-size: 1px;
border-width: 1px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #889944;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif);
padding: 8px 0 0 25px; }

#MyMenu li a:hover {
color: #889944;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif) 0 -32px;
padding: 8px 0 0 27px; }

ပံုစံ (၁၂)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #666;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif);
padding: 10px 0 0 35px; }

#MyMenu li a:hover {
color: #000;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif) 0 -32px;
padding: 10px 0 0 35px; }

ပံုစံ (၁၃)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #C7377D;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #C7377D;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif) 0 -32px;
padding: 8px 0 0 10px; }

ပံုစံ (၁၄)


#MyMenu {
width: 200px;
margin: 10px; }

#MyMenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none; }

#MyMenu li a:link, #MyMenu li a:visited {
color: #333;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif);
padding: 8px 0 0 10px; }

#MyMenu li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif) 0 -32px;
padding: 8px 0 0 10px; }