Tuesday, August 25, 2009

Cara membuat Tag Cloud (blogumus)


Postingan kali ini yaitu request dari Afina yang merupakan blogger smala yang merequest via twitter. Dia request bagaimana membuat tag cloud yang melayang seperti pada blog ini.
Baiklah, sesuai dengan permintaan saya akan mengulas bagaimana membuat tag cloud seperti yang ada dalam blog ini. Tag cloud yaitu category yang melayang seperti awan. Pada blog-blog lain tag cloud merupakan label pada umumnya atau sebuah pengelompokan postingan atau entri sesuai dengan kategori seperti My diary, Sekolahku, My contact, Facebook, dll. Dalam blog ini bias anda lihat pada widget Label. Bagaimana cara membuatnya? Saya sendiri sebenarnya juga menemukan dari blogger buster. Selain itu saya juga belajar dari Mas Arif. Berikut cara-caranya:

1. Masuk dengan akun blog kamu.
2. PIlih TATA LETAK.
3. Pilih EDIT HTML
4. Pilih EXPAND TEMPLATE WIDGET.
5. Cari Kode dibawah ini:

Untuk lebih cepat tekan Ctrl+F untuk mencarinya.

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

6. Setelah itu masukkan kode dibawah ini dibawah kode tersebut:

<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://halotemplates.s3.amazonaws.com/wp-cumulus-example/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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Pilih SIMPAN TEMPLATE.

Catatan:

Tag cloud dapat diubah warnanya sesuai dengan keinginan anda. Kode warna dapat dilihat di Potoshop. Di blog ini saya sengajakan berwarna putih karena blog ini mempunyai warna dasar putih.

Selamat mencoba






No comments:

Post a Comment