Jumat, 07 November 2008

Membuat tag cloud

Apa itu tag cloud?. Tag cloud adalah tampilan label dengan flash, cukup cantik...contohnya kamu bisa lihat di tampilan label saya, bagaimana cara membuatnya?...yuk kita lihat


1. Langkah pertama, login ke blogger lalu edit html dan klik centang expand widget.
2. Cari kode dibawah ini

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




3.Kemudian copy dan masukkan kode di bawah tepat dibawah 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://tips-tutorial.blogspot.com/'>Tips-Blogger</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>

Kemudian simpan dan lihat hasilnya, selamat mencoba...


Untuk mengedit tampilan Tag Cloud yang sudah di buat

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

Warna merah adalah lebar dari label
Warna biru adalah tinggi dari label
Warna ungu adalah warna Background dari tabel

Untuk mengedit tampilan huruf pada tabel

Mengubah warna huruf

so.addVariable("tcolor", "0x333333"); Mengubah warna huruf

Gantilah kode warna sesuai dengan yang kamu inginkan

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 kamu



Read this | Baca yang ini



Widget by [ Tips Blogger-Tutorial Blogger Pemula ]

1 comments:

GALIEH AJIE mengatakan...

Makasiy banget niy mas....atas tipsny :)

Posting Komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Untuk menggunakan emotion copy paste kodenya saja, budayakan berkomentar setelah membaca ya .

Note : Harap gunakan nama anda dan jangan menggunakan keyword-keyword tertentu atau komentar anda tidak akan dipublish...