Rabu, 08 Desember 2010

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.

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.

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.

Download Blogumus: Flash Animated Label Cloud untuk Blogger PDF

Tidak ada komentar:

Posting Komentar