May 6, 2009

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

18 Comment

D@U$™ Wed May 06, 06:44:00 PM

i'm first...
Nak try la nanti...
Time kasih banyok...

ZelL ThE gReaT ! ™ Wed May 06, 07:46:00 PM

Ms. Eriyza, dya cakap macam ni:

Kami tidak dapat pratonton templat anda
Sila betulkan ralat di bawah, dan serahkan template anda sekali lagi.
Templat anda tidak boleh dihuraikan kerana ia tidak purna bentuk. Sila pastikan semua elemen XML ditutup dengan sempurna.

Mesej ralat XML: The element type "b:section" must be terminated by the matching end-tag "".

Kat mna salahnya erk?

mie Wed May 06, 08:31:00 PM

baru je nak tanya...
kan ku cuba...
thankz...

[a.m.o.i] ™ Wed May 06, 09:52:00 PM

kenapa dipanggil label awan?
ada bentuk awan ke?haha.

Eriyza Wed May 06, 10:12:00 PM

Daus : Sesama. Okey.

Eriyza Wed May 06, 10:14:00 PM

Zell The Great : Ikuti seme langkah dgn betul dan cuba sekali lg.

Eriyza Wed May 06, 10:16:00 PM

Mie : Selamat mencuba. Semoga sukses.

Eriyza Wed May 06, 10:18:00 PM

Amoi : Ntahlah. Depa dah beri nama camtuh, ikut jer laa.

[a.m.o.i] ™ Thu May 07, 05:58:00 PM

aku dh test tutorial ni! berjaya! tak caya tgk blog amoi tu. lebih suke label cloud ni dari yg pusing2 kasi aku penin.haha.

deefamily Fri May 08, 10:03:00 AM

Belum cuba. Akak baru mencuba buat blog takut bila ubah , semua berubah
Silalah ke blog akak dan komen . Beritahulah apa yang perlu dibaikki. sila lah..
http://deefamily-keluargamanisku.blogspot.com

Adik-adik... komen please

ZelL ThE gReaT ! ™ Fri May 08, 01:01:00 PM

erm ok ms, thnx :) sya try k? :)

Eriyza Fri May 08, 01:16:00 PM

Amoi : Sama arrr. Cheq pun lebeh suka label cloud gak. Mekaseh sudi cuba.

Eriyza Fri May 08, 01:17:00 PM

Deefamily : Akak leh wat satu blog percubaan dan cuba kat sana. :)

Eriyza Fri May 08, 01:20:00 PM

Zell The Great : Okey.

[a.m.o.i] ™ Fri May 08, 04:54:00 PM

eh. smiley dh kua kat blog ni.haha. nak test la. =)) :))

Eriyza Fri May 08, 11:30:00 PM

Amoi : Smiley tuh dah bekurun cheq letak.
Hang je takmo guna. :P

Mangkuk.com Mon May 18, 03:15:00 PM

hahahhaha ape yg aku buat seme gagal utk di simpan la... knp erk???

Eriyza Mon May 18, 11:07:00 PM

Mangkuk.Com : Guna template convert dr wp ke?? Cuba lg.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.