Minggu, 28 Juni 2009

Blogumus: Flash Animated Label Cloud untuk Blogger


Menanggapi banyaknya permintaan dari pengunjung , akhirnya tutorial ini bisa segera dimuat. Mohon maaf sudah menunggu lama sekali. Sebenarnya Anda bisa menemukan tutorial ini secara bebas di internet. Mungkin karena bahasa Inggris jadi males ya? nah yang saya buat ini versi bahasa Indonesianya.

Bisa dilihat di blog saya, ada label/kategori yang beranimasi bisa berputar-putar. Widget ini sebenarnya dikembangkan Amanda dari salah satu plugin di wordpress karya Roy Tanck WP Cumulus Plugin. Widget ini menggunakan kombinasi JavaScript dan animasi Flash untuk mem-parsing dan menampilkan label blog Anda. Setelah diinstal dalam template Anda, ia harus bekerja "dari kotak" tanpa tambahan tweaker diperlukan, tetapi tentu saja Anda dapat memilih untuk mengubah variabel untuk warna, ukuran dan latar belakang jika sesuai. Anda juga dapat memindahkan widget Blogumus ini melalui Elemen Halaman halaman dashboard jika Anda memilih tampilan dalam tata letak lokasi yang berbeda. Agar Blogumus dapat bekerja dengan baik, Flash dan Javascript harus diinstal dan diaktifkan pada browser Internet.

Bisa dilihat di blog saya, ada label/kategori yang beranimasi bisa berputar-putar. Widget ini sebenarnya dikembangkan Amanda dari salah satu plugin di wordpress karya Roy Tanck WP Cumulus Plugin. Widget ini menggunakan kombinasi JavaScript dan animasi Flash untuk mem-parsing dan menampilkan label blog Anda. Setelah diinstal dalam template Anda, ia harus bekerja "dari kotak" tanpa tambahan tweaker diperlukan, tetapi tentu saja Anda dapat memilih untuk mengubah variabel untuk warna, ukuran dan latar belakang jika sesuai. Anda juga dapat memindahkan widget Blogumus ini melalui Elemen Halaman halaman dashboard jika Anda memilih tampilan dalam tata letak lokasi yang berbeda. Agar Blogumus dapat bekerja dengan baik, Flash dan Javascript harus diinstal dan diaktifkan pada browser Internet.

Cara Menginstal Blogumus di Blogger
  1. Masuk ke Edit HTML dan JANGAN centang Expand Template Widget!
  2. Temukan kode ini dengan menekan kombinasi Ctrl + F!
  3. <b:section class='sidebar' id='sidebar' preferred='yes'>

    atau

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

  4. Salin kode di bawah ini dan paste tepat di bawah kode yang sudah ditemukan pada perintah nomor 1.
  5. <b:widget id='Label13' 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'>
    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
    &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
    &lt;param name="bgcolor" value="#ffffff" /&gt;
    &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
    <b:loop values='data:labels' var='label'>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
    </b:loop>
    &lt;/tags&gt;" /&gt;
    &lt;/object&gt;
    </div>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>

  6. Kemudian simpan.
  7. Lihat hasilnya, buka blog Anda.
  8. NB : KALAU EROOR CODE SCRIPT-nya silahkan copy dari sumbernya>>>

Penjelasan untuk Melakukan Tweaking
Anda bisa mengubah beberapa variabel di atas.
  1. width="250" height="200" ukuran widget ini bisa di atur di angka yang sudah saya cetak tebal
  2. #ffffff merupakan kode warna hexa untuk mengatur warna background.
  3. tcolor=0x000000 merupakan kode hexa namun sedikit berbeda, gunanya untuk mengatur warna teks.
  4. style='12' untuk mengatur ukuran font teks.
Anda bisa menggunakan Add on ColorZilla (khusus untuk browser Mozilla Firefox) untuk menyesuaikan background Blogumus dengan background blog Anda. Dapatkan di sini. Anda juga bisa Mendapatkan Kode Warna Hexa untuk blog Anda dengan mudah.

Wah, kali ini saya menyusun tutorial ini dengan sedikit terburu-buru. Semoga penjelasan singkat saya bisa dipahami. Dengan senang hati saya akan menjawab pertanyaan yang Anda ajukan. Semoga percobaan Anda lancar dan berhasil. Terima kasih telah berkunjung di blog saya.

STOP DREAMING & START ACTION !!! SALAM SUPER
Sumber dari Partner Blog aq gagmwkalah.blogspot.com

4 komentar:

narti mengatakan...

wow keren, boleh dicoba nih....
makasih sharingnya.

syMB4h3_coolk45 mengatakan...

berterimakasihlah pada partner q
karena aq hanya sebagai penyalur
dari karya2 sahabat2 blogger.
SALAM SUPER, STOP DREAMING & ACTION !!!

Unknown mengatakan...

Mantap banget..... Trims untuk tips and triknya.... Kalau bisa ijin untuk diangkat kembali ke blog saya ya....

syMB4h3_coolk45 mengatakan...

buat...itjallcorleone

siips..
silahkan di replay ulang yang penting disertakan Sumber Aslinya.
SALAM SUPER...
TETAP SEMANGAT DALAM BERKARYA & ACTION !!!

tUkeRAn LiNk YUK ?!

Silahkan tambahkan sendiri Link Banner para sobat dengan cara menulis alamat URL site dan alamat URL banner ke dalam kolom di bawah ini. Trims.

Silahkan tambahkan sendiri Link Text para sobat dengan cara menulis nama dan alamat URL site ke dalam kolom di bawah ini. Trims.

SpONsOR