Crear una nube de etiquetas

En esta nueva entrada de El Blog de la Informática, veremos cómo crear una nube de etiquetas.

En primer lugar, lo que debemos hacer es añadir el elemento ETIQUETAS a nuestro blog si es que no lo tenemos ya incluido. Para ello, pulsamos en la ficha DISEÑO, hacemos clic sobre el enlace AÑADIR GADGET y, en la ventana que aparecerá, pulsamos sobre el signo + que tiene el elemento ETIQUETAS.

Una vez añadido a nuestro blog, vamos a crear la nube de etiquetas. Para ello, tendremos que añadir código a la plantilla, siguiendo estos pasos:

Accedemos a la ficha DISEÑO y pulsamos sobre EDICIÓN DE HTML.

Buscamos el siguiente código en la plantilla:

]]></b:skin>

Pegamos el siguiente código justo antes de la etiqueta anterior:

/* Estilos de la nube de etiquetas
----------------------------------------------- */
#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}

A continuación, pegamos el siguiente código justo después de la etiqueta citada en el paso dos y antes de la etiqueta </HEAD>:

<script type='text/javascript'>
// Variables de usuario de la nube de etiquetas
var lcBlogURL = 'http://TUBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

En el código pegado en el paso anterior, tendremos que escribir la dirección de nuestro blog en la variable lcBlogURL, es decir, donde pone http://TUBLOG.blogspot.com, lo cambiamos por la dirección de nuestro blog.

Una vez escrita la dirección de nuestro blog, vamos a realizar la última modificación para crear nuestra nube de etiquetas en nuestro blog. Buscamos el siguiente código:

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

Reemplazamos la línea de código anterior por el siguiente código:

<b:widget id='Label1' locked='false' title='Etiquetas' 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'>
// No cambiar nada -----------------
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 ta=0
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])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
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 = 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>

Con esto habremos creado nuestra nube de etiquetas para nuestro blog tal y como podéis apreciar en el mío a día de hoy, no sé yo si con el tiempo seguiré teniendo este gadget, en la parte superior justo debajo de la imagen de cabecera.