Label Cloud

Resolvi, a medida que eu vou procurando para atender as minhas necessidades colocar uns tutoriais...

o 1o (que eu demorei para achar um bom) é sobre Label Cloud. Ese recurso nada mais é do que substituir a "listinha" de labels por uma nuvem ondem os labels (ou marcadores) com mais posts aparecem com uma cor mais clara e em tamanho maior e os com menos posts mais escuros e menores.

Antes de começar faça um backup do seu layout atual caso alguma coisa dê errado!

Na sua conta do Blogger clica na aba LAYOUT. no menu que se abre clique em ELEMENTOS DE PÁGINA e verifique se você já tem o recurso de Labels - Marcadores instalado no seu blog (a maioria dos layouts já vem com essa configuração padrão). Escolha o local da página onde a nuvem irá aparecer e salve.

Agora clieque em EDITAR HTML e deixe a caixa expandir widgets desmarcada.

O código tem 3 passos simples. Uma parte para o estilo, uma de configurações e o widget propriamente dito.

Procure a seguinte parte do seu código (apertando CRTL+F):
]]></b:skin>

Coloque o código abaixo ANTES do código que você localizou:

/* Label Cloud Styles
----------------------------------------------- */
#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 parte abaixo deve ser colocada depois do ]]></b:skin> e antes do </head> :

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Agora procure a seguinte parte:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

E a substitua por:

<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 -----------------
// Cloud function s() ripped from del.icio.us
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 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])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
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 = '/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>

Agora clique em VISUALIZAR e veja como ficou o resultado.
Se gostou clique em SALVAR MODELO e pronto! Se não funcionar é melhor clicar em LIMPAR EDIÇÕES e começar tudo de novo!

Se deu tudo certo é hora de editar as cores e tamanho das letras.
Procure a parte do código : // Label Cloud User Variables

Você pode editar tudo. Abaixo o que significa cada variável:
var cloudMin= 1; -> Indica qual o número mínimo de posts em um label para que ele seja mostrado
var maxFontSize = 20; -> Tamanho da maior fonte
var maxColor = [0,0,255]; - > Cor da maior fonte
var minFontSize = 10; -> Tamanho da menor fonte
var minColor = [0,0,0]; -> Cor da menor fonte
var lcShowCount = false; -> Mostra (true) ou esconde (false) o número de posts por categoria.

As cores são em formato RGB. Você pode verificar essa tabela no Photoshop ou dar uma olhada numa tabelinha que eu achei nesse site. Pegue como exemplo a primeira cor da tabela. O código HTML dela é 990033 mas o RGB é R:153 G:000 B:051. Dessa forma você deve escrever no código a cor como [153,0,51].

Esse tutorial foi originalmente postado no Phydeaux3.