P o l l o ' s W o r l d

Buscando como hacer una nube de categorías, encontré este magnifico script en el blog de Phydeaux3, y aunque me esta dando algunos problemillas derivados del diseño, procedo a traducir (en forma libre) el proceso por si alguien más quiere instalarlo en su blog.

Las instrucciones originales las encuentras aqui.

Primero: Asegurate de haber guardado una copia de tu plantilla antes de hacer cualquier cambio.

Metete a Blogger, y entra a la sección Plantilla.
Revisa "Elementos de la Página" y asegurate de haber instalado el elemento "Labels".
Ahora pasa a "Edición de HTML", pero sin expandir las plantillas de artilugios.

El código está divido en 3 partes, una sección de Diseño, la Configuración y el Widget propiamente tal.

Para ello lo más fácil es buscar la etiqueta de cierre y pegar el código ANTES de ella.

o sea, buscamos ésto:

]]></b:skin>

y pegamos lo siguiente.

<br />/* Label Cloud Styles<br />----------------------------------------------- */<br />#labelCloud {text-align:center;font-family:arial,sans-serif;}<br />#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br />#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br />#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br />#labelCloud a{text-decoration:none}<br />#labelCloud a:hover{text-decoration:underline}<br />#labelCloud li a{}<br />#labelCloud .label-cloud {}<br />#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br />#labelCloud .label-cloud li:before{content:"" !important}<br />

Después de la etiqueta
]]></b:skin>
Nos saltamos un espacio y pegamos el siguiente código que corresponde a la Configuración

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

Ahora (y es un poco más complejo) bajamos hasta la sección del sidebar, buscando la etiqueta que corresponda a nuestro elemento Labels... y que debería ser algo parecido a ésto:

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

Una vez encontrado debe ser sustituído por éste código:
<b:widget id="'Label1'" locked="'false'" title="'Label" type="'Label'"><br /><b:includable id="'main'"><br /> <b:if cond="'data:title'"><br /> <h2><data:title/></h2><br /> </b:if><br /><br /> <div class="'widget-content'"><br /> <div id="'labelCloud'/"><br /><script type="'text/javascript'"><br /><br />// Don't change anything past this point -----------------<br />// Cloud function s() ripped from del.icio.us<br />function s(a,b,i,x){<br /> if(a>b){<br /> var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br /> }<br /> else{<br /> var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br /> }<br /> return v<br /> }<br /><br /><br />var c=[];<br />var labelCount = new Array(); <br />var ts = new Object;<br /><b:loop values="'data:labels'" var="'label'"><br />var theName = "<data:label.name/>";<br />ts[theName] = <data:label.count/>;<br /></b:loop><br /><br />for (t in ts){<br /> if (!labelCount[ts[t]]){<br /> labelCount[ts[t]] = new Array(ts[t])<br /> }<br /> }<br />var ta=cloudMin-1;<br />tz = labelCount.length - cloudMin;<br />lc2 = document.getElementById('labelCloud');<br />ul = document.createElement('ul');<br />ul.className = 'label-cloud';<br />for(var t in ts){<br /> if(ts[t] < cloudMin){<br /> continue;<br /> }<br /> for (var i=0;3 > i;i++) {<br /> c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br /> } <br /> var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br /> li = document.createElement('li');<br /> li.style.fontSize = fs+'px';<br /> li.style.lineHeight = '1';<br /> a = document.createElement('a');<br /> a.title = ts[t]+' Posts in '+t;<br /> a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';<br /> a.href = '/search/label/'+encodeURIComponent(t);<br /> if (lcShowCount){<br /> span = document.createElement('span');<br /> span.innerHTML = '('+ts[t]+') ';<br /> span.className = 'label-count';<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> li.appendChild(span);<br /> }<br /> else {<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> }<br /> ul.appendChild(li);<br /> abnk = document.createTextNode(' ');<br /> ul.appendChild(abnk);<br /> }<br /> lc2.appendChild(ul); <br /></script><br /><br /><noscript><br /> <ul><br /> <b:loop values="'data:labels'" var="'label'"><br /> <li><br /> <b:if cond="'data:blog.url"><br /> <data:label.name/><br /> <b:else/><br /> <a href="'data:label.url'"><data:label.name/></a><br /> </b:if><br /> (<data:label.count/>)<br /> </li><br /> </b:loop><br /> </ul><br /></noscript><br /> <b:include name="'quickedit'/"><br /> </div><br /><br /></b:includable><br /></b:widget>

Ahora puedes generar una vista previa para apreciar los cambios, si no puedes ver la nube es por que hiciste algo mal, así que revisa los 3 pasos previos (aunque puede ser debido a que tus entradas tienen sólo una categoría, ya que el script está hecho para trabajar con más de una).

Ahora lo que puedes modificar en la sección de Configuración, es lo siguiente:

var cloudMin= 1;

Esta instrucción limíta el número de etiquetas mostradas, por ejemplo si tienes muchas y sólo quieres mostrar aquellas que superen las 10 entradas, cambias el 1 por un 10. Si dejas el 1, se mostrarán TODAS tus etiquetas.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

Las líneas:

maxFontSize
maxColor

Se refieren al tamaño de texto en pixeles... el cual puede ser modificado de acuerdo al diseño de tu blog. maxColor se refiere al color RGB.
lo mismo ocurre para las líneas:

minFontSize
minColor

IMPORTANTE, cuando cambies el color, manten el mismo formato. ponlo entre los corchetes [] y separa los números por comas. los coloresestandar son el Azul para el máximo y el Negro para el mínimo.

La última variable es

lcShowCount

Puede ser false (por default) o true. Lo que esto hace es visualizar o no el conteo de posts junto a la etiqueta. Usualmento esto no se usa en las Nubes, pero si lo quieres poner, simplemente cambia la variable.

Ahora la sección CSS.
La primera línea:

#labelCloud {text-align:center;font-family:arial,sans-serif;}

Aquí puedes cambiar la familia de fuentes, así como la alineación.

text-align:justify;
text-align:right;
text-align:left;

La siguiente línea:

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Aquí lo más importante es la instrucción

display:inline;

que puede ser cambiada a

display:block;

Se refiere a si quieres ver cada categoría en una línea, o dispuestas en en grupo (puedes cambiar la visualización por frecuencia a alfabética en la sección de "Elementos de la Página").

Lo último importante es la sección:

#labelCloud .label-count

Si activaste la variable lcShowCount (para mostrar el conteo de post) Aquí puedes cambiar el color y el tamaño de las entradas.

Espero que les sirva.. a mi me gusta bastante aunque aún tengo que arreglar algunos detallitos.