Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.
Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.
I. Langkah Pertama
- Login ke Blogger dengan ID sobat.
- Klik Tata Letak
- Klik tab Edit HTML
- Download dahulu template sobat dengan mengklik Download Template Lengkap
- Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
- Copy kode berikut ini setelah kode diatas :
<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("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>
- Kemudian Simpan Template.
II. Langkah Kedua
- Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud
- Merubah warna font, untuk kode warna bisa sobat lihat disini
so.addVariable("tcolor", "0x333333");
- Merubah ukuran font
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>");
Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :
Hanya itu ilmu yang bisa saya bagi-bagi, terima kasih buat roytanck dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Jika ada pertanyaan silahkan isi di kolom komentar.
Terima kasih atas informasi yang hebat ini. =)
BalasHapusmakasih kembali,sama2 you.,.,.,.!!!
BalasHapussudah di coba bro..
BalasHapustapi ga berfungsi bro..
yang terlihat hanya tabel kosong dengan background warna putih.
@ Fakir Online ya bro biasanya itu terjadi karena emang template kita gak bisa menerima widget ini sama seperti Template saya ini.,,.,.,..,.
BalasHapus@Ilham A.M, Thank's Atas kunjungannya.
BalasHapusBtw, kalau mau nyumbang artikel silahkan kirim artikel ke alamat email ini:
utuharusan.infogratisan@blogger.com
Akan otomatis terpublikasi di blog fakir online dan info gratisan.
@ fakir Online boleh lah,..,.,
BalasHapusmas juga bisa kirim eartikel lewat email Admin.ilham@blogger.com
kalau ada waktu saya akan kirim artikel mas maklum sekarang masih ujian ada ulangan nih,..,.,.,..,.,
thankz bro, mampir di tahantoro.blogspot.com
BalasHapusWidget dengan id Label99 tidak berada dalam bagian (element induk aktual adalah: div.) Setiap widget seharunya berada dalam sebuah bagian.
BalasHapus@ TAHANTORO mAKASIH SOB UDAH BERKUNJUNG SAYA KALAU ADA WAKTU AKAN MAMPIR GAN
BalasHapus@ sPESAGRA ITU UDAH ADA css YANG BARU BANG ,.,.,..,..,.,