Cara Membuat Tag Cloud / Label Cloud

K

emarin ada yang nanyain tentang gimana cara membuat tag cloud/label cloud (tag atau label yang berputar-putar itu lho..). Nah bagi Anda yang ingin punya tag cloud seperti yang ada di kategori pada blog saya, silahkan Anda terapkan cara berikut ini, baik cara manual maupun cara otomatis.

Rasanya saya tidak mau basa-basi lagi bagaimana membuat tag cloud atau label cloud, berikut caranya :

a. Cara Manual

[1]. Log in dulu ke blogger.com
[2]. Klik "Rancangan" dan kemudian pilih "Elemen Laman"
[3]. Tambahkan "Gadget" dengan memilih "HTML/Javascript"
[4]. Kemudian copy-paste kode berikut ini :

    <embed allowscriptaccess="always" bgcolor="#ffffff" flashvars="tcolor=669900&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Ujian%20Nasional'style='12'&gt;Ujian Nasional&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Software'style='12'&gt;Software&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Renungan'style='12'&gt;Renungan&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Tokoh%20Matematika'style='12'&gt;Tokoh Matematika&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/Ceritaku'style='12'&gt;Ceritaku&lt;/a&gt;

    &lt;a href='http://hariopamungkas.blogspot.com/search/label/SNMPTN'style='12'&gt;SNMPTN&lt;/a&gt;

    &lt;/tags&gt;" height="200&quot; id="tagcloud" name="tagcloud" quality="high" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" type="application/x-shockwave-flash" width="200&amp;quot;"></embed>

Keterangan :
Warna Biru : Ganti kode warna biru dengan kode link masing-masing label
Warna Merah : Ganti dengan nama masing-masing label
Warna Orange : Ubah ukuran tinggi dan lebar tag cloud sesuai dengan yang Anda inginkan

b. Cara Otomatis

[1]. Login ke dashboard
[2]. Pilih Tata Letak -> Edit HTML
[3]. Carilah kode berikut :

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

Jika menggunakan template blogger designer (template baru) coba cari kode seperti di bawah ini :

<b:section-contents id='sidebar-right-1'>

[4]. Setelah menemukan kode di atas masukkan kode berikut :

<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://sites.google.com/site/bloggerustemplatus/code/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("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
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>

[5]. Simpan Template

Catatan :

Jika di blog tempat memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog. Pilih option Cloud

Jika ingin mengubah warnanya Anda bisa coba ganti beberapa variabelnya
tagcloud", "240", "300", "7", "#ffffff" ->
a. 240 adalah lebar widget , 300 tinggi widget (angka 240 dan 300 bisa Anda ganti sesuai lebar widget Anda agar lebih rapi),
b. #ffffff adalah warna background, warna backgroundnya bisa anda ganti dengan warna lain sesuai background template Anda

Selamat mencoba dan semoga bermanfaat...!!