Tags Cloud Untuk Blogger

Biasanya untuk label postingan kita dapat langsung menampilkannya di widget yang telah disediakan blogger, tapi ada cara lain untuk menampilkan label yaitu dengan menggunakan Tags Cloud. Tampilannya bisa diliat seperti gambar disamping kiri. Tags Cloud memang sudah banyak dipakai para blogger, tapi berhubung loly kesulitan untuk praktekinnya makanya di post lagi. Tulisan ini didapat dari Roy Tanck dan Amanda Fazani, makasih sebelumnya.. karna sempet binggung juga setelah dipraktekin dari berbagai Triks blog yang ada. Nah sekarang kita mulai Trik nya ya..

1. Login dulu ke Blogger
2. Klik Layout kemudian klik Edit HTML
3. klik tanda expand widget
4. Cari kode dibawah ini (untuk memudahkan tekan ctrl+F dan masukkan kode yang dicari)

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

5. Setelah ditemukan copy kode di bawah ini, dan letakkan persis dibawah kode tadi


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



6. Save Template

Dari hasil tampilan diatas kita dapat mengubah ukuran Font, warna dan mengatur tinggi serta lebarnya. Setting secara default adalah sebagai berikut :

* Tinggi 300px;
* Lebar 240px
* Warna Backgrund : Putih (#FFFFFF)
* Warna teks : abu-abu (#333333)
* Ukuran Font "12

Kita tinggal merubah kode lebar yang '240' dan tinggi yang '300' sesuai dengan keinginan. Begitu juga untuk merubah warna background dan teks, kita tinggal mengganti tulisan #ffffff dan Teks #333333 sesuai warna yang dibutuhkan atau klik disini. Untuk kode 333333 yang perlu diubah kode angkanya saja, tidak perlu menuliskan # . Begitu seterusnya untuk Font tulisan.