Thursday, July 23, 2009

Cara Membuat Tag Cloud (Melayang-layang) di Blogspot

Thursday, July 23, 2009 Cah Pacing No comments

Kemarin malem, pas lagi nyari cara merubah label postingan tiba-tiba saya dihantarkan oleh Mbah Google ke sebuah blog yang membahas cara membuat tag Cloud atau tag yang melayang-layang seperti terlihat sebelah kanan blog saya.

Membuat tag seperti ini memang sebelumnya sudah sempet pengen, cuman ngga tau namanya. Jadinya ngga pernah sengaja nyari, eh kemaren karena ngga sengaja, pas Googling dapet dh nih tutorial.

Tanpa pikir panjang, langsung konsentrasi mengikuti tutorial di blog tersebut. Padahal awalnya ingin merubah label, tapi karena tutorial ini lebih menarik akhirnya langsung aja praktek. Cara membuat tag cloud di blogspot sangat mudah.

Berikut adalah caranya :

Tahap pertama :

- Sign in ke blogspot dengan username dan password anda.

- KLik layout.

- Klik Add gadget kemudian klik label

- Simpan dulu label tersebut di sidebar blog anda.

Tahap kedua :

- Masih di tab layout, Klik edit HTML

- Klik download full template agar ada back up tempalate jika terjadi kesalahan.

- Beri centang pada kotak expand widget tempaltes

- Kemudian cari kode di bawah ini dengan menekan ctrl+F di keyboard anda agar memudahkan pencarian.

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

- Kemudian letakkan kode dibawah ini dibawah kode diatas tadi.

<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>

- Klik Preview

- Lihat tampilan blog anda, apakah sudah berhasil atau belum. Jika belum jangan simpan dulu templatenya, perhatikan kembali langkah-langkah diatas. Mungkin anda salah meletakkan kodenya.

- Jika sudah berhasil jangan simpan terlebih dahulu jika tampilan tag cloud itu tidak sesuai dengan yang anda harapkan

Berikut adalah cara mengedit tag cloud tersebut ( ingat, jangan save dulu templatenya )

- untuk mengubah ukuran tag cluod perhatikan kode dibawah ini

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

- Ubahlah angka 240 dan 300 itu sesuai dengan keinginan anda. Angka 240 menunjukkan lebar, sedangkan angka 300 menunjukkan tinggi tag cloud tersebut.

- Untuk mengubah kecepatan putaran tag perhatikan kode berikut ini

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

- Ubahlah angka 100 tersebut dengan yang anda inginkan, semakin besar angkanya semakin cepat putaran tag cloudnya

- Jika tampilan tag cloud sudah sesuai dengan keinginan anda barulah save template anda.

- Mengapa save template dilakukan paling akhir, karena kode untuk tag cloud itu akan hilang setelah di save, sehingga kalau tampilan tag cloudnya belum sesuai dengan keinginan kita sulit untuk mengeditnya..

- Semoga tutorial ngeblog ini bermanfaat. selamat mencoba. Kalau ada yang belum berhasil bisa menghubungi lewat form komentar.

terima kasih..untuk seorang blogger disana.

Related Post To Reading:

Tentang Blog
Posted in: , ,

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Web Host