Sabtu, 21 Mei 2011

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

9 komentar:

  1. @ AMUNG HERMANSYAH
    Sipp..
    Silahkan dicoba mas dan semoga artikelya bermanfaat yaa..
    Semangat...!!!

    BalasHapus
  2. mantap mas, oya bisa tidak di kreasiin, mungkin di ubah penampilan textnya, dikasi bingkai, atau di kasi animasi didalamnya seperi bumi atau apalah gitu, biar cocok dgn templatenya...

    BalasHapus
  3. @ Eko Kurniaseputra
    Semestinya sih bisa, mas.. Tapi saya belum mencobanya..
    Mungkin mas bisa ubah "style-font" sesuai yang mas suka, trus kasih border n background gambar animasi dgn format gif, kaayaknya bakal menarik, hehe5..

    BalasHapus
  4. iy mas, maksud saya gimana ya cara meng-edit, kode HTML/javascriptnya? mohon di jawab..

    BalasHapus
  5. @ Eko Kurniaseputra
    Kebetulan animasi tag cloud di atas berupa file SWF/Shockwave flash [ActionScript] bukan kode HTML/JavaScript terbuka yang dapat diedit seperti biasanya, jadi untuk mengeditnya dibutuhkan aplikasi/software edit file SWF, semisal SWF Quicker..

    BalasHapus
  6. waduh... ora ngerti saya mas... haha.. ya wes..lah, kalo boleh saya minta buatin itu mas... saya ora ngerti... oya kunjungi kami mas.. saya punya penampilan baru ni... karna kami terus berbenah seperti mas, oya mas tahu ndak gimana daftar di google adsanse kok susah banget ya.. mohon jawabannya..

    BalasHapus
  7. @ Eko Kurniaseputra
    Hehehe5..
    Saya sudah pernah sekali daftar google adsense tapi ditolak, hihi5.. n akhirnya males mau ngajukan lagi..
    Kalo mas mau tau cara daftar silahkan searching aja di mbah google, banyak kok tutorial ttg google adsense..

    BalasHapus


Facebook Comment Box : "Silahkan berikan komentar Anda mengenai tampilan dan isi blog saya ini untuk membangun blog ini jadi lebih baik lagi . . ."