Web Dois Ponto Zero: tag cloud

Mostrar mensagens com a etiqueta tag cloud. Mostrar todas as mensagens

Se quiser colocar no seu site uma Tag Cloud / Nuvem de Tags em Flash como aquela que apresento no rodapé deste blog, basta seguir os passos que indico a seguir.
No meu caso, a tag não é muito funcional porque o meu blog tem muitas tags, mas para um blog melhor organizado, com menos tags/labels, o efeito é espectacular: Ela roda, na horizontal e na vertical, quando colocamos o rato sobre ela.
De referir ainda que este widget é customizável no tamanho da letra usada, na cor do fundo e da letra, bem como no próprio tamanho da Nuvem que pode ser usada em qualquer local do blog, como, por exemplo, na barra lateral.
Então vamos lá:

1. Comece por editar o código html do seu blog (não é preciso expandir o código dos widgets;
2. Procure a linha que contém:
<b:section class='sidebar' id='sidebar' preferred='yes'>
3. Logo abaixo dessa linha coloque o seguinte código:





 




 <object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
     <param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
     <param name="bgcolor" value="#ffffff" />
     <param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
   


</tags>" />
     <p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
 </object>

4. Já está. A Nuvem de Tags aparecerá na sua barra lateral.
5. Se quiser colocá-la noutro qualquer sítio do seu blog, bastará ir ao seu Painel de Controlo >> Esquema >> Elementos de Página
e arrastá-la para esse outro local, como eu fiz arrastando-a para o rodapé.
6. Para customizar a nuvem, nos parâmetros que indiquei no início deste artigo, consulte o blogger buster, em http://www.bloggerbuster.com/2008/09/alternative-installation-for-blogumus.html, de onde tirei este widget.
Boa sorte!

[+/-]

Tag Cloud / Nuvem de Tags

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

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.