30 July, 2008

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; }

No comments:

Post a Comment