Be Are GO BLOG TETAP NGEBLOG

Saturday, February 25, 2012

Membuat Tag Cloud

    Tag cloud merupakan sebuah kumpulan link berbentuk cloud. Kumpulan link tersebut di ambil dari tag-tag pada saat kita menuliskan sebuah label. Tag cloud ini bentuk nya unik dan menarik. Saat kita meletakkan cursor di atas tag cloud ini, kumpulan link tersebut akan bergeser, berputar dan seakan berebut ingin dipilih.

      Coba sobat letakkan cursor di atas tag cloud ini ;


     Untuk membuat tag cloud seperti di atas, ikuti langkah-langkah berikut ;
1. Log in ke blogger
2. Pilih menu Design/Rancangan --> Edit HTML
3. Beri tanda centang pada Expand Template Widget
4. Cari kode : <b:section class='sidebar' id='sidebar' preferred='yes'> atau sejenis nya
5. Letakkan kode berikut di bawah kode tersebut ;

<b:widget id='Label99' locked='false' title='Tag Cloud Comulus 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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

keterangan ;
* angka 240 dan 300 untuk mengatur ukuran tag cloud
* kode warna ffffff untuk mengganti warna background tag cloud. untuk mengganti dengan warna yg lain, sobat bisa melihat beragam kode warna disini ; Kode Warna
* angka 12 adalah ukuran font

6. Klik Simpan Template untuk melihat perubahan

    Lihat pada bagian Elemen Laman disebelah Edit HTML. Akan muncul sebuah Gadget  baru. Di dalam gadget baru ini kita dapat mengatur tag-tag mana saja yang akan ditampilkan. Atur sesuai dengan keinginan sobat. Caranya ;
1. klik edit pada gadget tersebut



2. Beri judul bebas
3. Klik edit --> untuk memilih tag-tag mana saja yang akan ditampilkan
4. Pilih Alfabetik untuk menyortir sesuai abjad
5. Pilih tag Cloud
6. Beri tanda centan pada Tampilkan jumlah entri per label
7. Klik Simpan

   Pengaturan selesai.. sekarang lihat tampilan baru blog sobat. Apakah ada perubahan ??? di tunggu yach jawabanya.. Semoga Bermanfaat

No comments:

Post a Comment

Please Command here - Mohon Bicarakan / tuliskan Komentar Disini