Nube de Etiquetas

Podéis verla a la izquierda, en la widebar.
Y la idea es de Phydeaux. Vamos allá:

1º.- Incluir en la plantilla expandida el estilo de la Nube, antes del cierre /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}

2º.- Incluid el "script" de configuración de la Nube, entrte el cierre de /skin y el cierre de /head:

<script type='text/javascript'>

// Label Cloud User Variables

var lcBlogURL = 'http://YOURBLOG.blogspot.com';

var cloudMin = 1;

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>

Aquí debéis cambiar la URL por la de vuestro blog.

3º.- Ahora hay que crear el objeto-widget:
Bajad vuestraplantilla hasta encontrar, en la sección de sidebar, un b: widget: id="Label1" locked="false" title="Labels" tupe="Label".
Añadid el código del widget:

<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 = lcBlogURL+'/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> 

Y ya está. Si en "vista previa" no véis aparecer la Nube de Etiquetas... es que hay algo mal hecho.

Y... hay un "bug" (error) si todas las etiquetas sólo tienen una entrada... aviso. Así que estad seguros de que al menos una etiqueta tiene más de una entrada.

Más:

Podéis cambiar secciones de la configuración de la nube, en cuanto al tamaño y color de las etiquetas, p.e. Así que vamos a contar un poco para qué sirve cada una:

.- var cloudMin= 1;
Muestra el número de etiquetas que desplegará tu Nube. Si quieres que se desplieguen todas, deja el "1". Si pones un número mñas alto, sólo se mostrarán las etiquetas hasta el número que hayas colocado.

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

"MaxFonSize" representa, en píxeles, el tamaño de las etiquetas con más entradas. El "maxColor" representa el color de las etiquetas con más entradas.
Lo mismo representa la función "min", pero con las etiquetas con menos entradas.
Los colores están representados en formato RGB.

Si no tienes más de tres etiquetas, la Nube no se ve bien...

Si cambias el color de las etiquetas en la Nube, asegúrate de incluir el formato del color entre corchetes [] y los números separados por comas. ERl color por defecto es BLUE-azul- para las etiquetas con más entradas. El color por defecto para las etiquetas con menos entradas es el BLACK-negro.

Si no sabes cómo cambiar el color con una carta RGB, entra AQUÍ


.- lcShowCount:

Puede ser "false" o "true": lo que hace es colocar el contador de entradas que contiene la etiqueta en "on" u "off": para que se vea o no.

En cuanto al estilo-CSS:

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

Puedes cambiar las Fuentes y el centrado. Esto último puedes hacerlo de la siguiente forma:
text-align:justify;
text-align:right;
text-align:left;
(a la derecha, a la izquierda)

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

display:inline; puedes cambiarlo por display:block; para obtener el "peso" de cada etiqueta y frecuencia y mostrar la entrada en su línea, separada. SAi lo modificas, probablemente tengas que hacerlo desde el Elemento de Página (para ordenarlas alfabéticamente, p.e.)

.- #labelCloud .label-count

Si cambias a "tru" el contador del que hablé arriba-lcShowCount-, tendrás que cambiar también esta variable, para modificar el color y tamaño de las etiquetas en esta línea.


Y, ¡Hala!: paciencia. Si queréis cambiarlo todo, es que tenéis una moral a prueba de bomba.

Pd: Pues no es tan complicado... he cambiado los colores y he activado el contador; también las he alineado a la izquierda...y he cambiado el tamaño de las "mini" (es que si no... no veo ni torta :( ); y el tipo de letra... y las he ordenado por frecuencia... y... he quitado el subrayado...y... espero no cambiar más cosas, jajajaaa.
Lo que no me gusta tanto es el cambio "iin line" a "block". Me gusta más el primero.