Diego Cabai | Blog

Nube de Etiquetas o Tag Cloud en Blogger/Blogspot

Nosotros los usuarios de Blogger muchas veces entramos en Blogs o sitios que tienen unas hermosas nubes de etiquetas con diferentes tamaños según la cantidad de posts que tenga cada una, pero cuando queremos agregar la nuestra, Blogger nos proporciona únicamente el formato de etiquetas standard. Eso es un poco frustrante, pero gracias a un Blog muy bueno que encontró la forma ahora podemos agregar nuestras propias nubes de tags. En mi caso la vas a encontrar en la columna de la izquierda abajo de todo. La idea en si es traducir el post original al español para que otros usuarios puedan aprovechar este beneficio.

Antes de comenzar asegurate de tener al menos una etiqueta asignada a algún post para que puedas ver el resultado, de lo contrario no verás nada cuando termines de agregar esto. También asegurate de hacer un backup de todo antes de hacer algún cambio.

Fuente | phydeaux3 – Setup and Configuration for New Blogger Tag Cloud / Label Cloud

1. Ingresá a Blogger con tu cuenta con privilegios. Asegurate que dentro de Elementos de la página tengas agregado un widget de Etiquetas. De lo contrario agregalo y movelo a la ubicación donde quieras la nube a de etiquetas.

2. 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í la edición se vuelve mas sencilla. Dentro del código, usando el Buscar de nuestro explorador, buscamos: ]]></b:skin>
El código a continuación debe ser insertado justo ANTES de eso que buscamos.

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

3. Ahora viene la sección de configuración de la nube de etiquetas. El siguiente código debe ser insertado justo DESPUES de lo que buscamos antes (]]></b:skin>), pero ANTES de la línea que figura como </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. Pero mas abajo se detalla mejor.

4. Como ante último paso hay que reemplazar el widget en si de etiquetas. 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 Vista Previa 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.

5. Como último paso queda la configuración. En este paso se van a explicar las variables y el significado de ellas para que puedas adaptar la nube a tu gusto. Si en la vista previa ya aparece con los colores de tu Blog, perfecto, pero en caso de que no acá es donde podemos configurarlo.

var cloudMin= 1;

Con esa variable le decimos cuál va a ser el número de etiquetas a mostrar. Con el parámetro en 1 muestra TODAS las etiquetas. Si cambiamos el número por uno mayor, sólo las etiquetas que aparezcan esa cantidad de veces van a aparecer en nuestra nube.

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

Estas variables cambian justamente lo que dice el nombre, el tamaño máximo de la fuente de la etiqueta con mayor cantidad de entradas y el tamaño mínimo de la fuente con menor cantidad de entradas. Así también están los colores de esas fuentes, pero el formato de las mismas debe ser en RGB. Los colores por defecto son azul para el máximo y negro para el mínimo. Si no sabes cuál es el código RGB del color que vos queres podes buscar en Internet, por ejemplo esta tabla: RGB Color Chart
Sino podes abrir un editor de imágenes y poner el código del color que vos tenes en formato #003366 por ejemplo y te dará el código RGB en formato 120,45,120.

var lcShowCount = false;

Por último, en esta variable vamos a definir si queremos que muestre la cantidad de posts al lado de la etiqueta o no. Esto se muestra con un número y puede ser true o false.

Acá ya tendrías terminada de instalar y configurar la Nube de Etiquetas para tu Blog. Pero quedan algunas cosas para configurar como el formato CSS que es el primer bloque de código. Mucha gente no suele configurar esto, pero si sos de los que le gustan tocar todo, acá te comento sobre las variables.

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

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

Ahí modificamos la fuente que queremos que use nuestra nube y mas abajo si queremos que esté alineada a la izquierda, derecha o justificada cambiamos el texto de la línea superior con nuestra opción. Por defecto vemos que viene centrada.

#labelCloud .label-count

Por último si configuramos para que muestre los contadores de posts al lado de nuestras etiquetas, en esta línea vamos a poder configurar los colores y formato de esos números.