Hoje a dica é simples, mas exige atenção e cuidado. Vamos aprender a instalar e configurar uma tag cloud (nuvem de tags) no Blogger. E para quem não sabe, vários blogs que utilizam wordpress (.org) já usam uma nuvem de tags que fica flutuando e que se movimenta de acordo com a posição que você coloca o cursor do mouse.

Um movimento bem interessante para os blogs que na sua grande maioria são bem "paradões".

Dica 1: Para quem usa WordPress uma boa pedida é o plugin WP-Cumulus (em um próximo texto vou passar um tutorial de como instalar e configurar o plugin ok?)

Bem, eu estava procurando por algo parecido para o Blogger (para atender um pedido especial), quando encontrei no Blogger Buster (em inglês) um tutorial explicando como adicionar uma nuvem de tags assim no Blogger!

Fiz uma pequena adaptação para que a nuvem fique da largura da sua sidebar independente da largura da mesma. Então, vamos ao código:

Dica 2: Antes de qualquer coisa, salve uma cópia do seu template. O código é simples de ser implementado, mas nunca se sabe né?

Vá até o painel de controle do blog e clique em Layout –> Editar HTML.

Procure pelo trecho abaixo (NÃO precisa clicar na caixinha "Expandir modelos de widgets"):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Logo abaixo deste trecho, cole o código a seguir:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;100%&quot;, &quot;210&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Alterações

Para mudar a cor de fundo da Nuvem de tags e adaptá-la a cor de fundo do seu blog, procure no código acima por #ffffff e substitua pelo código da cor que quiser.

E para modificar a cor da fonte (letra) da Nuvem de tags, procure por 0x333333 substituindo o 333333 (sem o "#" ao lado ok?).

Se não sabe qual o código da cor do seu template ou quer uma cor diferente, você pode procurar nessa tabela de cores que eu já postei aqui!

Clique aqui para ver a tabela de cores

Depois de fazer as modificações que quiser, clique em VISUALIZAR e você já deve conseguir ver a nuvem de tags no seu blog. Depois clique em SALVAR e pronto!

Agora, se você quiser mudar o nome que aparece como título da nuvem de tags (Labels), vá até a página Elementos de página, procure na sua sidebar o título "Labels" e clique em Editar na barrinha do título.

Na janela que se abre, substitua o título (Labels) pelo título que quiser (Nuvem de tags, Tags, etc…), depois clique em SALVAR e pronto!

Obviamente nem tudo são flores e já sabemos das limitações do Blogger. Uma delas, bem grave por sinal é o fato da nuvem de tags não funcionar com palavras acentuadas. Enfim…

Se quiser conferir o post original do Blogger Buster visite:

Blogumus: a flash animated label cloud for Blogger!

Faça bom uso!