Tags Cloud en Blogger en 25.1.09

En este post veremos la manera de ahorrarnos un poco o un mucho de espacio con la manera en que mostramos nuestras etiquetas, ya que los templates que elegimos muestran las etiquetas (tags) a manera de lista ocupando mucho espacio cuando empezamos a catalogar con cada vez más etiquetas nuestros posts, ahora haremos que se vea más 'cool' con un una 'tags cloud' (nube de etiquetas) como lo podemos ver en mi 'sidebar'. Aparte de hacer la 'Nube' veremos como cambiarle los colores de los links y el tamaño de fuente de nuestras etiquetas.

Para esto tendremos que hacer unos sencillos pasos el primero es copiar el siguiente código, para agregarlo, vamos a Diseño -> Edición HTML (no expandas artilugios), y lo pegamos antes de: ]]></b:skin>


/* Label Tag Cloud */

#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}

El siguiente lo pegamos después de ]]></b:skin> y antes de </head>

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://NombreDeTuBlog.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


En el espacio que vemos de http://NombreDeTuBlog.com colocaremos la URL de nuestro blog en mi caso por ejemplo http://jafrancov.blogspot.com

Ahora, busca lo siguiente (Control+F):<b:widget id='Label1' locked='false'
La línea completa es algo asi: <b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'/"> quizá el title tal vez sea distinto depende el idioma.
Toda esa misma linea la sustituiremos por el siguiente codigo:


<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 -----------------
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>


Para terminar, vamos a Diseño -> Elementos de pagina -> Añadir Gadget -> Etiquetas, damos click en guardar y en este punto tendremos nuestra nube de etiquetas (tags cloud).

En este punto estaremos disfrutando de nuestras etiquetas en forma de 'Nube' sin embargo dependerá de nuestra plantilla si los colores combinen, ya que los colores que nos aparecerán por default serán en tonalidades de Negro a Azul dependiendo de la reincidencia de las etiquetas dando Negro a las menos usadas y Azul para las más utilizadas.

Podremos cambiar los colores en la segunda parte del código que incrustamos, lo que está en este post en color rojo, ahora surge una pregunta, ¿cómo sabremos el color que queremos colocar?, para esto, en mi caso elegí para las etiquetas más usadas el mismo color por default de los links que aparecen en mi blog y para las menos usadas usé un color blanco, los colores se basan en una escala llamada RGB (Red 'Rojo', Green 'Verde', Blue 'Azul'), formada por 3 números que van desde 0 hasta 255, haciéndo todas las combinaciones posibles con respecto a un espectro de luz, por ejemplo una combinación de [0,0,0] es Negro, [255,255,255] es Blanco y una combinación de solo dos colores como [255,255,0] nos dará amarillo.

Para saber el color de nuestros links podemos ir a Diseño -> Fuentes y Colores y seleccionamos 'Color de enlace' el cual nos dará un número en hexadecimal de 6 caracteres como para mi caso el verde que uso es #8AC800, este número lo separamos en 3 pares y con nuestra calculadora científica que tengamos en nuestro equipo seleccionamos modo Hexadecimal (HEX) escribimos el par de caracteres y cambiamos a Decimal (DEC) otorgándonos su equivalente en decimal que es como nosotros lo necesitamos, para el ejemplo la conversión sería [138,200,0] para mi maxColor y [255,255,255] para mi minColor.

Ahora la parte más sencilla el cambio de tamaño de fuente en la Nube, que fue lo que coloqué en el segundo bloque de código en color Amarillo, que sugiero el minFontSize se quede en 10 para que mantenga visibilidad y para el maxFontSize dependerá de cuánto quieran que destaque su 'Nube' pero al igual recomiendo sea 30.

Hemos terminado, ahora podemos disfrutar de una Tags Cloud a nuestro gusto, espero les haya servido... enjoy!!