Memasang Label Cloud

Sebenarnya tutorial pemasangan Label Cloud dah lama diwujudkan oleh Phydeaux3 cuma hari ini aku rasa nak pos balik sebab ianya sangat berguna untuk tutorial aku pada masa-masa akan datang.

Mungkin entri seterusnya aku akan tutorialkan bagaimana untuk memasang page khusus untuk Archieve dan Label Cloud. Aku dah pratikkan, kamu boleh rujuk di sini. Pada awalnya aku nak guna Flash Animated Label Cloud : Blogumus tapi memandangkan label aku terlalu banyak mungkin ia akan nampak menyerabutkan.

Oke, tutorial pemasangan Flash Animated Label Cloud : Blogumus pun aku akan buat pada entri seterusnya, maka bersabarlah!



Memasang Label Cloud

01. Pilih Template > Edit Html (tanpa tick pada Expand Widget Template).

02. Cari kod ini.

]]></b:skin>

03. Tambahkan kod ini di atasnya.

#labelCloud{

font-family:arial,sans-serif;
text-align:center;

}
#labelCloud .label-cloud li{

background-image:none !important;
border:0 !important;
display:inline;
margin:0;
padding:0 5px;
vertical-align:baseline !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 {

color:#000;
font-size:9px;
padding-left:0.2em;

}
#labelCloud .label-cloud li:before{

content:"" !important;

}

04. Cari kod ini.

</head>

05. Tambahkan kod ini di atasnya.

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

Untuk tukar warna font sila guna RGB color.

06. Cari kod ini.

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

07. Gantikan kod ini dengan kod di atas.

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

08. Pilih Save.