Multi Color Advanced Css3 Menu

ကဲမိတ္ေဆြတို႕ သေဘာၾက ႏွစ္သက္မယ္လို႕ ေမွ်ာ္လင့္ရင္း  menu လွလွေလးတခု ေတြ႕တာနဲ႕
ျပန္လည္ မွ်ေ၀လုိက္ပါတယ္ေနာ္.. လုပ္နည္းနဲ႕ ကုဒ္ေတြကို ေအာက္မွာ ေသျခာ ေလ့လာ လိုက္ပါ..

►1-  Blogger Singin ၀င္လိုက္ပါ။

►2-  Dashboard  ကိုသြားလိုက္ပါ။

►3-  Template    ကိုကလစ္ပါ..။

►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။

►5-  Expand  Widget  Template  ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။

►6-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

   ]]></b:skin> ကုဒ္ကိုရွာလုိက္ပါ ေတြ႕တာနဲ႕ သူ႕အေပၚကပ္လ်က္ ေပးထားတဲ့ ေအာက္ကကုဒ္ေတြကို ထည့္ေပးလုိက္ပါ

/* The CSS Code for the menu starts here bloggertrix.com */ .cbdb-menu li { display: block; float: left; line-height: 35px; list-style:none; margin: 0 5px;} .cbdb-menu li a { /* This generators the gradient on top of the solid color */ background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(255,255,255,.5)), color-stop(1, rgba(0,0,0,.1)) ); background-image: -moz-linear-gradient( center top, rgba(255,255,255,.5) 0%, rgba(0,0,0,.1) 100% ); color: #f4f4f4; /* IE */ color: rgba(255, 255, 255, 0.8); display: block; font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif; outline:none; padding: 5px 15px; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); } .cbdb-menu li a:active { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0,rgba(255,255,255,.5)), color-stop(.1,rgba(255,255,255,.2)), color-stop(.85, rgba(0,0,0,.2)), color-stop(100, rgba(0,0,0,.4)) ); background-image: -moz-linear-gradient( center bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 10%, rgba(0,0,0,.2) 85%, rgba(0,0,0,.4) 100% ); } /* Dark Text */ .cbdb-menu li a.dark { color: #333; /* IE */ color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);

save template လုပ္ေပးလိုက္ပါေနာ္... ေနာက္တဆင့္ ထပ္လုပ္လိုက္ပါ... ေအာက္မွာ
   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို

   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့

   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ

   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ

   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

မွတ္ခ်က္  ။    ။ ပုံစံ ႏွစ္မ်ိဳး ေပးးထားပါတယ္ ၾကိဳက္တဲ့ ပုံစံရဲ႕ ကုဒ္ကို သုံးလိုက္ပါ။

 ဒါေလးေကတာ့   Light menu  အတြက္ ကုဒ္ေလးေတြ နဲ႕ ပုံစံပါ ..

<ul class="cbdb-menu">

  <li><a href="#" class="red">Home</a> </li>
  <li><a href="#" class="green">Download</a></li>
  <li><a href="#" class="yellow">Design</a></li>
  <li><a href="#" class="cyan">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue">Contact Us</a></li>

</ul>

ဒါေလးကေတာ့  Dark menu  စတိုင္ေလးနဲ႕  ကုဒ္ေတြပါ ...

<ul class="cbdb-menu">
  <li><a href="#" class="red dark">Home</a> </li>
  <li><a href="#" class="green dark">Download</a></li>
  <li><a href="#" class="yellow dark">Design</a></li>
  <li><a href="#" class="cyan dark">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue dark">Contact US</a></li>
  </li>
</ul>

မိမိတို႕ စိတ္ၾကိဳက္ ပုံစံကို ထည့္ျုပီးတာနဲ႕  save ေပးနိဳင္ပါျပီ