kp3နည္းပညာ၊၂၅၄၊ဘေလာ့မွာလြယ္ကူတဲ ့KP-3ရဲ ့Horizontal CSS menu ေလးထည့္နည္း

at 11:25 PM

ေနာက္ပိုင္းMenu ေတြကိုဘဲတင္ေတာ့မယ္လို ့စိတ္ကူးတဲ့အခ်ိန္မွာလဲ အီးေမးလ္ကေနဟိုဟာေတာင္းဆိုဒါ ေတာင္းဆိုနဲ ့ဒါေၾကာင့္ဘာမွမတင္လိုက္မိဘူး။ ဒါေပမယ့္ Kp-3 မိသားစုရဲ ့စိတ္တိုင္းက်လုပ္ထားတဲ့ Menu ေတာ္ေတာ္မ်ားမ်ားလည္းတင္ျပီးသားရွိပါတယ္။အခုတင္တဲ့ဟာေလးကေတာ့Horizontal CSS menu လို ့ေခၚ ပါတယ္ေအာက္မွာသြားၾကည့္လို ့ရေအာင္လည္း DEMO လင့္ခ္ေလးေပးထားပါတယ္။ ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအဆင္ျမဲံခ်စ္ခင္ေလးစားလ်ွက္ kp-3မိသားစု

ဒီမွာသြားၾကည့္လိုက္ပါ။

၁။ Layout

၂။Edit HTML

ေအာက္က Code ကိုရွာပါ။

]]></b:skin>

ေတြ ့ျပီဆို၇င္အေပၚမွာေအာက္က Css Code ကိုထည့္ေပးလိုက္ပါ။

#nav
{
    padding:0;
}

#nav li
{
    display:inline;
}

#nav li a
{  
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #333333;
   color:#ffffff;
   border-bottom:1px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
}


#nav li a:hover
{
   background-color:#9B1C26;
   padding-bottom:12px;
   border-bottom:2px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
   margin:-1px;
}

၃။Save Template ေအာက္က Code Layout>>>Add a Gadget>>>HTML/JavaScript Add ထည့္ေပးလိုက္ပါ။

<ul id="nav">
    <li><a href="http://kp3family.blogspot.com#">kp3မိသားစု</a></li>
    <li><a href="http://kp3family.blogspot.com#">ဆက္သြယ္ရန္</a></li>
    <li><a href="http://kp3family.blogspot.com#">နည္းပညာ</a></li>
    <li><a href="http://kp3family.blogspot.com#">သတင္း</a></li>
    <li><a href="http://kp3family.blogspot.com#">သီခ်င္းမ်ား<</a></li>
    <li><a href="http://kp3family.blogspot.com#">အားကစား</a></li>
    <li><a href="http://kp3family.blogspot.com#">အလုပ္အကိုင္</a></li>
</ul>

၄။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။

မွတ္ခ်က္။ ။kp3family ႏွင့္ kp3လင့္ခ္ေတြကိုမိမိရဲ ့လင့္ခ္ေတြနဲ ့အစားထိုးေပးလိုက္ပါ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု