Tag Cloud: Como Colocar uma Nuvem de Tags no seu Blog



Tag Cloud: Como Colocar uma Nuvem de Tags no seu Blog 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". :P

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;0×333333&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 0×333333 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!

Se quiser ver a Tag Cloud instalada e funcionando clique aqui e confira na sidebar do BABEL.com! ;)

Faça bom uso!

Tags: ,

Postado por Tico Esteves. Quarta-feira, 17 de Fevereiro de 2010

Tico Esteves

Webdesigner freelancer, criador e Webmaster responsável pelo bom funcionamento do Novo na Rede. Saiba mais!

Gostou? Então deixe seu comentário e/ou assine o Feed (rss) do blog.

34 Comentários em “Tag Cloud: Como Colocar uma Nuvem de Tags no seu Blog”

  1. [...] Tag Cloud: Como Colocar uma Nuvem de Tags no seu Blog Hoje a dica é simples, mas exige atenção e [...]

  2. Como faço para colocar essa nuvem de tag se ser no tema do novo blogger ?
    è possivel usar apenas html e anexar onde quizer ? pois com esse codgo ai nao consegui colocar na coluna lateral do meu blog.
    Obrigado

  3. Olá Robson, tudo bem?

    Olha, sinceramente não sei te dizer porque nunca tentei fazer isso antes. Eu sei que funciona no Blogger porque eu já instalei várias.

    Sinto não poder ajudar, mas realmente eu nunca tentei fazer do jeito que você quer.

    Um abraço e obrigado pelo comentário!

  4. nossa! nem tento fazer isso porque sei que vou acabar fazendo besteira….
    prefiro chamar um “entendido” para arrumar meu blog….
    abs

  5. Oi Ana,

    Não é tão difícil quanto parece (ou assustador), mas o ideal mesmo é você criar um blog de testes para fazer as alterações que quiser, sem medo de estragar o seu blog.

    Quanto ao “entendido”, estamos a sua disposição! :D

    Grande abraço e muito obrigado pela força de sempre!

  6. Parabéns pela dica, ótima para quem está começando a mexer com o Blog.

    Abraços.

  7. Que bom que você gostou Bruno!

    Obrigado pelo comentário!

    Abraços!

  8. olga:

    Olá! deu tudo certo, até um certo ponto: salvei no meu blog de teste e apareceu do jeito que precisa, mudei as cores e tal. Mas achei que o tamanho (300×240) ultrapassa um pouquinho na largura e resolvi mudar a medida. Nossa, o código não está mais lá! sumiu, por que?
    Como não entendo dessas coisas, fiquei com receio e por isso estou reportando aqui…
    Será que tem que inserir novamente?
    obrigada

  9. Olá Olga, seja bem-vinda!

    O que acontece com esse script é que você tem que fazer todas as alterações que quiser antes de salvar, porque se salvar e depois tentar alterar, pode acontecer o que te aconteceu (sumir tudo), aí você tem que fazer tudo outra vez. É raro, mas acontece, infelizmente.

    Não adianta nem perder seu tempo tentando entender (eu não tento mais). Isso é o que eu gosto de chamar de “coisas do Blogger”! :D

    Boa sorte e um abraço!

  10. e como
    colorida
    esta

    e a de tag fixa colorida?
    Tu sabes?

  11. Olá edilene, não entendi bem o que você quis dizer, se puder se explicar melhor eu posso tentar te ajudar ok?

    Um abraço!

  12. Oi, Tico! Bom dia!

    Estava tentando colocar no nosso Blog, e infelizmente não consegui,quando tento salvar informa o seguinte…

    “Não foi Possível Analisar o seu modelo, pois sua formatação é inadequada. Certifique-Se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: A instrução de processamento deve começar com o nome do alvo.”

    … como entendo muito pouco… Tens alguma sugestão?

  13. Oi Elisete, bom dia!

    Olha só, o problema é que o WordPress está com um bug onde ele troca as aspas simples por acentos agudos. Então para que a nuvem funcione, você tem que trocar manualmente os acentos por aspas.

    Uma boa é copiar o código para o bloco de notas e fazer as substituições e depois seguir o tutorial.

    Sinto pelo inconveniente, mas é o jeito. :(

    Um abraço e obrigado pelo comentário!

  14. Eu que agradeço por retornar!

    Entendo, Tico, mas não uso o WordPress, e sim o Blogger… http://elisetexns.blogspot.com/

    Se tiver outra sugestão, fico grata!

    Boa noite! Abraço!

  15. Olá Elisete, eu não quis dizer que você usa o WordPress, disse que o WordPress está com um bug nas aspas (aqui no Novo usamos o WordPress). E essa tag cloud é para o Blogger mesmo, mas tem que corrigir as aspas ok?

    Um abraço!

  16. [...] Exibir (2): Se você marcar a opção Lista, você terá a nossa lista de categorias normal. Agora, se você marcar a opção Cloud, você cria um tipo de nuvem de tags, mas só que estática. Não uma nuvem de tags flutuante como já aprendemos aqui. [...]

  17. nao tem como faze um dessas pro wordpress?

  18. Olá Daniela, tudo bem?

    Tem sim, eu indiquei no texto o plugin WP-Cumulus (em Dica 1). É só instalar!

    Um abraço e obrigado pelo comentário!

  19. Olá, Tico!
    Eu tinha essa nuvem de tags funcionando normalmente a mais de 6 meses no meu blog e do nada ela sumiu e deu lugar ao link dos autores, ou seja: Blogumulus by Roy Tanck and Amanda Fazani.
    O que será que aconteceu????
    Se for possível enviar a resposta para meu e-mail, eu agradeço.
    Um abraço.

  20. Onde que instala o plugins???

    obrigada por responde!!! beijos

  21. tico, o mesmo problema que o PASTORAGENTE esta tendo eu tb estou tendo de repente não esta funcionando mais só aparece os links dos autores

    Se for possível enviar a resposta para meu e-mail, eu agradeço.
    Um abraço.

  22. Daniela, aqui tem um tutorial ensinando a instalar plugins no WordPress do blog Plugin Mania:

    Como instalar plugins no WordPress: tutorial para iniciantes

    Pessoal, o fato de não aparecer a nuvem e só os nomes dos autores é porque o script falha onde ele está hospedado. Não tem o que fazer sobre isso. O máximo é você tentar baixar o script (eu não tenho aqui) e hospedar por conta própria.

  23. Olá Tico Esteves.
    eu tenho video musica e jogo no meu blog e eu botei um menu no meu blog só q no meu blog fica video musica e jogo aberto pra todas as pessoas só q eu ñ qro assim eu qro q as pessoas cliquem no menu em oq elas qrem ver e vejam só q eu ñ sei fazer isso.
    Resumindo:Eu qro organizar os meus arquivos do blog,eu qero botar video no lugar de video, musica no lugar de musica,jogo no lugar de jogo.
    eu qro assim q fique todos os arquivos separados um do outo no menu.
    vlw, vê se vc pode me ajudar a organizar meus videos,musicas e jogos ta.
    caso vc qeira vêr o meu blog o site é: http://www.thadeu-viana.blogspot.com.
    xau…

  24. Olá Thadeu, tudo bem?

    Olha só, infelizmente o que você quer é um trabalho grande e não tenho como te ajudar assim. Você pode pedir um orçamento e contratar os serviços da Linketal.com para isso ok?

    Clique: Linketal.com

  25. Onde que coloca os plugins??
    nao acho no painel!!!!!!!!!!!

  26. Oi!

    olha, eu tentei, tentei e não consegui!
    fiz tudo o que vc pediu!
    que raiva!
    faz tempo que eu quero essa nuvem no meu blog e nada…
    eu tenho umas duvidas tbm.
    1º: os nomes dos tags eu coloco depois? como?
    2º: o primeiro url ()…. eu faço o que com ele? Copio e colo no começo?
    desde já obrigado pela ‘dica’.

    :/

  27. Daniela e Eduardo, as tags são colocadas na edição da postagem (no campo marcadores).

    Eduardo, leia os outros comentários!

    O WordPress está substituindo aspas simples por acentos, por isso está dando erro. Faça a troca que vai funcionar! ;)

  28. ja tentei de tudo
    li TODOS os comentarios!

    troquei os acentos pelas aspas, as aspas pelos acentos, sei lá.
    aparece isso: Blogumulus by Roy Tanck and Amanda Fazani

    :@

  29. O que eu faço, apareceu isso ó :

    Não foi possível salvar o modelo

    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “id”

  30. Oi Tico , me ajuda, fui adcionar a nuvem de tag e deu esse erro..Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “id”.sera que vc pode me ajudar?

    brigada!!

  31. Não consigo achar. Ctrl+f e não encontra. Pode me ajudar?

  32. Olá Sérgio, tudo bem?

    Se você não consegue achar, clique na caixinha “expandir modelos de widget” e procure por id=’sidebar’ que não tem erro.

    Um abraço e boa sorte!

  33. Olá,tudo bom?
    Bacana a atenção que vc tem dado,mas quando vou editar o HTML, eu não encontro essa parte:

    Nem quando eu clico em “expandir modelos de widget” … não pode estar diferente não?
    Uso o novo Blogger

  34. Oi Thaynara, tudo bem?

    Olha só, sinceramente, quando testei essa dica para publicar o tutorial funcionou direitinho e eu já usava o novo Blogger. Então não sei o que pode ser. A única coisa que posso fazer é assim que tiver um tempo fazer alguns testes, mas vai demorar um pouquinho. Desculpe!

    Um abraço, obrigado por participar e desculpe por não poder ajudar!

Deixe seu comentário

Quer mostrar sua imagem ao lado do seu nome nos comentários? Saiba como clicando aqui!