Memasang Label berbentuk Awan
Sebelum anda mengikuti langkah demi langkah tutorial ini, sila pastikan anda mempunyai postingan yang berlabel. Memadailah jika ada 1 postingan yang berlabel. Selain itu, label yang sedang anda gunakan itu sila jangan buang terlebih dahulu.
1. Pada halaman {Template}, sila pilih {Edit Html}. Jangan tanda pada kotak (Expand Widget Template}.
2. Cari kod di bawah ini :
]]></b:skin>
Tambahkan 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}
3. Cari kod di bawah ini :
</head>
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>
Sila gantikan warna tulisan pada baris yang telah ditebalkan dengan warna hijau. Pada asanya ia menggunakan 2 warna iaitu biru dan hitam. Disini ada beberapa kod warna RGB.
4. Cari kod di bawah ini :
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Perkataan pada baris yang telah ditebalkan dengan warna hijau bergantung kepada tajuk sidebar label anda , ianya mungkin telah diubahnya kepada Kategori, Arkib, Tag atau sebagainya.
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>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>
5. Pilih {Save Template} dan lihat hasilnya.
Hakmilik sepenuhnya : http://phydeaux3.blogspot.com/
Labels tu camne nak tukar kaler. Original kaler dia biru bila letak kat my blog yang background itam ilang langsung hihihi. Please help. Tq
Yeeehaaaaaaaaaaaa tq tq jadi dah take a look
Romantic Day Dreamer : sama-sama.
bm.. sedih lah saya ni..start anak tido saya buat label cloud ni..sampai anak dah bangun nangis2..masih tak blh juga.. kenapa masih keluar
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “b:section” must be terminated by the matching end-tag “”.
kat mane silap saya.. blog yg saya maksudkan adalah blog asas saya iaitu ibu-ayah-xtvt
Intan & Eddie : Jangan tanda pada kotak (Expand Widget Template}, harap membantu
Alhamdulillah…dah jadi dah..happynya saya..barulah saya blh tersenyum.. dari pagi tadi saya tension tak dpt nak siapkannya..baru skrg rasa lega..
terima kasih byk2 bm..
tapi yg nak tukar kpd 3column,masih blm berhasil..kodnya semua lain..saya search dgn ctrl F pun..keluar benda lain..tak sama langsung dgn kod yg bm bagi tu..
tima kacih krn memberi tutorial ini. Dah lame saya carik.. baru sekarang saya jumpa…
cuma nak tanya kalau nak tambah number sblh labels tu camana ek ? kan kalau buat standard labe dia ade bilangan artikel sebelah dia tu.
tq.
riezanie2u.blogspot.com
cmna nk ubah warna biru ke warna merah
hi there,
i think your tutorial is excellent. just one question, how to change the colour of the words in the cloud? thanks
Intan & Eddie : berjaya juga akhirnya
Riezanie : rujuk step 3
diamond : sama seperti diatas
HopefulPessimist : sama seperti diatas
Thank you so much and thanks to RomanticDayDreamer too for helping me.
You have a cool site here. Well done
ASkum sifu… thanx for this tips…really2 help me…
cekgu..naper penat penat mencober tak jaik erk? tolongler cikgu pro
pro…htm tu dah berjaya disimpan/save..naper tak jadi gak..
apa yang perlu dengan tukar kode ini dengan kode diatas..
puas cari tak jumperler.. tolong aaa pro
bro sgt hebat..!! thnzx
HopefulPessimist : biasa sahaja, he3…
R-Care : wsalam, hehe sama-sama
sukur : ikut step dengan betul, ada salah tu. telitikan setiap step dari pertama sampai akhir. jika tak jadi bagitau kat mana
pacak uitm : terima kasih
thanx bm..skali lagi perubahan d blogku, heheh
dah cube dah.. jadik2.. ;D
Salam BM,saya namie…saya telah mencuba cloud label ni,tapi masih gagal…saya telah mencuba membuat nya untuk beberapa kali…harap BM dapat menolong saya…Label yang keluar masih lagi dalam bentuk list…harap BM bole rujuk blog saya…
aku..ibnmasir : sama-sama
- NuLU - : sama-sama
unidentifiedModernist : mungkin anda tertinggal kod. fahamkan kod 1, kemudian letak kod-kod yang diberikan. periksa semula
salam BM,,masih juga tidak berjaya…adakah ini di sebabkan template yg saya pakai?…kerana saya menggunakan template yg saya download sendiri.
unidentifiedModernist : Jangan tanda pada kotak (Expand Widget Template} masa tutorial ini di buat.
sudah bm,tapi x berjaya jugak…bole saya minta email saudara Bm?kalo bole saya hendak hantar html coding tuk layout saya nih dan Bm tolong tgokkan…
unidentifiedModernist : templat anda puncanya kot. cuba anda alihkan kod merah pada step 2 tu letak atas body {
hoyeahh berjaya!
Alhamdulillah, berjaye..dh lame xgune tutorial BM. huhuhu..tQ BM
berjaya! hehe
tq for the coding
bm, mocci curious la mcm mn bm buat cloud bm tu bergerak-gerak?
pastu kan kt mocci nye template xde coding ni la....
puas dh mocci cek byk kali tp xde..
salam, labels sye tak leh nak click. knape ek?
camne ek nak wat cam BM tagcloud, siap bley gerak2 lagi?
ek sori, tetibe bley click plak… magic tul hehehhehehe
camne ek nak bg gerak2.. cun je tgk… tertarik laa plak
really like this one.. thanks.. im gonna give a try now..
guy rasa dh ikut semua step.. tapi dia x pusing2 plak… apa yg x kena ek?
Jangan tanda pada kotak (Expand Widget Template}.
already check.. memang guy tak expand pun widget template tu as you told.
i’m back… haha~~
guy ingatkan tutorial ni hasilnya cam tag cloud dlm blogmenjerit.. jenuh guy mencari di mana silapnyer.. huhu~~ kalu nk buat dia berputar2 tu camno plak…
itu versi terbaru. hehe, penulis belum buatkan lagi
cuba ko try tengok tutorial kat sini http://any-tips.blogspot.com/2008/08/blogumus-rotating-3d-tag-cloud-for.html
salam.. nk tny ni.. kalo gune old html, gune code yg same ke?
taklah, old memang tak boleh buat
Salam..saya masih baru..boleh tau camne nak buat cam kat “tag cloud” laman awak punya style ni..
menarik..
hi~ blogmenjerit!
sya dah cuba kat blog tutorial ni…
tapi tak timbul la label die!
bleh tak klu tgk2x kat blog sya??
http://wordsofamesz.blogspot.com
adakah ia disebabkan template ke?