မိတ္ေဆြတို႕ အတြက္ လာျပီေနာ္ 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 {
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;
}
အဆင့္ (၂) အေနနဲ႕ ဆက္ၾကည့္ၾကပါေနာ္.... အေပၚကလိုဘဲ 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://mighttilay.blogspot.com/">Home</a></li>
<li><a href="http://mighttilay.blogspot.com/">တရားေတာ္</a></li>
<li><a href="http://mighttilay.blogspot.com/">ကဗ်ာ</a></li>
<li><a href="http://mighttilay.blogspot.com/">ဗဟုသုတ</a></li>
<li><a href="http://mighttilay.blogspot.com/">ေဆာင္းပါး</a></li>
<li><a href="http://mighttilay.blogspot.com/"> ေဆာ့၀ဲလ္</a></li>
<li><a href="http://mighttilay.blogspot.com/">ဘေလာ့ပညာ</a></li>
<li><<a href="http://mighttilay.blogspot.com/">က်န္းမာေရး</a></li>
</ul>
<div class="floatr"></div>
</div>
မွတ္ခ်က္ ။ ။http://mighttilay.blogspot.com/ သည္ေနရာေတြမွာ မိိမိတို႕ ဘေလာ့လင့္ေတြ ထည့္ေပးပါ...
<div class="lavalampdark"> ေနရာမွာ dark ဆိုတာေနရာကို မိမိတို႕ ႏွစ္သက္ရာ ကာလာ ေျပာင္းေပးနိဳင္ပါတယ္.. ဥပမာ.. red/blue/green စသျဖင့္ေပါ့..
ကဲ လု္ပၾကည့္ပါေနာ္..
စာဖက္သူမ်ားနားမလည္တာရိွရင္ ကြန္မန္းမွာစာခ်န္းေပးခဲ့ပါ တစ္ေန႔ေန႔တစ္ခ်ိန္ခ်ိန္ ကြ်န္ေတာ္လူ႔ေလာကၾကီးထဲက နွုတ္ဆက္ထြက္ခြာသြားခဲ့တဲ့အခါ ကြ်န္ေတာ္တို႔ရဲ႕ပညာေလးေတြဟာ အျမဲက်န္ရိွေနေစခ်င္ေသာစိတ္ျဖင့္ နည္းပညာေလးေတြမွ်ေ၀ေပးရင္း အားလံုးပဲ စိတ္ဆင္းရဲျခင္းကင္းေ၀းၾကပါေစဗ်ာ။ ေအာင္ဟိန္း (အေျခခံနည္းပညာ)
