03 September 2008

Flash Animated Label Cloud

Pertama kali aku nampak 'Flash Animated Label Cloud' kat blog Extremist Thinker. Teringin gak nak pasang kat blog ni... @lapar tapi aku guna blogger je, bukan wordpress yang best tu..huhu.. dan nasib aku baik... tak lama lepas tu aku dah dapat cara untuk letak kat blogger (usha kat sebelah kanan tu). Kebetulan pulak Julia dari MaduGoncangJulia @callme tanya aku mcmana nak buat... hahaha. Aku ni bukan pandai pun nak buat tutorial (malas pun ada gak) so aku pun mintak Kamezaim askar tolong buatkan. Tiba-tiba hari ni sementara tunggu nak berbuka terasa pulak nak buat... kalau korang nak cuba tutorial ni silakan la... aku cuma nak simpan sebagai cenderahati untuk anak cucu nanti je... @ulatbuku


This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :) You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).


Dipendekkan cerita berikut adalah cara-caranya:

[Gunakan CTRL+F dan salin kod yang hendak dicari dan isikan ruangan dlm kotak Find]


1. Pegi ke Layout kedian Edit HTML kat Dashboard, dan cari kod yang kat bawah ni:

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


2. Dah jumpa? Salin kod-kod kat bawah ni betul-betul SELEPAS kod kat atas tu.


<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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Jangan lupa, apa-apa hal preview dulu. Mana tau kot ada silap kat mana-mana ke... Kalau ok je terus Save Template.

4. Ubah digit-digit yang diwarnakan kat atas tu. Yang lain jangan kaco. Contohnya...

Lebar - 240px
Tinggi - 300px
Warna latabelakang - #ffffff (putih)
Saiz tulisan - '12'
Warna tulisan - 333333 (kelabu taik anjing)

5. Dah tukar cuba preview skali lagi...tak puas hati tukar lagi

6. Jangan lupa save!


Kredit: Amanda dari BloggerBuster




Reblog this post [with Zemanta]