Dark Colour Dropdown Menu

ဒါေလးကေတာ့ မိမိတို႕ဘေလာ့ လွပေသသပ္ေစတဲ့ Dropdown 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 */ .containerbt {margin: 0 auto;width: 610px;text-align: center;height:300px;} ul.dark_menu { list-style: none;padding: 0; font-family: Arial;font-size: 14px;line-height: 14px;} ul.dark_menu:after {content: "";clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;} ul.dark_menu li {float: left;margin: 0 0 0 10px;position: relative;} ul.dark_menu li:first-child {margin: 0;} ul.dark_menu li a, ul.dark_menu li a:link {color: #FFFFFF;text-decoration: none; display: block;padding: 10px 26px;text-shadow: 0 1px 0 #4b433e; background: #362f2c; background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321));background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); background: linear-gradient(top, #362f2c 0%,#282321 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; -moz-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;} ul.dark_menu li a:hover { color: #73635e; text-shadow: 0 1px 1px #000; background: #282321; background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;} ul.dark_menu li a.selected, ul.dark_menu li a:active { color: #73635e;background: #282321; text-shadow: 0 1px 1px #000; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;} ul.dark_menu li ul {display: none;} ul.dark_menu li ul:before {content: " ";position: absolute;display: block;z-index: 1500;left: 0;top: -10px;height: 10px;width: 100%;} ul.dark_menu li:hover ul { position: absolute;display: block;z-index: 1000;left: 0;top: 44px;padding: 5px 0;list-style: none;background: #282321; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} ul.dark_menu li ul li { float: none;margin: 0 10px;border-bottom: 1px solid #191614;border-top: 1px solid #3a3230;} ul.dark_menu li ul li:first-child { margin: 0 10px; border-top: 0 none;} ul.dark_menu li ul li:last-child { border-bottom: 0 none;} ul.dark_menu li ul li a, ul.dark_menu li ul li a:link { color: #73635e;display: block;background: transparent none;padding: 10px 20px 10px 5px;white-space: nowrap;text-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0); -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;} ul.dark_menu li ul li a:hover {text-decoration: underline;background: #2a2523;}

ျပီးတာနဲ႕ မိမိတို႕ တက္ပလက္ကို save template လု္ပလုိက္ပါ...

ေနာက္တဆင့္အေနနဲ႕  ဆက္လုပ္လိုက္ပါေနာ္...

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<div class="container"> <!-- Dark Menu Begin --> <ul class="dark_menu"><li><a href="#" class="selected">Home</a></li><li> <a href="#">Download</a> <!-- Sub Menu Begin --> <ul><li><a href="#">Menu Link 1</a></li><li><a href="#">Menu Link 2</a></li><li><a href="#">Menu Link 3</a></li><li><a href="#">Menu Link 4</a></li></ul><!-- Sub Menu End --> </li><li> <a href="#">Blog</a> <!-- Sub Menu Begin --> <ul><li><a href="#">Menu Link 1</a></li><li><a href="#">Menu Link 2</a></li><li><a href="#">Menu Link 3</a></li><li><a href="#">Menu Link 4</a></li></ul><!-- Sub Menu End --> </li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul><!-- Dark Menu End --> </div>

အဆင္ေျပၾကမယ္လို႕ ကြ်န္ေတာ္ ေမွ်ာ္လင့္ပါတယ္...
ေခါင္းစဥ္ထည့္ျပီးတာနဲ႕ မိမိတို႕ ေခါင္းစဥ္ေတြကို ပို႕စ္နဲ႕ လင့္ခ်ိတ္ေပးရအုံးးမွာ ျဖစ္ပါတယ္...
အဲအတြက္ လင့္ ခ်ိတ္နည္းကို တင္ျပီးသားျဖစ္ပါတယ္ မသိေသးသူမ်ားအတြက္ ေလ့လာနိဳင္ပါတယ္..

လင့္ခ်ိတ္နည္း (၁)   သည္မွာ  ေလ့လာနိဳင္ပါတယ္...
လင့္ခ်ိတ္နည္း(၂)    သည္မွာ   သြားလိုက္ပါ 

လာေရာက္ေလ့လာၾကတဲ့ မိတ္ေဆြအေပါင္း အဆင္မေျပမွဳေလးေတြ ရွိက ကြန္မက္ေသာ္လည္းေကာင္း
c-box မွေသာ္လည္းေကာင္း  ေျပာခဲ့နိဳင္ပါတယ္...