Membuat Animasi Label Cloud Berputar

Label dengan gaya seperti ini memang memiliki tampilan yang dinamis sehingga dapat menarik perhatian pengunjung. Sebelum menambahkan Widget HTML ini ada baiknya lakukan backup terlebih dahulu blog Anda.

Langsung ke langkah pembuatan sebagai berikut:

I. Langkah Pertama

1. Login ke Blogger dengan ID anda.


2. Klik Desain


3. Klik tab Edit HTML


4. Backup dulu dengan Download Template Lengkap


5. Kemudian klik button Expand Template Widget dan cari kode yang seperti ini : 

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

6. Copy kode Membuat Animasi Label Cloud Berputar berikut ini setelah kode diatas :
<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/doartic/javascript/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy
Tanck</a> and <a href='http://doartic.blogspot.com'>doArtic ActiveZone</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/doartic/javascript/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>

7.Kemudian Save Template.
8.Buka Halaman Blog Anda

Blogumulus by Roy Tanck and doArtic ActiveZone

Jika dalam membuat label cloud ini tidak berfungsi. Kembali ke Halaman Desain (langkah 2). Kemudian Klik Page Element. Silahkan anda ganti label TEXT menjadi label CLOUD.


Untuk mengedit tampilan

1. Mengubah lebar dan tinggi kolom serta warna background 
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud

2. Merubah warna font, 
so.addVariable("tcolor", "0x333333");

3. Merubah ukuran font
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>");