Trik Membuat Labels Animasi (Tag Cloud)

Pembuatan labels/ tags/ kategori pada blogspot kali ini saya beri nama Labels Animasi. Tampilan labels seperti ini saya peroleh dari mpunya yaitu Roy Tank dan Amanda Fazani.
Seperti kita ketahui untuk pembuatan labels/ tags/ kategori, blogger juga telah menyediakan gadgetnya. Namun dalam hal ini untuk blogger2 kita tidak membahas gadget labels default dari blogger. Tetapi masalah cita rasa dan selera yang berbeda terhadap tampilan blognya bagi para blogger.

Untuk itu saya ingin berbagi sedikit informasi bagi blogger2 yang tertarik dengan pembuatan labels animasi seperti yang saya gunakan (he..he.. tidak ada paksaan).

Pertama seperti biasa login - layout - edit html - expand widget templates, lalu cari kode dibawah ini (untuk mempermudah pencarian tekan Ctrl F, lalu isi kode dibawah ini pada kotak pencarian).

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

Kalau nggak ketemu kode tersebut, coba hilangkan kode perlahan dari bagian akhir.
Kalau sudah ketemu, tinggal copy-paste kode dibawah ini tepat 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>

Selesai sudah, lalu tinggal preview, tag cloud ini muncul pada bagian atas sidebar, ntar tinggal memindahkannya kelokasi yang kamu inginkan. Selanjutnya jika ingin merubah dimensi panjang dan lebar, besar font dan background tinggal cari kode ini pada tag yang dicopas tadi:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Ganti default : 240 (lebar), 300 (tinggi), 7 (ukuran font), dan #ffffff (warna background) dengan selera kamu. Sedangkan warna huruf tinggal cari kebawah dikit lagi yaitu : 333333 juga tinggal ganti jika mau.

Selesai.
Selamat Mencoba.

Related Posts by Categories