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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "100%", "210", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
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>
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!
Pingback: Tag Cloud: Como Colocar uma Nuvem de Tags no seu Blog – nuvem
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
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!
nossa! nem tento fazer isso porque sei que vou acabar fazendo besteira….
prefiro chamar um “entendido” para arrumar meu blog….
abs
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!
Grande abraço e muito obrigado pela força de sempre!
Parabéns pela dica, ótima para quem está começando a mexer com o Blog.
Abraços.
Que bom que você gostou Bruno!
Obrigado pelo comentário!
Abraços!
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
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”!
Boa sorte e um abraço!
e como
colorida
esta
e a de tag fixa colorida?
Tu sabes?
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!
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?
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!
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!
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!
Pingback: Colocar Categorias no Blogger/Blogspot
nao tem como faze um dessas pro wordpress?
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!
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.
Onde que instala o plugins???
obrigada por responde!!! beijos
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.
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.
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…
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
Onde que coloca os plugins??
nao acho no painel!!!!!!!!!!!
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’.
:/
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!
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
:@
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”
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!!
Não consigo achar. Ctrl+f e não encontra. Pode me ajudar?
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!
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
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!
Estou com o mesmo problema da Thaynara, mesmo quando vou em expandir modelos de widget não acho esse trecho do html, eu uso o novo blogger e achava que esse era o problema, Eu queria muuuuuuuuuuuito colocar essa nuvem, achei super legal desde quando vi num blog do wordpress, mas o blogger tem uma alternativa, não é lá muito bonita, mas quebra um galho é a Label Sphere. Vc vai em adicionas gadget, aí la em cima vc pesquisa: Label Sphere aí pronto vc adiciona como um gadget comum mesmo. Se alguem descobrir como fazer para colocar essa nuvem estilo wordpress please me avisem
Olá Tico !
bom tutorial mas e quem usa o blogger antigo, como faz pra por essa tag cloud ?
cara eu queria saber como eu troco o nome dos labels ali
eu fiz um com o nome “Google e queria colocar navegadores”
mais ai naum sei como trocar o nome
obg se conceguir me ajudar
abraço Wéliton
http://welitonspeed.blogspot.com/
Tico,
Adorei seu blog, tinha muitas dúvidas em alguns temas e consegui resolver.
Quanto a “nuvem”, também não consigo localizar o texto que vc colocou… uso o novo blogger também, no antigo (tenho um blog antigo q não uso), fiz o teste e localizo o texto.
Se puder ajudar.
Valeu!
Nossa, o post que te enviei agora mesmo saiu todo truncado, pois te copiei os “trechos” que deram erro e eles não apareceram no post.
Enfim, o trecho que vc pede para localizar na estrutura do meu blog não encontrei. Já fiz uma varredura e achei um parecido e qd eu colei deu erro.
Enfim, queria muito colocar a Nuvem de Tags, se vc puder me ajude.
Obrigada.
Olá! Não consegui, está dando erro, etc!” 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”. ”
como eu faço??????
Obrigada
Olá!
Quando procuro pelo trecho não encontro nada. Olhei tudo e realmente esse trecho não aparece. Como devo proceder nesse caso?
Obrigada por enquanto!
Lygia
Oi Tico,
Eu também não consigo achar nenhum dos dois trechos que você citou, quendo coloco ctrl+f, tenho a resposta de que a frase não foi encontrada. Serà que vc pode me ajudar?
Obrigada
Pessoal,
Estou corrigindo aos poucos alguns dos tutoriais do Novo na Rede, já que a grande maioria deles foi escrito antes da última atualização do Blogger (os novos modelos de layout personalizados).
Para quem não está conseguindo implantar a nuvem, mesmo mudando os acentos por aspas, peço desculpas e vou tentar arrumar isso o mais rápido possível ok? (são muitos tutoriais para testar e pouco tempo disponível para fazer isso).
Grande abraço e agradeço a compreensão de todos!
Olá, eu gostaria de saber uma coisinha! É que tipo, eu vou lá coloca o código e tudo, mais quando clico em visualizar a página aparece com erro e tudo mais, então o que devo fazer? Salvar mesmo assim?!
Seu prazer de compreender o seu blog. Os artigos acima é realmente extraordinário , e eu realmente gostei de ler o seu blog e os pontos que você expressa. Eu realmente gosto de aparecer de volta mais de uma base comum, posto muito mais dentro do tópico . Obrigado por compartilhar … continue escrevendo !