Wednesday, March 17, 2010

Blogger မ်ားအတြက္ Flash Animated Label Cloud

ကဲ ကၽြန္ေတာ့္ ရဲ့ ဘေလာ္ဂါ ညီအစ္ကို ေမာင္နွမ အေပါင္းတို႕ ထူးဆန္းလွပတဲ့ ဆိုဒ္ဘား အတြက္ widget ေလးတစ္ခု ေတြ႕မိလို႕ ကိုယ့္ ဘေလာဂ္ဂါ ညီကိုေမာင္နွမ အေပါင္းကို ေဝမွ် လိုက္တာပါ ...။




အရမ္းရိုးရွင္း လြယ္ကူပါတယ္ဗ်ာ ကုဒ္ေလး ေတြကို လိုတဲ့ေနရာမွာ Copy & Paste လုပ္ေပးရံုပါပဲ..။

ကဲ ဒါဆို စလိုက္ၾကရေအာင္....
Blogger dashboard ကေနတဆင့္ Layout>Edit HTML ထဲကို သြားလိုက္ပါ..

ျပီးသြားရင္ ေဟာဒီေအာက္က ကုဒ္ေလးကို ေတြ႕ေအာင္ ရွာလိုက္ပါဗ်ာ...

<b:section class='sidebar' id='sidebar' preferred='yes'>

အိုေက အဲဒီကုဒ္ကို ေတြ႕ၿပီ ဆိုတာနဲ႕ သူ႕ရဲ့ ေအာက္မွာ ဒီကုဒ္ေလး ေတြ ကို Copy & Paste လုပ္ျပီး ျဖည့္ေပး ရံုပါပဲ...

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

ဒါဆိုရင္ ညီကို ေမာင္နွမ အေပါင္းတို႕လဲ ကၽြန္ေတာ့္လိုပဲ အျမင္ဆန္းဆန္း ထူးျခားလွပတဲ့ Tag Cloud Label ေလးတစ္ခုကို ပိုင္ဆိုင္ၿပီေပါ့ ..

ေအာ္ တစ္ခုေတာ့ ရွိတယ္ဗ် သူက Post Label ေတြကို ျမန္မာလို ေပးထားရင္ မျမင္ရတာ ေလး တစ္ခုေတာ့ ခၽြင္းခ်က္ ရွိတယ္ဗ် ကၽြန္ေတာ္လဲ အကုန္ အဂၤလိပ္ လိုေတြ လိုက္ေျပာင္းလိုက္ ရတယ္ mrgreen လိုခ်င္တာကိုးဗ်..။

အဲေနာက္ေတာ့ ေနာက္ခံ ဘက္ဂေရာင္း အေရာင္ေတြ စာလံုးအေရာင္ေတြ ကိုယ္လိုခ်င္သလို ေျပာင္းခ်င္ ရင္ေတာ့ ဒီေအာက္မွာ ျပထားတဲ့ ကုဒ္ေလး ေတြ မွာ ကာလာ ကုဒ္ေတြကို လိုက္ေျပာင္း လိုက္ရံု ပါပဲ..။

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

အနီေရာင္နဲ႕ျပထားတဲ့ ဂဏန္းေတြက ကိုယ္လိုခ်င္တဲ့ ဆိုဒ္ အက်ယ္ နဲ႕ အျမင့္ ပါ အဝါေရာင္နဲက ျပထားတာ ကေတာ့ ေနာက္ခံ ဘက္ဂေရာင္း ကာလာကုဒ္ေပါ့ အဲဒီေနရာေတြမွာ ကိုယ္လို သလို ခ်ိန္ညိွ နိုင္ပါတယ္..

စာလံုး အေရာင္ ေျပာင္းခ်င္ရင္ ဒီကုဒ္ထဲက

so.addVariable("tcolor", "0x333333");

အဝါေရာင္ ျပထားတဲ့ ေနရာမွာ ကိုယ္လိုခ်င္တဲ့ ကာလာကုဒ္ေလး ထည့္လိုက္ေပါ့ဗ်ာ...

စာလံုး အရြယ္ အစား ေျပာင္းခ်င္တယ္ ဆိုရင္ေတာ့ ...

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

အနီေရာင္ျပထားတဲ့ ဂဏန္းေလး ကို လိုသလို ၾကီးေသးလုပ္နိုင္ပါတယ္ ....

ကဲ အားလံုးပဲ widget အသစ္ေလးနဲ႕ ေပ်ာ္ရႊင္ နိုင္ၾကပါေစ ေနာ္....။

No comments:

Post a Comment