Informasi, Teknologi, Pengetahuan, dan Tips Trik: Awan Cloud

Wednesday, 2 December 2009

Membuat Tag Cloud Di Blogger

Cara simple/singkat membuat tag cloud pada blogger

Pertama saya mengenal blog,banyak sekali istilah-istilah widget blogger yang ingin saya ketahui.

Seperti halnya ‘Tag Cloud’yang akan kita bahas kali ini.
Dulu,saya mengerti dan pernah menjumpai widget seperti ini,namun karena tidak mengerti apa namanya,maka saya googling dengan berbagai kata kunci.
Seperti;'cara membuat tulisan besar dan kecil pada blogger',atau 'cara membuat widget tulisan tebal dan tipis',dll.

Bahkan saya sempat bertanya langsung pada masternya,sampai saya tahu itu namanya Tag Cloud.

Beberapa waktu lalu saya sempat memposting juga tentang cara membuat tag clouds untuk blogspot,namun masih manual bukan wyswyg seperti fitur blogger saat ini.
Karena,seiring berkembangnya fitur instant blogger,blogger sudah memberikan langkah mudah untuk membuat label berbentuk awan ini.

Nah,untuk contoh tag cloud,anda bisa lihat ilustrasi gambar di atas,atau bisa kunjungi langsung blog teman saya di mendengarkan musik mp3 gratis.

Langkah Sederhana Membuat Tag Cloud Untuk Blogger

Seperti biasa,untuk membuat tag cloud ini,pertama pergilah ke Tata Letak,lalu add new widget atau klik tulisan Tambah Gadget untuk blog berbahasa indonesia.

Setelah itu muncul dialog box,pilih Label.

label untuk membuat tag cloud blogger blogspot.

Kemudian akan muncul jendela baru lagi,lalu pada option pilihlah Tag Cloud,lalu klik tulisan Simpan.

Pilihan Option Membuat Tag Cloud Pada Blogger.

Selesai,anda sudah berhasil membuat tag cloud di blogger,dan silakan lihat hasilnya.
Semoga bermanfaat ya :D

Membuat Tag Clouds

Tag Clouds ...

Untuk membuat tag clouds,anda harus sudah membuat label pada situs anda.
Pilih bagian Dashboard ke Pengaturan lalu pada Page Element tambah halaman baru add widget, pilih Label.

Setelah itu Edit HTML kemudian beri tanda centang pada Expand Widget Templates.

Cari kode :

]]></b:skin>

Klo dah ketemu,lalu copy paste kode di bawah ini diatasnya :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Setelah itu,tepat di bawah kode :

]]></b:skin>

copy paste kode di bawah ini :

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Lalu simpan template.

Langkah terakhir,masih pada Edit HTML cari kode di bawah ini :

<b:widget id='Label1' locked='false' title='cloud' type='Label'>
&lt b:includable id='main'>
<b:if cond='data:title'>
<h2></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

</b:widget>

Kalau dah ketemu,ganti kode diatas dengan kode di bawah ini :

Alangkah baiknya backup terlebih dahulu template ke komputer anda,Tapi klo dah percaya,ya langsung ganti aja.

Akurat koq :)

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Informasi, Teknologi, Pengetahuan, dan Tips Trik