Quando comecei a mexer com o meu blog achei um recurso muito legal que é a nuvem animada de tags. O problema é que três dias depois de instalá-la no meu blog ela parou de funcionar sem que eu tivesse "fuçado" em nada. Pensei que poderia ter dado algum problema na hopedagem dos arquivos e que voltaria a funcionar sozinho. Engano meu. Uma semana depois e nada de voltar a funcionar. Daí resolvi procurar a solução na internet e não achei. Achei somente o original feito para Wordpress, o WP-CUMULUS. Então para você que usa o Wordpress é só acessar aqui, seguir as instruções em inglês e ser feliz. Mas como eu uso o Blogspot tive que adaptar o código para mim. Baixei o que feito para o Wordpress, mudei algumas coizinhas e hospedei na minha conta no 000Webhost. Se você quiser pode fazer o mesmo, mas se preferir pegar a coisa "mastigada" é só seguir os passos a seguir.
OBS: Para você que já havia aplicado o código, saiba que ele precisou passar por alterações. Esse transtorno foi necessário, mas agora está tudo funcionado normalmente. Aplique o código descrito abaixo, ele já está corrigido.
Blogueiro
Antes de mais nada, o que você precisa saber é que o crédito da criação dessa nuvem é todo de Roy Tanck e Luke Morton, criadores do original para WordPress. Me parece que tem a participação de Amanda Fazani que criou a primeira adaptação desse código para o Blogger. Podem me corrigir se eu estiver errado. Eu peguei o código original, que naquela data estava disponível para download e adaptei também, já que os tutoriais que encontrei já não funcionavam mais. Hoje já não sei se esse código ainda está disponível para download. Então se você for fazer uma publicação sobre essa nuvem no seu blog ou site, não se esqueça de colocar os devidos créditos, lembrando-se que o código funciona porque Roy Tanck, Luke Morton, Amanda Fazani e Lomeutec trabalharam para isso, muito embora minha participação tenha sido mínima, mas sem ela você não estaria lendo esse artigo e não coseguiria implementá-lo também. Depois de apelar para o seu bom senso, demonstro abaixo como fazer a aplicação do código.
Acesse a sua conta no Blogger, clique em 'Layout' e depois em 'Editar HTML'. Embora não tenha necessidade neste caso, sempre clique e 'Expandir modelos de Widgets' para visualizar todo o código e facilitar para fazer as alterações. Também faça o backup antes de qualquer alteração, isso sim é sempre necessário para evitar "dores de cabeça" mais tarde. Qualquer coisa é só restaurar o Backup e tudo será com antes.
Pressione 'Ctrl+F' para abrir uma caixa de pesquisa no seu navegador e mande procurar por algo como:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Cole o seguinte código logo abaixo:
<b:widget id='HTML99' locked='false' title='' type='HTML'>Isso basta para implementar o recurso. Mas o ideal é que além da implementação é que a nuvem de tags tenha a "cara" do seu blog. A primeira coisa que pode ser alterada é o nome desse gadget. Para isso ache a linha:
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div><b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Label99' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='https://sites.google.com/site/lomeutec/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus por <a href='http://www.roytanck.com/'>Roy Tanck and Luke Morton</a> - <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> - <a href='http://lomeutec.blogspot.com/2010/04/nuvem-animada-de-tags-no-blog.html'>Lomeutec</a></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/lomeutec/tagcloud.swf", "tagcloud", "270", "270", "7", "#5c5c5c");
// uncomment next line to enable transparency
// so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xd0d0d0");
so.addVariable("hicolor", "0xe38424");so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Label99' locked='false' title='Marcadores' type='Label'>
E altere onde está escrito 'Marcadores' para o que você quiser. Para alterar a cor de fundo e o tamanho para melhor ajuste ao layout do seu blog encontre o trecho no código:
("http://www.lomeutec.netai.net/publico/blog/cumulus/tagcloud.swf", "tagcloud", "270", "270", "7", "#5c5c5c");
O número que está evidênciado em verde é onde você determina a largura, os números que estão em tons alaranjados determinam a altura e os que estão em azul alteram a cor de fundo. Se você não sabe o código de uma cor que você quer colocar é só clicar aqui e ver o correspondente a sua escolha. Se preferir, ao invés de colocar uma cor de fundo você pode simplesmente tirá-lo deixando-o transparente. Para isso encontre a seguinte linha no código:
// so.addParam("wmode", "transparent");
Retire as duas barras que aqui no exemplo estão destacadas na cor roxa.
Logo abaixo você pode ver a linha:
so.addVariable("tcolor", "0xd0d0d0");
Ao alterarmos os números, que aqui estão evidênciados na cor magenta, são modificadas as cores das letras na nuvem de tags. Você obtém o código no mesmo link que foi mencionado mais acima, só que dessa vez não coloque o sinal de cerquilha - # - e não retire o 'ZERO' e o 'X' que antecedem o número no código: 0xd0d0d0 - Aqui identificados na cor vermelha.
Para mudar a cor das tags quando passar o mouse por cima da nuvem, altere o seguinte trecho destacado na cor rosa demonstrado abaixo.
so.addVariable("hicolor", "0xe38424");
Para alterar o tamanho das letras modifique o número que aparece em 'style' na seguinte linha do código:
<b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'>
Após ter feito estas modificações você terá uma nuvem animada de tags ao seu gosto. Agora vá em 'Elementos da página' para ajustá-la na posição que quiser como você faria com qualquer outro gadget.
Uma única observação. Se algumas de suas tags estiverem com acento, talvez a nuvem não consiga redirecionar corretamente. Portanto use tags sem acentos. Veja por exemplo que eu coloco uma tag como 'Materia' e não 'Matéria' como seria o correto.
Veja também como colocar emoticons nos comentários do blog.
