Jan 23, 2010

Blogger menu ကုိ Lava Lamp တင္ျခင္း

Lava lamp အေၾကာင္းကုိ အရင္ post မွာ ရွင္းျပီးပါျပီ။ အခု အဲဒီ menu bar ကုိ ဘေလာ့မွာ တင္မွာ ျဖစ္ပါတယ္။ ဒီမွာ အဓိက က(၃)ပုိင္းရွိပါတယ္။ CSS coding ပုိင္းရယ္။ javascript ေၾကညာတဲ့အပုိင္းရယ္၊ body မွာ menu link ေတြထည့္တဲ့အပုိင္းရယ္ပါ။ ေအာက္မွာတဆင့္ခ်င္း ရွင္းသြားပါမယ္။ အရင္ဆံုး lavalamp နမူနာကုိ ေဒါင္းပါ။ ျပီးရင္အဲဒီမွာပါတဲ့ jquery-1.1.3.1.min.js ရယ္၊ jquery.easing.min.js ရယ္၊ jquery.lavalamp.min.js ရယ္ကုိ upload တင္ထားေပးပါ။ ျပီးရင္ demo.html မွာလည္း ခုနက upload တင္ထားတဲ့ javascript ဖုိင္ေတြရ့ဲ link ကုိ အစားထုိးပါမယ္။ ဒီလုိျဖစ္သြားပါမယ္ ။
ျပီးရင္ အဲဒီ html ဖုိင္ထဲက link ေတြျဖည့္ထားတဲ့ javascript ကုတ္ေတြအားလံုးကုိ < /head > ရဲ့ ေရွ႔မွာ ကပ္ထည့္ပါမယ္။ ျပီးရင္ CSS file မွာ lavaLampNoImage နဲ႔ ဆုိင္တဲ့ css code ေတြကုိပဲ ခ်န္ထားပါ။ က်န္တာကုိ delete လုပ္ပါ။ (ရွင္းသြားေအာင္ပါ) ျပီးရင္ အဲဒီမွာ color background စတာေတြ ကုိယ့္ဘေလာ့နဲ႔ လုိက္ေအာင္ျပင္ပါ။ width ကုိလည္း ျပင္ပါ။ အားလံုးျပီးရင္ Blogger ကုိ၀င္ပါမယ္။ လုပ္ထားတဲ့ lavalamp_test.css ထဲက ကုတ္ေတြကုိ ေအာက္က အတုိင္း < /head > ရဲ့ေရွ႕ < /b:skin > TA[ ရဲ့ အတြင္း css ကုတ္ေတြထည့္တဲ့ ေနရာမွာ ထည့္ပါမယ္ ။
ေနာက္ menu link ေတြထည့္တဲ့အပုိင္းကေတာ့...
< ul class="lavaLampNoImage" id="2"> < li>< a href="#"> Home</a></li> < li>< a href="#"> Plant a tree</a></li> < li>< a href="#"> Travel</a></li> < li>< a href="#"> Ride an elephant</a></li></ul>

ဒီကုတ္ေတြမွာ လင့္ေတြကေတာ့ ၾကိဳက္သလုိေျပာင္းႏုိင္ပါတယ္။ ေနာက္ျပီး နာမည္ေတြကုိ လည္းေျပာင္းႏုိင္ပါတယ္။ ထည့္ရမယ့္ေနရာ ကေတာ့ < div id='header' > နဲ႔ < /div > တုိ႔ကုိ ရွာပါ။ ျပီးရင္ အဲဒီေနာက္က ကပ္ထည့္လုိက္ရင္ ရပါျပီ။ ဒီဘေလာ့မွာေတာ့ Template နဲ႔ မကုိက္လုိ႔ မတပ္ေတာ့ပါဘူး။