Label Berbentuk Awan

Topik ini atas permintaan Cikgu Putra Aiman. Dia mahu penulis mengajarnya kaedah² untuk memasukkan label berbentuk awan ke dalam blog. Sebelum ini penulis pernah memakai label asas dan juga label flash beranimasi. Kini penulis lebih selesa menggunakan label berbentuk awan.


Sebelum anda memasang label berbentuk awan, anda perlu mempunyai widget label asas di blog anda. Pastikan anda membuang widget label flash beranimasi jika anda menggunakannya.

1. Login ke Blogspot.

2. Pilih Layout - Edit HTML.

3. Download Full Template sebelum mengedit blog.

4. Cari ]]></b:skin>, tampal kod ini di atasnya.

/* 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}
4. Di bawah kod ]]></b:skin>, tampal pula kod 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>
5. Seterusnya cari <b:widget id='Label1' locked='false' title='Labels' type='Label'/>, gantikan dengan kod di bawah ini.

<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. Preview dan Save Template jika berpuashati.

Anda boleh menukar kod² berwarna merah mengikut citarasa anda.

var maxFontSize = 20; = saiz maksima untuk tulisan
var maxColor = [0,0,255]; = warna maksima setiap label
var minFontSize = 10; = saiz minimum untuk tulisan
var minColor = [0,0,0]; = warna minimum setiap label
Kod warna RGB boleh dirujuk di sini.

Perkara² yang perlu dititikberatkan.

Pastikan setiap label anda mempunyai lebih dari satu topik. Selain itu, label yang anda gunakan juga tidak boleh ada tanda seperti " atau ' untuk memastikan ia berfungsi dengan baik.

Selamat mencuba. Semoga sukses.

Via : Phy3blog