Como crear una nube de etiquetas

Una nube de etiquetas o Tag Cloud como la que ves en la sidebar. Puedes ponerlas también bajo la cabecera o en el footer, verás que el efecto es muy interesante, sobre todo si tienes muchas etiquetas.

Primero, asegúrate de que has incluido las Etiquetas en "Añadir un elemento de página", verás que es una de las opciones. Obviamente, las entradas han de estar etiquetadas.

Ahora, vamos a la edición HTML de la plantilla, y cumplimos el mandamiento 1 solemnemente, y también el 2 para facilitarnos la ubicación en la plantilla.

Copia y pega este código justo antes de ]]></b:skin>:

/* NUBE

----------------------------------------------- */
#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:8px;color:#fff}
#labelCloud .label-cloud li:before{content:"" !important}

Ahora, busca </head> y justo antes pega este código:

<script type='text/javascript'>

// LabelCloud User Variables

var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [25,25,112];
var minFontSize = 10;
var minColor = [100,149,237];
var lcShowCount = false;
</script>

Aquí puedes configurar el tamaño y el color de las etiquetas. Busca en el color chart que tienes en la sidebar los códigos RGB y sustitúyelos por los que aparecen aquí. Antes de que puedas ver nada en la vista previa, has de añadir una última parte. Vamos a seleccionar toda una sección de código y a sustituirla por otro.

Busca <b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>. Ahí empieza el código que vamos a cambiar entero, y termina en </b:widget>. Selecciónalo todo y copia y pega encima este otro:

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

Ahora sí haz una vista previa, y verás que ha cambiado totalmente la manera de presentar las etiquetas de Blogger. Puedes hacer una modificación más: en "Plantilla >> Elementos de Página", edita tu Nube: para poner un ejemplo, yo escogí borrar el título, y ordenarlas por orden alfabético y no por frecuencia para un efecto más desordenado.

Para adaptar los tamaños de fuente y los colores a tu blog, usa la vista previa y el buen gusto. ¡Guarda de nuevo tu plantilla!