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:

  1. Anonim00:32

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

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

    BalasHapus
  3. Anonim17:33

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

    BalasHapus
  4. Anonim08:45

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

    BalasHapus
  5. Anonim21:19

    Menarik juga postingannya...

    BalasHapus
  6. Anonim07:32

    dah tak coba tapi koq jadinya dobel y?

    BalasHapus
  7. Anonim19:39

    weww keren massss

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

    makasie.. makasie... ^o^

    BalasHapus
  9. Anonim22:32

    makasih yach atas tutorialnya

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

    BalasHapus

Mockup Hijab Adobe Photoshop Tutorial - FREE FILE PSD

  Mockup Hijab Adobe Photoshop adalah tutorial tentang bagaimana cara merubah warna hijab maupun coraknya. Jika anda ingin mendownload file ...