ဘေလာ့ရဲ႕အလွဆင္တဲ့Lavalamp Menu ေလးေနာ္

   ဘေလာ့ရဲ႕အလွဆင္တဲ့Lavalamp Menu ေလးေနာ္ 

9:49:00 PM  ေအာင္ေအာင္(မကစ)  NO COMMENTS

မိတ္ေဆြတို႕ အတြက္ လာျပီေနာ္  Fancy CSS3 & jQuery Lavalamp Menu  ဆိုတဲ့ စတိုင္းအလန္းစားေလးေတြပါ..မိမိတို႕ဘေလာ့မွာ စိတ္တိုင္းက်  တည္ေဆာက္လို႕ ရပါျပီဗ်ာ...
သိပ္လွတဲ့ Menu ေလးေတြလို႕ေတာ့  လက္ခံၾကမွာပါေနာ္.. စမ္းသတ္ၾကည့္လိုက္ပါ... မိမိရဲ႕
ေဘလာ့ဆိုဒ္ေလး စပါယ္ရွယ္..ဂြမ္းသြားးမယ္...ေိေိ....
လုပ္နည္းနဲ႕တစ္ကြ လိုအ္ပတဲ့ကုဒ္ေတြကို ရွင္းျပထားပါတယ္...

အဆင့္  (၁)   အေနနဲ႕  ၾကည့္လုိက္ပါေနာ္...
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  LAYOUT    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;

}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;

}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;

}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;

}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ END*/

 အဆင့္   (၂)  အေနနဲ႕ ဆက္ၾကည့္ၾကပါေနာ္.... အေပၚကလိုဘဲ  html ထဲမွာေပါ့ေနာ္...
                   </hrad> ဆိုတာေလးကို ထပ္ရွာပါ..ေတြ႕တာနဲ႕ သူ႕ေအာက္မွာ ကပ္ျပီးး ေပးထားတဲ့ ေအာက္ကကုဒ္ကို ထည့္ေပးလိုက္ပါ။

<script src="http://yourjavascript.com/2832232611/CSS3-Mrthangming.js" type="text/javascript"></script>

အဆင့္   (၃)    ကေတာ့ ေနာက္ဆုံးလုပ္ေဆာင္ခ်က္ပါ.... ေသျခာ ၾကည့္ေနာ္..

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

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="http://aungsanmks.blogspot.com/">Home</a></li>
  <li><a href="http://aungsanmks.blogspot.com/">တရားေတာ္</a></li>
  <li><a href="http://aungsanmks.blogspot.com/">ကဗ်ာ</a></li>
  <li><a href="http://aungsanmks.blogspot.com/">ဗဟုသုတ</a></li>
  <li><a href="http://aungsanmks.blogspot.com/">ေဆာင္းပါး</a></li>
  <li><a href="http://aungsanmks.blogspot.com/"> ေဆာ့၀ဲလ္</a></li>
  <li><a href="http://aungsanmks.blogspot.com/">ဘေလာ့ပညာ</a></li>
  <li><<a href="http://aungsanmks.blogspot.com/">က်န္းမာေရး</a></li>
 </ul>
 <div class="floatr"></div>
</div>

မွတ္ခ်က္   ။      ။ http://aungsanmks.blogspot.com/ သည္ေနရာေတြမွာ မိိမိတို႕      ဘေလာ့လင့္ေတြ ထည့္ေပးပါ...
                         <div class="lavalamp dark">   ေနရာမွာ  dark ဆိုတာေနရာကို မိမိတို႕ ႏွစ္သက္ရာ ကာလာ ေျပာင္းေပးနိဳင္ပါတယ္.. ဥပမာ.. red/blue/green စသျဖင့္ေပါ့..
ကဲ လု္ပၾကည့္ပါေနာ္.. တားတား ဗိုက္ခ်ာလို႕ နားအုံးးမယ္..
                 
ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..