[ blogger ] how to replace a old label with tag cloud

As recommended in this, here is an abbreviation steps.

First, replace old Label, with a new one.

// old Label

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
   <h2><data:title/></h2>
 </b:if>
 <div class='widget-content'>
   <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>

 </div>
</b:includable>
</b:widget>

// new Label

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

Second, put CSS after ]]></b:skin>
( Note that some template has a problem with b:skin, so it's better to put it outside )

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

Third, insert javascript configuration about color before </head>

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

How to use thai language

From code above, there is a problem about displaying tag in other language, for instance Thai language ( ภาษาไทย ),

Here is my solution, Just changing from

a.appendChild(document.createTextNode(t));

to

a.innerHTML = t;

and everything wokring fine.

แก้ให้แล้วน้ะจ้ะ ใช้ภาษาไทยได้แล้วนะ