Tag Cloud Animasi

Anda mungkin sudah membaca dan membuat Tag Cloud seperti tutorial disini. Kalau dicermati Tag itu tidak bergerak. Nah kali ini kita akan membuat Tag Cloud yang bergerak seperti bola.

Berikut caranya:

1. Login ke account blogger.
2. Klik Layout --> edit HTML
3. Ada baiknya kamu simpan dulu template kamu kalau nanti ada yang salah dalam mengerjakannya. Silahkan klik download full template untuk memback up template anda.
4. Cari kode ini: <b:section class="sidebar" id="sidebar" preferred="yes">
5. Sudah ketemu?, jika sudah letakan script dibawah ini, dibawah kode tersebut diatas

<b:widget id='Label88' 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> </div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "200", "200", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xD00CD2");
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>

Keterangan:
Angka 200 = Lebar dan tinggi Tag Cloud
#ffffff = Warna Background Tag Cloud. Untuk Melihat Kode warna klik disini
kode D00CD2 = Warna Teks. Untuk melihat kode warna klik disini
Angka 12 = Ukuran Teks
Silahkan diganti sesuai selera kamu.

6. Simpan template

Related Posts