2009-02-25

Membuat Label Cloud

Kali ni aku nak ajar korang cara2 untuk membuat label cloud dan cara2 untuk membuang label count. Sebenarnye tutorial ni ade kat blogmenjerit, tapi blog tu dah ditutup oleh Marzuki iaitu owner blog tersebut dan bukak blog lain. Tutorial ni pun aku amik dari phydeaux3
dan juga blog Nitesh Kothari dan aku translate dalam bahasa melayu untuk korang lebih paham.

1.MEMBUANG LABEL COUNT.
Mula2 aku nak ajar korang cara2 untuk buang label count. Label Count ni ialah nombor2 yang ada ditepi label yang menunjukkan berapa banyak entri yang berkaitan. dengan label tersebut. Pastikan korang dah letak widget Label kat dalam blog korang. Lepas tu, korang kene klik "Layout>Edit HTML". Jangan lupa untuk tandakan pada kotak "Expand Widget Templates". Kemudian carik code ini (<data:label.count/>). Korang perlu memadam kod tersebut. Selepas padam, jangan lupa untuk save.

2.MEMBUAT LABEL CLOUD.
Kali ni tutorial ni panjang sikit. Pastikan korang dah letak widget label kat blog korang. Pergi ke "Layout>Edit HTML". Jangan klik pada kotak "Expand Widget Templates". Carik tag ini ]]></b:skin> kemudian copy kod dibawah dan pastekan sebelum tag tersebut.


/* 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}

Langkah kedua. Korang perlu pastekan kod dibawah selepas tag ]]></b:skin>

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

Langkah ketiga. Carik kod seperti dibawah

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

dan gantikan kod diatas dengan kod dibawah

<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&gt;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 = &quot;<data:label.name/>&quot;;
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] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; 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>



5 comments:

Kenzo Miyazawa said...

ni yg aku cari dude... tnx..

|Ihsan| said...

ok...sesame.
klu x dapat buat gtaw aku ok.

Anonymous said...

There is obviously a lot to know about this. I think you made some good points in Features also.

rH3uYcBX

Anonymous said...

I want to quote your post in my blog. It can?
And you et an account on Twitter?

|Ihsan| said...

surely yes..