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. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

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

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

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

0 blogger-facebook:

Post a Comment