♫♪၀ါသနာတူMember ၀င္ထားၾကတဲ့ မိတ္ေဆြမ်ား♪♫

2/12/2013

CSS3 and jQuery Lavalamp Menu Widget ထည့္နည္း



ကဲ ဒီတစ္ခါ ကၽြန္ေတာ္တုိ႔ CSS3 and jQuery ကုိသံုးျပီး Lavalamp Menu Widget ထည့္နည္းကုိ
ေျပာျပမွာ ျဖစ္ပါတယ္။ဒီ Menu Widget ကုိ Indesign နဲ႔ Design ဆြဲထားတာ ျဖစ္ပါတယ္။
ကဲ Blogger အတြက္ Blog မွာဘယ္လုိထည့္ရ
လည္းဆုိတာကုိၾကည့္ရေအာင္။









အေရးအၾကီးဆံုး သင့္ရဲ႕ Blog ကုိ Backup လုပ္ထားပါတယ္။


အရင္ဆံုး Dashboard ကုိသြားပါ။More Option Drop Down Menu ကေန template ကုိသြားပါ။
ျပီးရင္ Edit HTML ကုိႏွိပ္ပါ။ျပီးရင္ ေအာက္မွာ ေပးထားတဲ့ Code ကုိ Ctrl + F ကုိႏွိပ္ျပီး ရွာေပးပါ။


</head>

ျပီးရင္ ေအာက္မွာ ေပးထားတဲ့ Code ေတြကုိ </head> ရဲ႕အေပၚမွာ Copy/Paste လုပ္ေပးပါ။

/*http://www.helperblogger.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;

}
ျပီးရင္ Save Template ကုိႏွိပ္ပါ။
Menu ကုိထည့္ေတာ့မယ္။
Page Layout ကုိသြားပါ။Add a gadget ကုိႏွိပ္ျပီး HTML/JavaScript ရွာျပီး ႏွိပ္ပါ။ေအာက္မွာေပးထားတဲ့
HTML/JavaScript Code ေတြကုိထည့္ေပးပါ။

<div>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contacts</a></li>

<li><a href="#">Back to Article</a></li>

<li><<a href="#">How it Works?</a></li>

</ul>

<div></div>

</div>

# ေနရာ မွာ Link ေတြထည့္ႏုိင္ျပီး ခရမ္းေနရာေတြမွာ သင္ၾကဳိက္တဲ့ နာမည္ေတြ ထည့္ႏိုင္ပါတယ္။
Menu Bar BackGround color ေျပာင္းဖုိ႔ <div class=”lavalamp dark”> ေနရာမွာ ေအာက္မွာေပးထားတဲ့ ဟာေတြနဲ႕ အစားထုိးျပီးေျပာင္းႏုိင္ပါတယ္။
<div class=”lavalamp magenta”>
<div class=”lavalamp cyan”>
<div class=”lavalamp yellow”>
<div class=”lavalamp orange”>
<div class=”lavalamp dark”>

Post ေရးသားသူ - ဟန္ျဖိဳးေက်ာ္

အားလံုးအဆင္ေျပၾကပါေစ။

0 comments:

Post a Comment

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္. ♪♫#*♥winaung♥*#♫♪...၏

ဆိုဒ္ေလးမွေႏြးေထြးစြာၾကိဳဆိုပါ၏..သည္ဆိုဒ္ေလးစတင္သည္ခုႏုစ္

(03/october/2012)မွသည္ဆိုဒ္ေလးသည္နည္းပညာမ်ား

ဆာ႕၀ဲလ္းမ်ားေလ႕လာရွာေဖြရင္းစတင္စုေဆာင္ထာသည္ဆိုဒ္ေလးၿဖစ္ပါသည္..

ကၽြန္ေတာ္လိုခ်င္တဲ႕ခ်ိန္မွာရွာရတာလြယ္ကူေအာင္.သည္ေနရာေလးမွာစုထာခ်င္းၿဖစ္ပါသည္...

မိတ္ေဆြမ်ားလဲလိုခ်င္တာမ်ားခြင္႕ေတာင္းစရာမလိုယူသြားႏိုင္ပါသည္ .....ရႊင္လန္းခ်မ္းေၿမ႕ပါေစ..

မိမိဘေလာ့ကို submit မွန္မွန္ လုပ္ေပးျခင္းျဖင့္ မိမိဘေလာ့ ျမန္ဆန္မည္ရွင္းလင္းမည္ ေမာက္တင္ျပီး က်လာတဲ့ေဘာက္ထဲမွာ မိမိဘေလာ့လိပ္စာ ထည့္ကာ Submit ကလစ္လိုက္ပါ ဒါဆို ေနာက္ဇယားတစ္ခုမွ သင့္အီးေမးကို ထည့္ျပီးSubmit လုပ္လိုက္ပါ

<<<အထူးဧည့္ သည္ေတာ္မ်ား>>> Flag Counter

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites