Nube de etiquetas flash en blogger

Los tag clouds muestran tus etiquetas visualmente bonitas y ordenadas por tamaño según la cantidad de entradas en cada una, en blogger no esta por defecto como en wordpress, por lo que necesitaremos uno más de los famosos hacks.



Para agregarla, vamos a Plantilla -> Edicion HTML (no expandas artilugios)

El codigo se divide en 3, el primero lo pegamos antes de "]]></b:skin>"



Codigo 1:



/* 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 pegas despues "]]></b:skin>" y antes de "</head>"



<script type='text/javascript'>

// Label Cloud User Variables

var lcBlogURL = 'http://TU-BLOG.blogspot.com';

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>



En http://TU-BLOG.blogspot.com pones la direccion de tu blog (¬¬)



Ahora, busca lo siguiente (Control + F): <b:widget id='Label1' locked='false'



El tag completo es algo asi: <b:widget id='Label1' locked='false' title='Labels' type='Label'/> pero el title tal vez sea distinto en tu caso.



Esa misma linea (toda) la debes reemplazar 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&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 ta=0

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

}

}

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 &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 = 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, ve a Plantilla -> Elementos de pagina -> añadir nuevo elemento -> etiquetas.



Eso es todo, ahora tendrás una nube de etiquetas en tu blog ^^



ACTUALIZACIÓN:

Crear facilmente nubes de etiquetas o label clouds, con estos sistemas:

TagCloud o ZoomClouds