သူရဗိုလ္ IT: ဘေလာ့ရဲ႕အလွဆင္တဲ့Lavalamp Menu ေလးေနာ္

သူရ ဆိုက္ေလးသို႔ လာေရာက္ ေလ့လာၾကေသာမိတ္ေဆြ သူငယ္ခ်င္း မ်ားအားလံုး ၾကက္သေရ မဂၤလာ အေပါင္း ႏွင့္ျပည့္စံုၾကပါေစ ........... ကၽြန္ေတာ္ ဘေလာ့ကအခုမွစတင္ ၍ အသစ္တည္ေထာင္ေနဆဲျဖစ္တဲ့အတြက္ ျပင္ဆင္ေနဆဲျဖစ္ပါတယ္ခင္ဗ်ား .... ေက်းဇူးျပဳ၍ သီခံေပးၾကပါရန္ေမတၱာရပ္ခံအပ္ပါသည္ ခင္ဗ်ား.......

Wednesday, March 27, 2013

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

မိတ္ေဆြတို႕ အတြက္ လာျပီေနာ္  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> ဆိုတာေလးကို ထပ္ရွာပါ..ေတြ႕တာနဲ႕ သူ႕ေအာက္မွာ ကပ္ျပီးး ေပးထားတဲ့ ေအာက္ကကုဒ္ကို ထည့္ေပးလိုက္ပါ။