A carregar...



Tag Cloud / Nuvem de Tags em Flash


Se quiser colocar no seu site uma Tag Cloud / Nuvem de Tags em Flash como aquela que apresento no rodapé deste blog, basta seguir os passos que indico a seguir.
No meu caso, a tag não é muito funcional porque o meu blog tem muitas tags, mas para um blog melhor organizado, com menos tags/labels, o efeito é espectacular: Ela roda, na horizontal e na vertical, quando colocamos o rato sobre ela.
De referir ainda que este widget é customizável no tamanho da letra usada, na cor do fundo e da letra, bem como no próprio tamanho da Nuvem que pode ser usada em qualquer local do blog, como, por exemplo, na barra lateral.
Então vamos lá:


1. Comece por editar o código html do seu blog (não é preciso expandir o código dos widgets;
2. Procure a linha que contém:
<b:section class='sidebar' id='sidebar' preferred='yes'>
3. Logo abaixo dessa linha coloque o seguinte código:








<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>



</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>








4. Já está. A Nuvem de Tags aparecerá na sua barra lateral.
5. Se quiser colocá-la noutro qualquer sítio do seu blog, bastará ir ao seu Painel de Controlo >> Esquema >> Elementos de Página
e arrastá-la para esse outro local, como eu fiz arrastando-a para o rodapé.
6. Para customizar a nuvem, nos parâmetros que indiquei no início deste artigo, consulte o blogger buster, em http://www.bloggerbuster.com/2008/09/alternative-installation-for-blogumus.html, de onde tirei este widget.
Boa sorte!








                         


Mensagens relacionadas (por Tags)







19 Comentárioa


Andrio disse...

Achei super Legal a nuvem !! Pena que não estou conseguindo colocar no meu !! Mais valeu a Dica ! Valeww !

luisj disse...

Olá Andrio.
Pode ser mais específico?
Não esqueça que o blogger não aceita javascript nos posts. Tem de colocar a nuvem na barra lateral, no header, no footer, ... nunca nos posts.
Diga mais qualquer coisa. Se eu puder ajudar...

Joyce Castello disse...

Poxa, também não consegui!!
Coloquei no HTML, como você disse, mas deu erro!!

luisj disse...

Tente pôr, abaixo de

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

o seguinte código:

<b:widget id='Label2' locked='false' title='Nuvem de Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<center>
&lt;object type=&quot;application/x-shockwave-flash&quot; data=&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot; width=&quot;300&quot; height=&quot;300&quot; allowscriptaccess=&quot;always&quot; &gt;
&lt;param name=&quot;movie&quot; value=&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot; /&gt;
&lt;param name=&quot;bgcolor&quot; value=&quot;#ffffff&quot; /&gt;
&lt;param name=&quot;flashvars&quot; value=&quot;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='8'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;&quot; /&gt;
&lt;p&gt;Blogumulus by &lt;a href=&#39;http://www.roytanck.com/&#39;&gt;Roy Tanck&lt;/a&gt; and &lt;a href=&#39;http://www.bloggerbuster.com&#39;&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</center>

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>


A nuvem de tags deve aparecer-lhe na barra lateral. Depois, no seu painel de comando >>Esquema >> Elementos de Página, pode arrastá-lo para outro lugar do blog que queira.
As dimensões também é só alterar no código, em Width e Height.

Comigo deu. Veja em http://cpeacomandoesas.blogspot.com

Boa sorte!
Luis J.

Daniel Ignacio disse...

nem sei o que houve mas nao funcionou

A. Ilha disse...

Muito grata!

Davi Luiz disse...

Olá, gostaria de saber, como mudar a cor da fonte na nuvem, pois meu blog é preto com fontes brancas, gostaria que a núvem tb fosse assim.
A cor de fundo eu consegui mudar, agora preciso mudar a cor do texto.
Se puderem ajudar???

Unknown disse...

Olá Davi, obrigado pelo comentário.
Respondendo à sua pergunta:
Pode alterar a cor do texto alterando o valor em
tcolor=0x000000
em vez de 000000 (preto), pode colocar outro código de cor que pretenda.
Para escolher côr/código de cor pode usar este site, que é muito útil:
http://allprofitallfree.com/color-wheel2.html
Diga se conseguiu.
Cumprimentos.

Marcos Abelha disse...

Dá pra colocar no windows live spaces???
Com o codigo postado aqui nao foi possivel!!

luisj disse...

Pronto Marcos.
Todo o html, à data de hoje, está no ficheiro que pus no live spaces.
Pode descarregar e procurar pelo dito código.
http://xr7gaw.bay.livefilestore.com/y1pItqvBjlTPqu2iHFRi2VZdNqaAP8sZ6o7azKfMF6Kf1Duu1cTh9LKf64fXZK3XsYES0BfkIOEpQbGT5oInWGLuA/htmlWEB20.txt

luisj disse...

Queria dizer: 'Todo o html do meu blog, à data de hoje...'

Manu disse...

Obrigada!
Ficou ótimo!

luisj disse...

De nada!
Sempre ao dispor.
Abraços.

Dany disse...

olá!
mt bom o post!
consegui colocar sem problema, mas nao fica com as hiperligaçoes nas letras..

isto serve para ficar hiperlik..
podem me dizer como ponho ela ir para as etiquetas?

luisj disse...

Sim Dany, deve ficar com hoperlinks.
Apenas com esses dados não sei como ajudá-lo.
Experimente repetir todo o processo com muito cuidado. Leia também os comentários (acima) ao post.
Espero que resulte a 100%
Abraço.

Danny disse...

ola de novo obrigado pela resposta...

eu pus o codigo tal e qual diz ai.. so mudei as cores.. mas quando clico nas letras ela nao abre as etiquetas.. tem aqui o meu blog para ver que nao funciona..

http://downloads-infaliveis.blogspot.com/

luisj disse...

Dany,
eu fui ao seu blog e está a funcionar!
Que browser usa?
Eu uso o Firefox.
Ou então terá o seu browser "bem" configurado?
Aceitar Java, JavaScripts, etc.?
Pode ser disso...

Dannyflp disse...

ahh

deve ser disso mesmo..
neste pc tou a usar IE

hehe

desculpa, e continue o bom trabalho ;) =D

°•·.๓คятค disse...

Eu já tentei com os dois códigos, mas aparece-me sempre um quadro branco e nada mais.
Como poderei resolver o problema?

Enviar um comentário