30 Agustus 2008

Membuat Animasi Flas Label/ Tag Cloud pada Blogger.

Anda ingin membuat animasi flash Label/ Tag Cloud pada blog kesayangan kita ? Tentu bukan ?
Dengan tampilan Animasi Flash pada Label/ Tag Cloud pada blogger kita tentu akan menambah kesan tersendiri.

Coba perhatikan Animasi Label di bagian sidebar... menarik bukan??

Sebenarnya tutorial ini saya dapatkan di sini (Blogger Buster - Amanda ), namun saya mencoba menerjemahkan ke bahasa kita agar nantinya para blogger Indonesia dapat membuatnya dengan mudah. Mari kita coba bersama-sama cara menginstalnya.

1. Kita langsung menuju ke Layout > Edit HTML pada Dasboard Blogger.

2. Cari kode dibawah ini :

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

3. Kemudian copy dan paste kode dibawah ini persis dibawah kode di atas :

<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>

4. Anda bisa memodifikasi pada :

* Width is set to 240px
* Height is set to 300px;
* Background color is white
* Test color is grey
* Font size is "12"

Perhatikan kode berikut ini :

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

Kode di atas adalah tempat untuk merubah nilai Width (merah), Height (biru) dan background (ungu)

Kemudian untuk merubah ukuran text coba perhatikan kode dibawah ini :

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>");

Anda bisa merubah ukuran di bawah 12 atau lebih

Nah selamat mencoba

10 komentar:

jalooe mengatakan...

sip boss..cuman menurut sy.. gadget label-nya jadi mesti di pasang 2 boss..untuk mengantisipasi visitor yg ngga ngeinstall flash player-nya..

frendli mengatakan...

siiip bos... tadi udah pasang tapi rasanya kurang sreg aja ama skin ku jadinya kuapus aja...

ROE mengatakan...

Marhaban yaa Ramadhan

bulan suci Ramadhan 1429 H telah Tiba, Bulan keagungan yang penuh hikmah, berkah, rahmah dan ampunan. Bulan peperangan berat melawan musuh terberat manusia - hawa nafsu.

Semoga kita semua menjadi pemenang dalam peperangan ini. Diterima segala amal ibadah kita dan dihapuskan segala dosa dan kesalahan. Kembali ke fitrah sebagai manusia khalifah di muka bumi.

Saya dan keluarga memohon dibukakan pintu maaf yang sebesar-besarnya atas segala kesalahan dan khilaf, lisan maupun tulisan, disengaja ataupun tidak. Insya Allah kami juga sudah memaafkan segala ganjalan, berat hati dan kesalahan yang dilakukan kepada kami. Mudah-mudahan kita semua melewatkan bulan Ramadhan ini dengan hati bersih, lapang dan ikhlas hanya kepada ALLAH SWT.

Marhaban ya Ramadhan
Selamat menjalankan ibadah puasa Ramadhan 1429 H

-- RoE ---

zul mengatakan...

wah oke. sangat menyenangkan :D
bagaimana kalau buat sendiri?

ComInfo Technology mengatakan...

Menarik juga postingannya...

chiero mengatakan...

dah tak coba tapi koq jadinya dobel y?

ukibatam mengatakan...

weww keren massss

mOmOn mengatakan...

Thanks banget ya...
udah aku pasang di blog aku.. hasil'nya..
MEMUASKAN.... ekekeke...

makasie.. makasie... ^o^

yasin-marine mengatakan...

makasih yach atas tutorialnya

OkeZen mengatakan...

Makasih atas infonya mas, dah dah aku terapkan di blogku yang masih baru ini.
http://okezen.blogspot.com/

Posting Komentar

 
Foto saya
Ketidaktahuan anda adalah kepedulianku untuk selalu memberikan informasi, meski hanya sekedar hilangkan rasa ingin tahu saja.