Cara Membuat Animasi Tag Cloud Blogger

Pada beberapa situs web profesional, ada banyak hal menarik yang menghiasi tampilan situs, salah satunya adanya fasilitas tag clouds atau awan tag bergerak. Sebenarnya tag clouds di blogger juga ada, disediakan default nya oleh google, bisa ditampilkan dalam bentuk cloud atau text, namun tag/label bawaan blogger tidak bisa bergerak seperti yang ada di beberapa web profesional. Tapi gak usah kecewa dan pasrah gitu, walaupun pake blog gratisan kita tetap bisa berkreasi kok bikin tampilan blog kita sekeren mungkin. Caranya dengan membuat coding secara manual.

Dibawah ini adalah tampilan screen-shoot tag cloud yang saya buat untuk blog ini :

Untuk kalian yang ingin membuat tag cloud bergerak seperti yang ada di blog ini, jangan khawatir, saya akan berbagi tips dan triknya. ikuti langkah dan step by step berikut ini:

Pertama, kamu login ke blogger kamu, lalu pilih Rancangan >> edit html lalu centang Expand Template Widget. Setelah itu kamu cari code berikut :

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

Tips: gunakan pencarian dengan menekan control+f atau f3 untuk memcepat dan memudahkan pencarian coding. Jika sudah selesai kita lanjut ke tahap berikut, yaitu: 

Kedua, setelah ketemu code seperti langkah pertama, sekarang coba kamu paste kode berikut dibawah <b:section class='sidebar' id='sidebar' preferred='yes'> :

<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/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;280&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>

Setelah itu jangan lupa save template-nya, jika ada notifikasi yang menunjukkan bahwa blog kamu tidak mengandung widget tertentu, kamu jangan hapus, tapi di keep widget aja, setelah selesai coba refresh dan lihat blog kamu, Jika tidak ada langkah yang salah, akan ada widget baru bernama label. itulah tag cloud bergeraknya.

untuk menyesuaikan ukuran tinggi dan lebarnya, silahkan atur ulang dengan mengganti angka yang saya beri warna merah. Silahkan dicoba, semoga berhasil, dan selamat belajar ^.^