[Blogger - Gadgets] - Colocando uma nuvem de tags com movimento no Blogger

Olá querido leitor, recentemente o leitor Djone, entrou em contato comigo e me perguntou como adicionar uma nuvem de tags (marcadores) com efeito de movimento em um blog do Blogger. Bom, o Blogger já possui um gadget de marcadores, e este gadget contém dois modos de exibição, que são: Lista e Cloud. Apesar do gadget 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 [BLOG DESATIVADO] 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 só depois conseguir clicar nos marcadores; e, no Internet Explorer, a nuvem aparece mas não funciona quando se clica nos marcadores.

Instalando o gadget de nuvem no blog


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 para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

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

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.

3. Depois de encontrar o código citado acima, cole este outro código imediatamente abaixo 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.dropboxusercontent.com/u/17889015/Gadget-de-Nuvem-em-Movimento/tagcloud.swf" width="100%" height="280" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://dl.dropboxusercontent.com/u/17889015/Gadget-de-Nuvem-em-Movimento/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/' rel='nofollow' target='_blank'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com' rel='nofollow' target='_blank'>Amanda Fazani</a></div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


Caso você queira baixar o arquivo da nuvem para hospedar em seu próprio servidor, basta clicar nesse link, aguardar 5 segundos, e clicar na mensagem "Fechar Propaganda", no canto direito superior da tela. Ao clicar na imagem, você será direcionado para a página do download, aonde poderá baixar o arquivo. Depois de hospedá-lo no local de sua preferência, substitua a parte que foi destacada em vermelho pelo novo endereço do arquivo. 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 vermelho: link do arquivo responsável por gerar o efeito de movimento;
  • 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 verde: 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.

4. Depois de configurar o código do jeito que você quer, clique no botão Visualizar modelo 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 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.

Atualização — 08.07.2013 às 23h30
O endereço do arquivo .swf foi alterado, podendo causar o sumiço da nuvem de tags em alguns blogs. Caso a sua nuvem de tags tenha sumido, refaço o tutorial para instalá-la novamente, e verifique se ela volta a aparecer. Para evitar futuros problemas como esse, aconselho que faça o download do arquivo e hospede-o em um local de sua preferência.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 36 comentários neste artigo!

  1. E ai Igor!!!
    Seguinte cara, fiz exatamente como está acima e não deu certo, sabe o que pode ser? Dê uma olhada como ficou no meu blog (http://www.celulapinheirinho.co.cc/).
    Fico aguardando novas intruções... Valeu...

    ResponderExcluir
  2. " wel ": visitei seu blog e olhei seu código fonte para comparar com o script do meu blog de testes.

    E, realmente, você instalo o script de maneira correta. O que está causando o problema é a tag: Aniversário "wel".

    Aconselho que você remova as aspas da tag ou mude para algo como: Aniversário do wel.

    Aproveito para avisar que adicionei os passos 11 e 12 ao tutorial, que são detalhes que eu havia esquecido de mencionar, então certifique-se que seu site no Google Sites está configurado como nestes dois passos que foram adicionados.

    Outra dica que te dou, é mudar a cor no código do script de #FFFFFF - que faz referência a cor branca - para a cor #F3FBEA, que é a mesma cor do fundo do seu blog, desta forma a nivem de tags se encaxaria melhor no seu blog.

    Espero que isso resolva o problema.
    Qualquer dúvida, entre em contato novamente.

    ResponderExcluir
  3. Fala Igor!!!

    Cara, antes de mais nada quero agracer pela ajuda, a nuvem de tag 3D já está visível em meu blog. Mas ainda preciso da sua ajuda, rsrsrs... Pois quando se dá uma click em qualquer marcador da nuvem, ele não leva à pagina, ou seja, simplismente não acontece nada,embora aparecça a mãozinha. Porque está assim? quando entrar em meu blog novamente, note que adicionei mais uma marcador (TODAS POSTAGENS), está na forma de lista na coluna direita, e funciona perfeitamente, já a nuvem de tag 3D não. Aguardo sua ajuda novamente...

    http://www.celulapinheirinho.co.cc/

    Abraço...

    ResponderExcluir
  4. " wel ": eu não consegui ver a nuvem de tags no seu blog. Verifique se a sua conta do Google Sites está configura conforme os passos 11 e 12 do tutorial.

    Caso contrário, só você poderá ver a nuvem de tags.

    ResponderExcluir
  5. MUITO OBRIGADO !.
    Fui ensinar uma galerinha a fazer isso(nuvem de tags), mas o blogger mudou e do jeito antigo eu não conseguia mais...

    ...Muito obrigado mesmo !

    Eduardo

    ResponderExcluir
  6. Cara, muito obrigado mesmo, tentei fazer isso em inúmeros sites e nenhum deu certo...

    E percebi que eles não estavam explicando direito, pois aqui encontrei a informação correta..

    Muito obrigado.. eu não conhecia esse site, agora não vou sair daqui...
    Valeu

    ResponderExcluir
  7. Olá, Igor.

    Eu segui o passo a passo e inicialmente deu certo, mas a nuvem só está aparecendo quando estou logado no Google. Interessante que o site que criei está "Compartilhado com os usuários de todo o mundo".

    Veja a página onde gravei o arquivo: https://sites.google.com/site/romuloprovetti/tags

    Meu blog é este: www.viagemdemoto.com

    Abraços

    ResponderExcluir
  8. viagemdemoto.com: atualizei o artigo de modo que não seja mais necessário hospedar o arquivo no Google Sites, coloquei o arquivo no meu servidor e ele ficará disponível para ser usado pelos usuários. Refaça o tutorial, ou apenas substitua o link do arquivo .swf e veja se o problema é resolvido, caso contrário entre em contato novamente!

    ResponderExcluir
  9. Oi de novo, Igor. Vou te dar mais trabalho. Fiz as alterações, ele agora está aparecendo, só que quando clicamos nos links ele não direciona para as páginas.

    O que pode ser desta vez?

    Abraços

    ResponderExcluir
  10. Igor, observei que está funcionando no Chrome e não está no Explorer.

    ResponderExcluir
  11. viagemdemoto.com: eu visitei o seu blog utilizando os navegadores: Firefox, Google Chrome e Opera e, em todos eles a nuvem está funcionando corretamente e abrindo os links normalmente - lembrando que os links não abrirão as páginas dos artigos, mas sim uma página que mostrará todos os artigos que tenham o marcador que foi escolhido, cabendo ao leitor clicar no título do artigo para abrí-lo. Já no Internet Explorer, a nuvem aparece, mas não é possível clicar nos links, sendo assim... este hack não funciona totalmente no Internet Explorer. Adicionarei uma nota no artigo! Agradeço as visitas, volte sempre! Abraços.

    ResponderExcluir
  12. Olá Igor,
    eu coloquei ele no meu site mas ai fica um espaço em branco grande +ou- do tamanho qe ia ficar e embaixo escrito os créditos mas não aparece a nuvem de tags porqe ?

    ResponderExcluir
  13. Olá Renan, eu visitei os blogs que estão no seu perfil do Blogger, e em nenhum deles eu encontrei a nuvem de tags com efeito de movimento instalada. Tenha certeza de não alterar nada que não foi pedido no código do passo 5, e se o problema persiste entre em contato novamente informando o endereço do blog onde ele está ocorrendo.

    ResponderExcluir
  14. Oi, nao achei os codigos no meu html, quero colocar so o movimento

    ResponderExcluir
  15. Brasil games: como eu citei no passo 4, você deve substituir a palavra “right” pela palavra “left” antes de procurar o código, pois sua barra lateral está à esquerda do seu blog! Você deve procurar pelo código:
    <b:section-contents id='sidebar-left-1'>
    Depois é só seguir o passo 5 normalmente. Espero que isto lhe ajude. Abraços.

    ResponderExcluir
  16. Quando eu clico no mercador da nuvem de tags, n vai pra página>>
    aguardo resposta

    ResponderExcluir
  17. Diego: não encontrei a nuvem de tags em nenhum dos seus blogs.

    ResponderExcluir
  18. Eu coloquei a nuvem de tags e deu tudo certo por um dia, aí quando eu entrei hoje, tinha sumido. O negocio ainda ta lá mas não aparece nada, nem quando eu tento ver o código fonte. O que aconteceu? Já tentei colocar de novo, mas não dá fica do msm jeito.
    Aguardo resposta. Obrigada!

    ResponderExcluir
  19. Bella: isto pode ter acontecido pelo fato de o arquivo que gera a nuvem estar hospedado no meu servidor, e recentemente meu servidor ficou indisponível por um tempo, adicionei um link para baixar o arquivo abaixo do passo 5, aconselho que você salve-o e hospede-o no seu próprio servidor. Se o problema ainda persiste, informe o endereço do seu blog.

    ResponderExcluir
  20. Caraca manoooo tu merece um bejo na boca por isso....
    Muito manero..bom mesmo...
    Brigado aí..

    ResponderExcluir
  21. Legal.Deu certo! A algum tempo estava procurando este gadget.

    ResponderExcluir
  22. quando o marcador possui acento gráfico o link não funciona, mostra caractere estranho no lugar e nao abre.

    ResponderExcluir
  23. Anderson: você está correto, e infelizmente não há como mudar isso, a única precaução é não utilizar marcadores com acentos.

    ResponderExcluir
  24. Nossaaaaaa! muito mais muito muitissimo obrigada, andei por blogs, e mais blogs, a procura dessa nuvem e nunca encontrava e se encontrava não funcionava...

    Agradecida!

    ResponderExcluir
  25. Olá Igor,

    Nossa tenho paixão por esse efeito, mais definitivamente não consegui fazer! Tenho marcadores no meu blog, mais não achei os códigos 1 e 2. Vi sua atenção toda com todos os usuários e me deu coragem de pedir para fazer para mim caso tope! O link do meu blog vai estar aí junto ao meu comentário, inclusive já deixei todos os marcadores que quero que aparece na nuvem. Caso tope tem meus dados no blog
    Tomara que tope =)
    Aguardo seu retorno!
    Beijocas

    ResponderExcluir
    Respostas
    1. Olá Andréa, ao visitar seu blog pude ver que já conseguiu instalar a nuvem de tags em seu blog. Qualquer coisa entre em contato novamente! Volte sempre, beijos.

      Excluir
  26. Olá, muito bom seu blog e post. Usei a nuvem de tags 3d no meu blog de testes e funcionou com as 3 únicas tags que tinha lá, mas quando fui tentar fazer o mesmo no blog original (que possui algo em torno de 300 tags) a imagem fica vazia. É por causa da quantidade alta de tags?

    ResponderExcluir
    Respostas
    1. Olá Kenji, que bom que gostou do blog e do artigo, espero continuar agradando! Quanto a sua dúvida, eu não creio que seja por causa da quantidade de tags, pois já vi blogs com uma alta quantidade de marcadores utilizando esse hack, tantos marcadores que era quase impossível lê-los ou seleciona-los. Tome cuidado para não usar caracteres especiais nos seus marcadores. Se o problema persistir, por favor, instale a nuvem e informe o endereço do blog, para que eu possa tentar encontrar o problema. Agradeço a visita e o comentário.

      Excluir
  27. Respostas
    1. Blog Cultura Alternativa, ao acessar o seu blog eu não encontrei o gadget de nuvem. Caso tente instalá-lo de novo, e ele não apareça, entre em contato novamente.

      Excluir
  28. Ficou lindo no meu Blog. Obrigada pela ajuda!

    ResponderExcluir