Crear una nube de etiquetas

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

crear nube de etiquetas - imagen principal del post

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.

12 comentarios:

Onlyamd dijo...

Muchas gracias por el código, hacía tiempo que buscaba como hacerlo y no lo conseguía.

Saludos!

José M dijo...

De nada. Saludos.

Maria Rosa Vila dijo...

Hola! He seguido los pasos, pero el editor de blogger dice que los cambios añadidos no se pueden guardar porque el formato no es correcto. Aparece el siguiente mensaje de error:

The element type "b:section" must be terminated by the matching end-tag "".

¿Puedes ayudarme?
Gracias anticipadas!

José M dijo...

Hola Mª Rosa,

comprueba si has copiado el código completo o bien si has eliminado alguna etiqueta que no tendrías que haber suprimido, puesto que el error que te aparece indica eso que te falta una etiqueta de cierre.

Yo lo acabo de probar de nuevo por si acaso con la conversión del código HTML se hubiese eliminado algo, pero me ha salido perfectamente la nube de etiquetas con este código.

SABIA dijo...

Gracias por ese tip... q buena manera d explicarlo!!!!! ya t enlacé en mi blog :), Slds!

José M dijo...

De nada Sabia, saludos

T.E. Norte dijo...

Estoy intentando poner una nube de etiquetas.
Me parece muy bien explicado y realizo todos los pasos.
pero no me sale en el blog. Alguna sugerencia. Muchas gracias

T.E. Norte dijo...

Complemento informacion. El ultimo paso se pierde cuando le doy a "Guardar plantilla".

Gracias

José M dijo...

Comprueba que estás reemplazando la línea correcta

T.E. Norte dijo...

Hola otra vez, creo que el problema esta en que si me añade el gadget de etiquetas pero luego no se muestra en el blog y los codigos Html del ultimo paso se borran. He leido por ahi el tema de blogger antiguo y nuevo. Alguna sugerencia. Muchas gracias por compartir.

Micho_star@hotmail.com dijo...

Gracias BLOG, ME TRABAJO PERFECTAMENTE

José M dijo...

De nada, saludos.

Publicar un comentario

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.