Nube de tags (etiquetas)

Son varios los que me preguntan cómo poner las etiquetas como las que se ven en mi sidebar, en forma de nube. No es difícil conseguirlo, pero sí requiere algo de paciencia.
Bien empecemos:

♠ Ante todo debes tener actiavadas las etiquetas; sino las tienes, ve a Diseño/ Elementos de la página/ Añadir un gadget / Etiquetas y damos click a guardar.
♠ Ahora nos dirigimos a Diseño/ Edición de HTML y damos click a Expandir plantillas de artilugios.
♠ Con ayuda de CTRL+F buscamos: ]]></b:skin> y antes de éste pegamos:

/* Etiquetas

----------------------------------------------- */
#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}

♠ Ahora, nuevamente con ayuda de CTRL+F, buscamos </head> y antes de este pegamos:

<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [204,74,122];
var minFontSize = 10;
var minColor = [200,112,12];
var lcShowCount = false;
</script>

Explicación:
» var maxFontSize: tamaño de fuente de las etiquetas que tengan varias entradas.
» var maxColor: color de las etiquetas que tengan varias entradas.
» var minFontSize: tamaño de fuente de las etiquetas que tengan pocas entradas.
» var minColor: color de las etiquetas que tengan pocas entradas.

♠ Bien, ahora en la plantilla buscamos lo siguiente:

<b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Quizás el código de tu plantilla sea diferente a este, en todo caso fíjate en la primera línea y la última.
Selecciona todo el código anterior, bórralo y sustitúyelo por el siguiente:

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

♠ Mira en vista previa y si todo salió bien, damos click a guardar.

Cualquier duda será bienvenida!