kp3နည္းပညာ၊၂၅၁၊ဘေလာ့မွာ KP-3 ရဲ႕ Horizontal Menu အသစ္ေလးသံုးခ်င္၇င္

အခုတင္တဲ့ Post ေလးကကေတာ့ဘေလာ့မွာ Horizontal Menu ကိုသံုးခ်င္တဲ့မိတ္ေဆြေတြအတြက္ပါ။ ဘေလာ့ႏွင့္၀က္ဆိုက္ဒ္တခုလံုးျပည့္စံုလွပေစေအာင္ Mune ကလည္းတကယ့္ကိုအေရးၾကီးဆံုးနဲ႕အဓိက လို႕ေျပာလို႕ရပါတယ္။ဒါေၾကာင့္အခုေနာက္ပိုင္းရတဲ့အခ်ိန္ေလးေတြမွာ Menu ပိုင္းေတြကိုဘဲတင္ျဖစ္ဖို႕ မ်ားမယ္ထင္ပါတယ္။သြားၾကည့္လို႕ရေအာင္ DEMO လင့္ခ္ေပးထားပါတယ္။

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

၁။ Layout

၂။Edit HTML

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

]]></b:skin>

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

#painters2 {
  padding:0;
  margin:0;
  list-style-type:none; 
  }
#painters2 li {
  width:75px; 
  height:20px; 
  float:left;
  border:1px solid #000;
  margin-right:2px;
  }
#painters2 a em {
  font-style:normal; 
  font-size:1em; 
  line-height:1.5em;
  }
#painters2 a {
  text-decoration:none;
  color:#000;
  position:absolute; 
  width:75px; 
  height:20px; 
  display:block;
  text-align:center;
  }
#painters2 a.red {background:#c00; color:#fff;}
#painters2 a.orange {background:#fc0; color:#000;}
#painters2 a.yellow {background:#ee0; color:#000;}
#painters2 a.green {background:#080; color:#fff;}
#painters2 a.blue {background:#00c; color:#fff;}
#painters2 a:hover {
  width:120px; 
  height:28px;
  z-index:200;
  background:transparent url(../ads/opaque.gif);
  }
#painters2 a:hover em {
  font-size:1.5em;
  line-height:1.1em;
  overflow:hidden;
  cursor:pointer;
  background:#fff; 
  border:1px solid #000;
  position:absolute; 
  width:120px; 
  height:25px;
  left:-12px; 
  top:-4px;
  }
#painters2 a:hover.red em {background:#c00;}
#painters2 a:hover.orange em {background:#fc0;}
#painters2 a:hover.yellow em {background:#ee0;}
#painters2 a:hover.green em {background:#080;}
#painters2 a:hover.blue em {background:#00c;}

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

<ul id="painters2">
  <li><a class="red" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="orange" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="yellow" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="green" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
  <li><a class="blue" href="http://kp3family.blogspot.com#nogo"><em>kp3family</em></a></li>
</ul>  

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

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

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

Related Post

Posted in: MENU