Agregar Nube de Etiquetas en blogger

Probablemente te pase como a mi, que has ido añadiendo etiquetas a tus entradas y la lista se ha hecho inmensa, o simplemente deseas mostrarla de un modo más atractivo.

Una manera de solucionarlo es crear una nube de etiquetas - ( Tag Cloud ) - en la que las etiquetas se muestran con un tamaño menor o mayor dependiendo de la frecuencia con la que aparezcan -el número de post creados con dicha etiqueta-. Además en el que podéis ver en esta página se puede configurar, de modo muy sencillo para que muestre o no el número de veces en que aparece.

Puedes ver cómo añadir una nube de etiquetas a tu blog de blogger (blogspot) pulsando en el enlace leer mas - que es una traducción del enlace del final de la página.-

Lo primero que has de hacer es bajarte la plantilla y guardarla por si tienes algún problema y así poder restaurar tu plantilla original.

Código:

<b:widget id='TagCloud' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type="text/javascript">
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Variables:
var max = 150; //max css size (in percent)
var min = 50; //min css size (...)
var showCount = 1;  // show counts? 1 for yes
var minCount = 1;  // what is the minimum count for a Tag to be shown? 1 for all.

//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
  labels.push("<data:label.name/>");
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
  urls.push("<data:label.url/>");
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
  counts.push("<data:label.count/>");
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];
//Begin HTML output
for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{
 //Calculate textSize
 var textSize = min + Math.floor((counts[x]/most) * range);
 //Show counts?
 if(showCount == 1)
 {
  var count = "(" + counts[x] + ")";
 }else{
  var count = "";
 }
 //Output
 document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>

Instalación:

Si ya tienes instalado en la página un elemento de tipo Etiqueta (Label) puedes saltar al paso 2


Paso 1:
Instala un elemento de tipo etiqueta: menú Diseño--> Elementos de la página --> Añadir un gadget en la columna que desees.

Busca el elemento Etiqueta y pulsa en "Añadir al blog"


Paso 2:
Reemplaza el código del widget Etiqueta que acabas de añadir por el código personalizado que tienes más arriba.

Para ello, primero navega por tu plantilla y pulsa expandir plantillas de artilugios


Busca el elemento widget Etiqueta (label) que acabas de añadir -debería ser algo similar al siguiente texto:

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

aunque el id y el título podrían ser diferentes, por lo que mejor emplea la herramienta de búsqueda de tu navegador y buscatype='Label'.

Borra la etiqueta Label desde el inicio al final (debes borrar ambas también) que aparecerá marcado como

</b:widget>

y reemplaza todo lo seleccionado con el texto del código que hemos creado al principio.

Fuente:
http://www.compender.com/2007/12/simple-tag-cloud.html