Colocando uma nuvem de tags com movimento no Blogger

Olá querido leitor do iSuporte, recentemente o leitor Djone, entrou em contato comigo e me perguntou como adicionar uma nuvem detags (marcadores) com efeito de movimento em um blog do Blogger.

Bom, o Blogger já possui um widget de marcadores, e este widget contém dois modos de exibição, que são: Lista e Cloud (nuvem).


Apesar do widget do Blogger possuir a opção Cloud (nuvem), o estilo de nuvem do mesmo é estático, ou seja, a nuvem não se move. Foi então que pesquisando em alguns blogs, encontrei como fazer este efeito de movimento.

Enquanto eu estava pesquisando pelo efeito, eu percebi que este código já é bem famoso na blogosfera, pois, quando foi divulgado, o mesmo teve... 
muitos
 alguns problemas e várias atualizações.

Enfim, eu encontrei o código deste efeito no blog El Escaparate De Rosa e, seguindo as próprias indicações do blog, fui direcionado ao blog Oloblogger onde vi como corrigir os problemas que estavam ocorrendo.

Você pode ver um exemplo da nuvem de tags, em funcionamento, na sidebar (barra lateral) do nosso blog de testes.

Informação: este hack foi testado nos navegadores: Mozilla Firefox, Google Chrome, Opera e Internet Explorer. Nos dois primeiros, funcionou perfeitamente; no Opera, é necessário clicar na nuvem para poder conseguir clicar nos marcadores; e, no Internet Explorer, a nuvem aparece mas não funciona quando se clica nos marcadores.
Então vamos ao tutorial.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML, em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador.

3. Se você estiver usando um dos novos templates do Blogger - aqueles criados com o Designer do modelo, ou pelo menos baseado neles -, procure pelo Código 1. Se você estiver usando um dos template antigos do Blogger, procure pelo Código 2.

Código 1:

<b:section-contents id='sidebar-right-1'>

Atenção: note que no código acima foi destacado uma parte em vermelho. Esta parte em vermelho irá variar dependendo da sua barra lateral. Então, se a sua barra lateral estiver à direita do seu blog, deixe “right” mesmo; se a sua barra lateral estiver à esquerda do seu blog, substitua o que está em vermelho por “left”, antes de procurar o código.
Código 2:

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

4. Depois de encontrar um dos dois códigos citados acima, cole este outro código imediatamenteabaixo dele.

<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'>
&lt;object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17889015/Bloggando-Na-Web-Scripts/tagcloud.swf" width="100%" height="280" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://dl.dropbox.com/u/17889015/Bloggando-Na-Web-Scripts/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#FFFFFF" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;/object&gt;
<div style="font-size:9px;text-align:right;">Blogumulus by <a href='http://www.roytanck.com/' target='_blank'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com' target='_blank'>Amanda Fazani</a></div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Para quem quiser baixar o arquivo da nuvem, para hospedar em seu próprio servidor, basta clicar no botão abaixo e substituir o link da parte que foi destacada em vermelho.

As partes que estão destacadas com alguma cor no código acima, são as partes que você pode alterar. Então vamos explicar o que cada uma faz:

• Em azul: você pode mudar os valores de “width” e “height” (largura e altura, respectivamente) para aumentar ou diminuir a área da nuvem de tags - aconselho que você mantenha o valor de width em 100%, assim a nuvem de tags se ajustará automaticamente à largura da sua sidebar (barra lateral);
• Em laranja: coloque o código hexadecimal da cor que você quer como plano de fundo - o valor #FFFFFF se refere a cor branca;
• Em rosa: coloque também o código hexadecimal de uma cor que você queira para as tags - sem o caractere “#”, o valor 000000 se refere a cor preta;
• Em roxo: você pode alterar o tamanho da fonte das tags.

6. Depois de configurar o código do jeito que você quer, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Está pronto! Agora basta acessar a página inicial do seu blog e verificar se a nuvem de tags está aparecendo corretamente.

Site de origem: El Escaparate De Rosa e Oloblogger.

Atualização — 19.08.2011 às 09h50
O artigo foi atualizado para refletir as recentes mudanças realizadas no painel de controle da plataforma Blogger.

Devo informar também, nesta atualização, que o blog El Escaparate de Rosa, que foi citado no artigo, não está mais no ar, pois a nossa querida amiga, Rosa Torre, dona do blog supracitado,faleceu.

Boa Dica... Compartilhando conhecimento.