Como crear una Nube de etiquetas

Bueno, he aquí lo que pretende ser un mini-manual de como poner una nube de etiquetas o tag cloud. Los datos están sacados de Beta Bloggers pero yo os lo traigo para explicar como se pone en español y lo que he descubierto para poder modificar en algo los códigos (ya que los que ponen van en escala de negros a azules en rgb variando únicamente el blue.

Pues bien, los pasos son los siguientes:

1) Lo primero que tenemos que hacer es entrar en Diseño, elementos de páginas y añadir el gadget de etiquetas si no lo tenemos ya puesto.

2) Vamos a Edición HTML y comprobamos que "Expandir plantillas de artilugios" está desmarcado.

3) Por seguridad hacemos una copia en nuestro ordenador de todo cuanto viene de códigos por si trasteando estropeamos el código del blog.

4) Buscamos la siguiente línea dentro del código (usando Control + F, por ejemplo):

]]></b:skin>

5) Copiamos el siguiente texto justo ANTES de esa línea.

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

6) Volvemos a buscar

]]></b:skin>

7) Justo DESPUÉS de esa línea y ANTES del </head> copiamos el siguiente código:

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

8) Buscamos una línea que sea del siguiente tipo:

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

En vez de 'Labels' pondrá el nombre que le habéis puesto como título al gadget de etiquetas.

9) Sobreescribimos la línea con el siguiente código:

Nota: en la primera línea, donde pone 'Label Cloud' podemos sustituirlo por el nombre que queramos.

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

10) Le damos a vista previa para comprobar que lo hemos hecho bien, y si todo sale correcto, guardamos.

Ahora las aclaraciones: Si queremos que no sea de negro a azul, si no a otros colores, podemos hacer lo siguiente: Abrimos nuestra cuenta en Fotolog o sitios por el estilo (no se si sirven los programas de diseño gráfico, seguramente si, si te dan valores RGB).

En Fotolog damos a Cuenta/Diseño de página, después le damos a desplegar las paletas de colores y nos vamos a la última opción ("Color Slider").

Una vez estamos en la zona que nos permite ver valores RGB independientemente si lo hacemos por páginas webs o por programas, vemos tres botones, de los cuales el B es el que modifica nuestro código, así que los otros dos podemos darle distintos valores hasta encontrar una gama que nos agrade.

Copiamos los valores de R y de G sustituyendo los dos primeros ceros de las líneas "var minColor" y "var maxColor" que se encuentran en el apartado 7), teniendo en cuenta que el primer cero es R y el segundo es el de G.

Un ejemplo del código modificado (modificaciones en negrita) es el siguiente:

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [135,16,255];
var minFontSize = 10;
var minColor = [135,16,0];
var lcShowCount = false;
</script>

Ésto lo que hace es pasar la gama de colores de nuestra nube de etiquetas del rojo oscuro al violeta pasando por tonalidades moradas. (Exáctamente el que tenemos en este blog, y el original es el que hay en Tempus-Cronos)

Cuando tenga algo más de tiempo iré informando de otras modificaciones que descubra ;)

Saludos y espero que os sirva de ayuda, a mi me salió en el primer intento, así que no es muy difícil.