ကၽြန္ေတာ္တုိ႔ hyperlink ေတြမွာ Fading Effect ထည့္နည္း
အေၾကာင္းကုိ ေျပာျပမွာ ျဖစ္ပါတယ္။ကဲၾကည့္ရေအာင္။
- ပထမဦး ဆံုးသင့္ရဲ႕ Blog ကုိ Login ၀င္ပါ။
- Drop Down Menu ကေန Template ကုိႏိွပ္ပါ။
- အေရးၾကီးဆုံး သင့္ရဲ႕ Blog ကုိ Backup လုပ္ထားပါ။
- Edit HTML ကုိႏွိပ္ပါ။
- Ctrl + F ကုိႏွိပ္ျပီး </head> ဆုိတဲ့ Tag ကုိရွာပါ။
- ျပီးရင္ </head> မတုိင္ခင္ ေအာက္မွာေပးထားတဲ့ Code ေတြကုိ Copy/Paste လုပ္ေပးပါ။
< script type='text/javascript'> window.onload = function() { var paras = document.getElementById( & #39; content & #39;).getElementsByTagName( & #39; p & #39;); if (paras.length) { paras[0].className = paras[0].className + ' intro & #39;; } }; < /script> <style type='text/css '> #link1 { color:#f00; }#link2 { color:#00f; }#link3 { color:#000; } </style> <script src='http: //ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript' /> <script type='text/javascript'> window.addEvent( & #39;domready&# 39;, function() { $each($( & #39;.fade&# 39;), function(el) { var original = el.getStyle( & #39;color&# 39;); var morph = new Fx.Morph(el, { & #39;duration&# 39;: '300&# 39;, 'link&# 39;: 'cancel&# 39; }); el.addEvents({ & #39;mouseenter&# 39;: function() { morph.start({ & #39;color&# 39;: '# ffffff & #39; }) }, &# 39; mouseleave & #39; : function() { morph.start({ &# 39; color & #39;: original }) } });});}); </script>
- Copy/Paste လုပ္ျပီးသြားရင္ Template ကုိ Save လုပ္ပါ။
<a id="link1" href="javascript:;">Link Fade 1</a> <a id="link2" href="javascript:;">Link Fade 2</a> <a id="link3" href="javascript:;">Link Fade 3</a>
ကဲအ ေပၚမွာေပးထားတဲ့ Code ေတြကုိ ဘာလုပ္ရမွာလဲ?
သင္ Fading လုပ္ခ်င္တဲ့ Link ကုိ link1 ဆုိျပီး နံပါတ္ေတြ တပ္ထားတဲ့ ေနရာေတြမွာ သင့္ရဲ႕ Link ေတြနဲ႔
အစားထုိးရမွာ ျဖစ္ပါတယ္။
ရွင္းရွင္း ေျပာမယ္ဗ်ာ
သင္ Post ေတြေရးတဲ့အခါမွာ Compose နဲ႔ HTML ဆုိျပီး ဘယ္ေထာင့္နားမွာ ရွိတယ္ အဲ့ဒီထဲက HTML
ကုိႏွိပ္ပါ။ျပီးရင္ အေပၚမွာ ေပးထားတဲ့ code သံုးေၾကာင္းထဲက တစ္ေၾကာင္းကုိ Copy ကူ သင္ၾကဳိက္တဲ့
ေနရာမွာ Paste လုပ္ပါ။
ျပီးရင္ အနီးေရာင္ျပထားတဲ့ ေနရာမွာ သင့္ထည့္ခ်င္တဲ့ link ကုိအစားထုိးပါ။
<a id="link1" href="javascript:;">Link Fade 1</a>
No comments:
Post a Comment