Cara Membuat Label Cloud

Label cloud hamper sama seperti label blog pada umunya bertujuan membuat pengunjung blog tahu tentang isi sebuah blog saat membuka sebuah halaman. Widget ini menggunakan kombinasi JavaScript dan animasi flash untuk mengurai dan menampilkan label blog. Anda masih bisa menyesuaikan warna, ukuran, dan latar belakang widget. 

Untuk melihat bagaimana widget ini bekerja, Anda cukup mengarahkan mouse pada objek label cloud dalam widget ini, dan pada saat yang bersamaan label akan berputar mengikuti arah mouse.

Untuk membuat label cloud sangatlah mudah. Anda cukup menyalin dan menyisipkan kode ke dalam template blogger Anda. Berikut adalah langkah yang diperlukan untuk menginstall label cloud ke dalam template Blogger. 

Langkah 1 :

Dari menu Dashboard masuk ke tab menu Rancangan | Edit HTML | Download Template Lengkap sebagai file XML kemudian simpan ke harddisck Anda. Jika nanti terjadi kesalahan pada saat memodifikasi kode template, Anda cukup mengupload ulang template cadangannya.

Langkah 2 :

Log in blog => Dashboard => Design => Edit HTML => beri tanda centang pada Expand Template Widget, kemudian temukan potongan kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'>

Gunakan  “F3” untuk mempermudah pencarian

Langkah 3 :

Setelah ketemu,sisipkan kode berikut (CTRL + C) tepat di bawah kode <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'>

<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>, <a href='http://tutorial-beta.blogspot.com'>Tutorial Beta</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/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>

Langkah 4 (Pengaturan):

Jika Anda memilih untuk menyesuaikan skema warna, tinggi, dan lebar widget, beberapa bagian kode perlu Anda edit. Variabel untuk mengatur tinggi dan lebar widget bisa Anda temukan pada baris kode berikut:

Lebar default 240px disorot dalam warna merah dan tinggi default 300px disorot dalam warna biru. Nilai-nilai numerik akan menentukan lebar dan tinggi dalam pixel. Ganti nilai tersebut untuk merubah ukuran yang di inginkan.

Untuk mengubah warna background dari putih menjadi warna lain yang sesuai dengan blog Anda, cukup dengan mengubah bagian kode warna hijau. Koda warna bias anda lihat disini

Warna teks secara default diatur ke warna abu-abu. Anda bisa menggantinya dengan warna lain dengan merubah variable warna ungu. Kode warna dapat anda lihat pada halaman kode warna.Secara default ukuran font diatur ke 12px, Anda bisa mengganti nilainya dengan lebih besar atau lebih kecil, dengan cara mengubah nilai warna kuning pada kode di atas.

Langkah 5 :

Langkah terahir simpan template

Semoga berhasil..

Related Post