Rabu, 28 Juli 2010

Cara Membuat Tag Cloud Comulus [Label Berputar] di Blogspot

Sebelumnya saya mohon maaf untuk sahabat saya Astho karena baru hari ini saya baru sempat membuat artikel tentang tutorial blog Cara Membuat Tag Cloud Comulus [Label Berputar] di Blogspot. Dikarenakan beberapa kode script untuk membuatnya sering eror dan tidak ada yang jadi, usut punya usut hal ini terjadi karena permasalah pada file swf nya.

Ok, setelah beberapa lama ini saya mencari kode untuk membuat Tag Cloud Comulus agar bisa terpasang secara baik, akhirnya saya menemukan juga apa yang saya cari, ya semoga saja tutorial untuk membuat Tag Cloud Comulus kali ini bisa jadi, insyaallah, amin :)


Penjelasan umum seputar Tag Cloud Comulus:


Tag Cloud Comulus ini sebenarnya terinspirasi dari flatform blog Wordpress, nah oleh salah dua blogger handal luar negeri yaitu Roy Tanck dan Amanda Fazani akhirnya dibuat juga untuk flatform Blogspotnya.


Jika berbicara fungsi, sebenarnya sama saja ketika kita menggunakan Labels bawaan dari blogspot itu sendiri, tetapi Tag Cloud Comulus ini jelas lebih menarik, tanya kenapa? Dari segi penampilan saja sudah tampil cantik, bisa berputar ketika mouse diarahkan dan memang lebih atraktif.


Ok, langsung saja ke Cara Membuat Tag Cloud Comulus Labels:


1. Login ke akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,

3. Cari kode berikut: <b:section class='sidebar' id='sidebar' preferred='yes'> (harap disesuaikan saja kodenya karena tidak semua templates sama)

4. Lalu copy pastekan kode di bawah ini persis berada di bawah kode tadi,


<b:widget id='Label99' locked='false' title='Tag Cloud Comulus 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;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>

5. Sebelum di save harap dipreview terlebih dahulu, jika sudah terlihat tag cloud comulusnya baru di save templates.

6. Untuk merubah tinggi dan lebar ubah tulisan yang berwarna merah, untuk merubah warna background ubah tulisan yang berwarna hijau, untuk merubah besar kecilny tulisan tag label ubah tulisan yang berwarna biru.


Note: Keberhasilan dari membuat Tag Cloud Comulus bergantung pada templates yang teman-teman gunakan. Untuk demonya saya menggunakan templates default bawaan blogspot (molotovcoketail by Tina Chen).


Lihat demo Tag Cloud Comulus di sini.


NB. Jika kode swf yang saya tandai berwarna pink tidak bisa bekerja secara baik, coba ganti dengan kode swf berikut ini: http://www.swfcabin.com/swf-files/1275932799.swf


Ok, seperti itulah Cara Membuat Tag Cloud Comulus [Label Berputar] di Blogspot, semoga bisa bermanfaat dan selamat mencoba. Salam.


Thanks To: Roy Tanck dan Amanda Fazani

Tidak ada komentar:

Posting Komentar