Não há blog web 2.0 que se preze, que não apresente a sua nuvem de tags. Nuvem de tags é um widget que espalha, por uma área delimitada do ecrã, um conjunto de links com as palavras ou frases mais utilizadas no blog/site.
Existem inúmeras opções online para a sua construção, algumas delas verdadeiramente espectaculares, mas a maioria apresenta alguns inconvenientes para os utilizadores do blogger, como nós, e que passo a citar.
- Alguns sites permitem construir a tag cloud online através dum varrimento do nosso site/blog, apresentando então propostas para palavras/frases. Muitas vezes a correspondência com aquilo que desejávamos deixa muito a desejar;
- Apesar de permitirem a configuração das frases / palavras manualmente, tal exercício pode tornar-se muito fastidioso pois requer manutenção frequente, face ao evoluir do conteúdo do site/blog;
- Para além disso temos de indicar o alvo/página para onde queremos que cada um dos links irá apontar;
- Outros ainda permitem-nos escrever um texto (podemos só pôr as frases e palavras que nos interessam) e a partir dele constroem a tag cloud. Mais uma vez, da minha experiência, os resultados são muito fracos.
Não olvidando que aquelas soluções podem constituir bons resultados para alguns sites, no caso do blogger julgo que a melhor solução é a proposta aqui. Não se gera uma "real" nuvem de tags, mas sim uma nuvem de labels (embora a distinção seja muito subtil, ela existe) que, aliás, é mesmo o que, na minha opinião, nos convém pois apresenta links para as as frases/palavras com que etiquetámos os nossos posts, aquando da sua criação.
Apresenta ainda uma característica saborosa que consiste no facto de podermos configurar uma cor e um tamanho de letra inicial e uma cor e tamanho de letra final. o objectivo é tornar os links da nuvem dinâmicos, isto é, as labels com menos entradas aparecem num tamanho menor e uma cor mais perto da inicial (mais clara, por exemplo), e as que apresentam maior número de posts com ela etiquetados, surgem com um tamanho de letra maior e uma cor mais escura (seguindo o nosso exemplo anterior).
Vejam um exemplo do que falo, na minha barra lateral, mesmo aqui ao lado.
Mas vamos ao que interessa, a construção.
São apenas três os passos:
PASSO 1:
Edite o html do seu template/modelo (se não sabe como, veja aqui). Não se esqueça de, antes de mexer, gravar/fazer download do seu modelo/template, pois algo pode correr mal e assim poderá recuperar a situação original.
Procure
]]></b:skin>
Imediatamente antes, cole o seguinte código:
/* 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}
PASSO 2:
Imediatamente depois do tal
]]></b:skin>
Cole o seguinte código:
PASSO 3:
Procure a linha
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
e substitua-a por todo o seguinte código:
<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>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 = "<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])
}
}
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] < cloudMin){
continue;
}
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 = '/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>
E já está.
Grave e veja os resultados no seu browser.
Nota: Manipulando o 2ª bloco de código que acrescentou, poderá alterar o tamanho mínimo e máximo da fonte da sua nuvem, bem como a cor inicial e final.
Questões e ajuda nos comentários, p.f.
