Membuat Tag Cloud Cumulus pada Template Blogger

Widget tag cloud berbasis flash yang menggunakan konversi script dari Roy Tanck WP Cumulus untuk wordpress atau dalam template blogger lebih dikenal dengan sebutan Blogumus sangatlah bagus untuk mempercantik blog kita. Sebenarnya sudah cukup lama saya ingin memasangnya pada blog saya, namun baru saja saya mendapatkan tutorialnya di Blognya Amanda dan saya putuskan untuk mempostingnya di sini.

Untuk memasang widget ini pada template blogger sangatlah mudah. Anda tinggal mengikuti langkah-langkah berikut:

1. Login kedalam blogger dengan user id anda.

2. Masuk ke Dashboard Layout>Edit HTML dan klik Expand Template Widget

3. Jangan lupa untuk selalu mem-backup template anda sebelum memodifikasinya.

4. Cari kode dibawah ini

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

5. Kemudian copy dan paste kan kode di bawah ini tepat di bawah kode di atas.

<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 ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/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>

6. Simpan template anda. Selesai..

Ketika anda melihat blog anda kembali, secara otomatis tag cloud cumulus ini akan tertampil di sidebar blog anda. Secara default widget ini akan tertampil dengan keterangan sebagai berikut:

• Width = 240px
• Height = 300px
• Background = white
• Warna text = grey
• Ukuran Huruf = 12

Bila anda menginginkan untuk memodifikasinya, maka perhatikan hal berikut:

1. Mengubah ukuran widget

var so = new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Anda tinggal mengganti kedua angka yang diberi warna tersebut. Warna merah untuk lebar, dan warna biru untuk tinggi.

2. Mengubah warna Background

var so = new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Gantilah kode warna sesuai selera anda atau yang sesuai dengan warna template anda. Untuk mengubah background menjadi trasparan, anda tinggal menghapus tanda "//" di depan kode: //so.addParam("wmode", "transparent");.

Bila mode transparan ini aktif, maka kode warna background yang sudah kita pasang di atasnya secara otomatis akan tidak berlaku lagi.

Secara default sengaja Amanda memberikan tanda "//" untuk tidak mengaktifkan mode background transparan dikarenakan mode ini tidak berhasil di beberapa template dan hanya menghasilkan blank widget, seperti yang telah dia jelaskan di sini.

3. Mengubah warna huruf

so.addVariable("tcolor", "0x333333");

Gantilah kode warna sesuai dengan yang anda inginkan

4. Mengubah ukuran huruf terbesar

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>");

Gantilah angka ukuran huruf tersebut sesuai keinginan anda

5. Mengubah kecepatan rotasi

so.addVariable("tspeed", "100");

Misalnya saya menggati angka 100 menjadi 200 maka kecepatan rotasi akan lebih cepat dua kali lipat.

Untuk contoh dapat anda lihat pada sidebar berlabel Kategori. Selamat mencoba..

Disadur dari sini

Posting yang Berhubungan Berdasarkan Kategori: