Configurar una Nube de Tags para Blogger

Este código lo encontré una "nubosa" tarde de sábado y lo puse en mi blog, el resultado a la vista abajo columna derecha.  Lo primero que debes tener es obviamente una cuenta en Blogger y saber algo de HTML, además de al menos dos etiquetas en tus post, esos son los ingredientes principales. Siempre antes de comenzar la modificación de código debes respaldarlo y te aconsejo esta vez que lo hagas, no te asustes por insistir pero si algo sale mal tienes como revertir los cambios.

Paso a Paso

Primero ingresa a Blogger con tu cuenta y en Elementos de la página, agrega el widget Etiquetas que se encuentra dentro de Básicos y lo mueves a la posición que deseas, si tienes un template de 2 columnas por lo general debieras dejarlo en la columna lateral derecha.
Ahora seguimos en la sección Edición de HTML. Acá vamos a agregar la primera parte del código que se refiere al formato y viene en código CSS (stylesheet). No marcamos "Expandir plantillas de artilugios" así te restringes sólo a este cambio o si te manejas con HTML expande y copia todo el código a tu editor preferido. Dentro del código, usando el Buscar de nuestro explorador o editor, buscamos:
]]></b:skin>
El código a continuación debe ser insertado justo ANTES de la etiqueta que encontramos, es decir, skin.

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

Ahora viene la sección de configuración de la nube de etiquetas. El siguiente código debe ser insertado justo DESPUÉS de lo que buscamos antes(]]></b:skin>), pero ANTES de la línea </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>

Esos son los parámetros que después nos va a servir para configurar nuestra nube en cuanto a tamaño de la letra, color, etc. El último paso sería reemplazar el widget por default. Para esto vamos a buscar la siguiente línea, nuevamente con el buscar de nuestro navegador:


<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Una vez que la encontramos debemos reemplazar la línea completa con el siguiente código:

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

En este punto ya deberíamos tener la nube agregada y funcionando en nuestro Blog. Si hacemos click en Ver Blog deberíamos ver los cambios que realizamos. Si no vemos los cambios revisar los puntos detenidamente, especialmente dónde posicionar los dos primeros bloques de código. Si surgen dudas me dejan un comentario.