Cara Membuat Tag Cloud Animasi



Beberapa waktu yang lalu Saya mendapat request dari salah satu sobat blogger untuk posting artikel cara membuat tag cloud. Nah pada versi kali ini, saya akan sharing tag cloud ber-animasi.

Apa sih tag cloud itu? Tag cloud atau disebut juga label cloud merupakan daftar semua label yang digunakan untuk menandai suatu artikel. Label/category postingannya berbentuk seperti awan, bentuknya acak. Dari gambar di samping sobat pasti sudah dapat menebak apa itu tag cloud.

Jika sobat tertarik seperti widget di sidebar saya ini, maka ikuti langkah berikut ini:
1. Login ke akun blogger sobat.
2. Masuk ke Rancangan > Edit HTML.
(Sebelumnya lakukan back-up templates untuk berjaga-jaga.)
3. Copy script di bawah ini:
<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://daw-xp.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Codec by <a href='http://daw-xp.blogspot.com/'>DAW-XP</a></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/dawxpblog/home/tagcloud.swf", "tagcloud", "200", "150", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Keterangan:
» Lebar widget : 200px
» Tinggi widget : 150px
» Warna latar (background) : abu gelap atau
#000000
» Warna huruf : putih atau
0xffffff
Sobat bisa mengubahnya sesuai keinginan sobat (lihat kode warna disini)
4. Letakkan script di atas di bawah kode:
<b:section class='sidebar' id='sidebar' preferred='yes'>
(Gunakan Control + F untuk memudahkan pencarian, bisa dengan kata kunci id='sidebar')
5. Simpan templates sobat, dan lihat hasilnya ..
Sobat bisa mengubah letak dari widget tag cloud sobat di elemen laman.

Selamat Mencoba ..

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Cara Membuat Tag Cloud Animasi dan anda bisa menemukan artikel Cara Membuat Tag Cloud Animasi ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-tag-cloud-animasi.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Tag Cloud Animasi ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Tag Cloud Animasi sumbernya.


21 comments

myone1way April 13, 2011 at 3:51 PM

keren bro..langsung praktek langsung jadi...tq

Reply delete
Deny Arya Wiranata April 13, 2011 at 8:13 PM

@myone1way
OK Bro, jangan lupa berkunjung setiap hari. Dapatkan artikel terbaru setiap harinya.

Reply delete

dah saya dah pasang linknya mas, thanks atas kunjungannya..link bisa di liat di "kawan ngeblog...!" ...salam persahabatan.

Reply delete
Deny Arya Wiranata April 13, 2011 at 8:29 PM

@Surya Post
OK sobat. Makasih atas koment dan tukar linknya. Salam Persahabatan !

Reply delete
myone1way April 14, 2011 at 3:17 PM

wah, hari ini g updated postingan nich

Reply delete
Deny Arya Wiranata April 14, 2011 at 4:30 PM

@myone1way
Update kok sob, ada 3 artikel hari ini kiranya yang di update.

Reply delete
Anonymous April 19, 2011 at 7:09 PM

gan kok ana coba tag clud nya g berfungsi gan.,,.kosong tuh hitam gitu g ada tulisannya,.,.ada cara alter

Reply delete
Deny Arya Wiranata April 20, 2011 at 1:38 PM

@Anonim
Sudah saya edit kembali kodenya. Mohon dicoba kembali.

Reply delete
Robertus 'Ngormel' Fabumasse May 14, 2011 at 10:34 PM

makasih gan... numpang sedot ya,, ntr sumber ane tancap... ^_^

Reply delete
Robertus 'Ngormel' Fabumasse May 15, 2011 at 12:49 AM

siiipp nice post...

Reply delete
Deny Arya Wiranata May 15, 2011 at 6:21 AM

@Robertus 'Ngormel' Fabumasse : OK, silahkan mas. Makasih dah berkunjung :D

Reply delete
aluwy chelung May 26, 2011 at 12:56 PM

sob tapi punyaku ngga ada gmna nie???? bisa ngga??? di tunggu di www.campurans.co.cc

Reply delete
Deny Arya Wiranata May 26, 2011 at 1:15 PM

@aluwy chelung : Maksudnya nda bisa gimana? Ada gambar errornya ga? Gimana ga keliatannya gitu. :)

Reply delete
Dewantara June 21, 2011 at 9:15 PM

gan kenapa cuma item doang yang keluar???

Reply delete
saryadinilan July 13, 2011 at 8:25 AM

jadi mau coba aah,moga-moga bisa maklum gaptek,,salam love,peace and gaul,

Reply delete
Deny Arya Wiranata July 13, 2011 at 12:25 PM

@Dewantara : maksudnya item kayak gimana sob?

@saryadinilan : ok sob, silahkan dicoba. Salam love, peace dan gaul juga. :)

Reply delete
Maulana Yusuf September 2, 2011 at 11:02 PM

Thx bgt nie.. !

Reply delete
toraja homeland December 16, 2011 at 5:35 PM

thanks for ur share

Reply delete
Rizal Diantoro January 20, 2013 at 9:46 AM

Wah ini blognya keren punya. Semua yang saya cari ada disini nih. Thanks master

Reply delete
Nadhif Aw October 2, 2013 at 3:29 PM

Tq Gan..Mansabbb Gan..

Reply delete
hezty tatawarna December 24, 2013 at 10:10 AM

keren , numpang copas script nya , hehe

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors