မိတ္ေဆြတို႕ အတြက္ လာျပီေနာ္ 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*/
.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> ဆိုတာေလးကို ထပ္ရွာပါ..ေတြ႕တာနဲ႕ သူ႕ေအာက္မွာ ကပ္ျပီးး ေပးထားတဲ့ ေအာက္ကကုဒ္ကို ထည့္ေပးလိုက္ပါ။
အဆင့္ (၃) ကေတာ့ ေနာက္ဆုံးလုပ္ေဆာင္ခ်က္ပါ.... ေသျခာ ၾကည့္ေနာ္..
►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 မွာ ေျပာခဲ့ၾကပါေနာ္..
ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။
လယ္တီေျမသား www.ledimyethar.com
ဘေလာ့ခရီးသည္ http://aungsanmks.blogspot.com/
မွတ္စုစာအုပ္ http://aungsan96.blogspot.com/
ဒီပဲယင္းသားေလး www.depelyin.co.cc
ေဆာ့၀ဲလ္ျမိဳ႕ေတာ္ www. aungkyaw.com
ဓမၼဗိမာန္ http://dhamabimarn.blogspot.com/
