Assim que fica a nuvem de tags
Uma nuvem de marcadores 3d é um efeito bonito e facil, você deve ter visto já aqui mesmo na sidebar no Noticia e blog então vamos aprender a fazer uma no seu blog, lembrando que antes de tudo isso é legal fazer um backup do seu template pois se alguma coisa der errado você pode reverter facilmente.Vamos começar:
1.Faça login no blogger
2.Vá em layout » Elementos da página » Adicionar um Gadget » Marcadores
3.Após adicionar um marcador vá para layout » Editar Html
4.Clique em expandir modelo Expandir modelos de widgets e usando as teclas CRTL e F procure pelo nome que você deu ao seu marcador se foi categorias pesquise esse nome se foi marcador pesquise marcador após encontrar você verá um código parecido com esse:
<b:widget id='Label1' locked='false' title='Categorias' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><img src='http://i32.tinypic.com/241wktu.jpg'/><data:title/></h2> </b:if> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:if cond='data:display == "list"'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='"label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
5.Agora substitua tudo que está entre <b:includable id='main'> e </b:widget> por esse código abaixo:<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<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>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
6. Lembrando que o código acima já contém o <b:includable id='main'> e </b:widget> então cuidado para não repetir o mesmo código<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<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>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
7. width="250" height="200" deve ser alterado de acordo com a largura e altura do seu template para que perfeito
8.Visualize para ver se deu tudo certo e Salve as alterações.
A postagem original pode ser vista aqui mas como ela foi adaptada para o blogger pode não dar certo o tutorial desse site.
41 Comentários
Eu acho que a única coisa que falsa neste blog são imagens de como fica o HTML/JavaScript depois de pronto. Colocando isso o blog fica perfeito!
@Anônimo Obrigado pela sugestão de hoje em diante irei colocar.
Isso aqui é demais! Ficou perfeito no meu blog. Esse é o melhor site de dicas pra Blogger que eu já encontrei! Parabéns
Parabéns! ficou perfeito!... entrei num site adpatado do wordpress e tinha esta nuvem de tag... e pensei: quero ter um desses no meu blog... porem... uso o blogger... aí pesquisando... cheguei aqui... e menos de 2 minutos ja tinha uma nuvem igual... hehehe... vou fuçar mais um pouco por aqui...
eh dificil vo fazer nao
Adorei, cheguei ate a trocar a cor do fundo e das letras. O visual é manero mas não esta funcionando como link. Gostaria que ajudasse. abs
Pô cara não estou conseguindo, faço tudo certo, mais não aparece no meu blog, fica só um quadro branco... Pode me ajudar??? me add no msn de repente pode me ajudar por lá...
wel.extreme@hotmail.com
http://celulapinheirinho.blogspot.com/
Ouu aqui no meu blog nun da nem a pau porque?? no do meu amigo deu certim mais no meu não.. ajuda? pvb.downloads@gmail.com < E-mail //\\ www.pvb-downloads.blogspot.com < Blog
No meu blog nao deu certo ... estou usando os novos modelos do blogger ... sera q só funciona nos modelos antigos ? :( queria tanto esse widget ... ajuda ai kra!!!
@tatodicastro, qual o seu blog?
http://suaphotostyle.blogspot.com/
esse é meo blog... mais ainda to montando ele, e queria coloca esse gadget :(
Apareceu no ganged o nome AManda( e só sem puerinha) desde já agradeço...poderia me dar um help....
já não funciona :-(
Consegui... é só trocar os links:
http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf
http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js
e trocar por estes:
http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf
http://sites.google.com/site/bloggerustemplatus/code/swfobject.js
espero que funcione? comigo deu certo ;-)
@SponXor, obrigado pela dica corrigi o código!
Também adorei esta ideia, tentei de tudo enquanto é jeito e só deu errado no meu... se alguém puder ajudar - http://madnesspop.blogspot.com/
valeu
Opa caras blza ??
Primeiramente parabens pelo trabalho de vc's...
Eu tentei fazer aki no blog só q só aparece é esta frase : " Blogumulus by Roy Tanck and Amanda Fazani ".
Se puder me da uma ajudinha aew...
vlw's!!
@Adolfo Leoni™
Tb apareceu assim no meu!!
Absolutamente perfeito o fórum com as explicações. SEgui o passo-a-passo e o resultado foi absolutamente incrível. Uma dúvida: o pano de fudo do marcador 3d ficou branco. Como faço para modificar a cor do pano de fundo e a cor das letras do marcador 3d?
Por gentileza, responda para o e-mail: adriano.santana4@gmail.com
Grato!
Abraço!
o engraçado que eu consigo visualizar ele em modo de VISUALIZAR TA LI LINDÃO.. mas quando eu salvo e vou para o meu Blog nada..Fica Branco, no meu Outro Blog deu certo até mudei a cor de Fundo.
POderia me ajudar ficaria muito Grata
Poderia ser porque tenho muito Titulo no Marcador ja mudei e alterei para 30 e nada
@Suelen Mello(sumello)
Tenho que verificar qual o seu blog.
Olá, como boa parte do pessoal, no meu BLOG tb apareceu td branco.
Como posso fazer a função "flash" funcionar???
Mesmo problema da @Suelen Mello(sumello), no vizualizar fica certinho, quanto salvo, nada aparece :/
Parabéns de tudo certo aqui,mas o problema é que a cor de onde fica os textos flutuando é branca,alguém sabe me dizer se dar de mudar a cor?
POsso colocar em site tb esse marcador?
@Notícia e blog
Ola como eu disse que não conseguiu isso era alguma coisa que no meu template não dava pra ver eu troquei e nesse ja da pra ver certinho.Mas decidi não por ele mais é o maximo essa Tag.. uma outra Coisa gostaria de saber se vc desse a permissão de eu colocar essa Dica no meu Blog colocando o link do seu Blog aguardo resposta.. abraços
meu blog é www.layoutdasumello.com
@KuRtIs
da para mudar a cor sim procure no código a cor branca #ffffff e altera para a desejada
Tenho um blog de testes e nesse funcionou direitinho, mas no blog de verdade mesmo, não funcionou. Acontece o mesmo q com as demais pessoas. Na visualização aparece, mas depois q salvo as modificações, só aparece um quadro em branco no blog.
www.beauteinfinie.com
binfinie@gmail.com
A cor de fundo eu consegui mudar ,mas a cor da letra não, para o meu template se ficasse como ficou o exemplo la do inicio da postagem ficaria otimo ,mas nao consegui deixar a cor da letra branca..se tiver como me da uma ajuda...darioslv75@gmail.com
Ola gostaria de agaradecer muito pelo POST.Realmente muito bom explicado passo a passo e funcionou muito bem no meu blog. podem ver http://arevistapop.blogspot.com/
Ficou demais!!! Deu certinho de primeira, porém ele não link nas tags... eu clico na palavra - por exemplo no meu caso "ilustração" - e não acontece nada... Como posso fazer funcionar? Tem q mexer na variável dentro do codigo? se puder me ajudar nessa, fico imensamente grata!!
Parabéns pelo blog =)
Fico no aguardo... =* Ma.
Claro e direto! Isso é muito bom. Parabéns!
Justamente o que eu buscava! obrigado!
Me responde uma coisa, tem com mudar a cor das tags que aparecem na nuvem de tags?
Ficou MUITO MASSA! Obrigado pela dica!
Mas surgiu um problema, quando marcamos uma tag acentuada o blogger gera um link também acentuado. Porém, o link da nuvem aparece com o caractere do acento desconfigurado dando erro no link.
Particularmente, acho muito feio corrigir isso tirando os acentos e deixando a página com erros ortográficos.
Alguém sabe de uma solução alternativa???
valeu cara suas informações são muito uteis
Legal gostei , Valeu! já ta no meu blog http://toad-news.blogspot.com/
Adorei o site, enfim consegui por o gadget no blog =D
Depois de olhar outros post percebi o que tinha de errado ^^' (isso que dá não entender de html)
Até exclui meu post de dúvida, hehehe
http://animusbook.blogspot.com/
Kra tem como mudar a cor do fundo e das letra se tivem fala ae
Pessoal eu ja sei como mudar a cordo fundo e das letras
*PARA MUDAR O FUNDO:
Procure por "bgcolor" value="# ffffff " aonde esta "ffffff" coloque o código da cor que você quer
*PARA MUDAR A COR DAS LETRAS:
Procure por"tcolor=0x000000&" aonde esta "000000" coler o codigo da cor
espero que ajude flw.
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.