Tutorial: Nuvem de tags (Cloud Tags) em flash

Postado em 24. set, 2008 por Rodrigo em Blog, Tutoriais

Atendendo a pedidos vou fazer um breve tutorial baseado no BloggerBuster. Está em inglês mas vou escrever bem resumidamente. Você pode ver um exemplo de nuvem de tags na coluna direita do Design Tecnológico.

Vamos ao tutorial:
Antes faça do backup do seu template caso haja algum problema.

Acesse o blogger e entre no html do seu blog. Procure pela linha de código abaixo.

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

Logo abaixo da linha de código acima cole o código que está abaixo.

<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;240&quot;, &quot;300&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>

Salve as alterações. Entre no blog!

Você vai perceber que o nuvem de tags vai aparecer no canto superior esquerdo do seu template. Para alterar o tamanho de fontes, cores, altura e largura, é só alterar no código.

O padrão adotado é o seguinte:
Width is set to 240px
Height is set to 300px;
Background color is white
Test color is grey
Font size is “12″

Lembrando: Esse tutorial foi feito originalmente para Worldpress, eu fiz esse tutorial em cima da adaptação feita pela autora do blog BloggerBuster. O blog é em inglês e está muito mais detalhado caso tenha alguma dúvida.

Leia também!

Tags: ,

Rodrigo – Sou o idealizador do Design Tecnológico. Formado em Sistemas de Informação e pós-graduado em Segurança. Apaixonado por tecnologia e internet. @dtecnologico
Enviar e-mail

11 Comentários to “Tutorial: Nuvem de tags (Cloud Tags) em flash”

  1. jeferson

    27. fev, 2009

    muito boa a dica, eu fiz uma pequena mudança alterando o fundo pra transparente, tentei postar aqui o codigo mas ñ foi aceito a HTML

    agora vem o problema, tomara q vc possa me ajudar, no navegador firefox ele a nuvem de tags funcionou normalmente, mas no IE ela fica estática so girando quando colocado o mouse exatamente em cima da palavra…..bem diferente do firefox onde a nuvem de tags gira mesmo quando o mouse é colocado a baixo, a cima, ou nas diagonais da palavra..

    desde ja agradeço pela atenção e aguardo ansioso pela resolução do problema

    Jeferson

    Reply to this comment

  2. Design Tecnológico

    27. fev, 2009

    Então Jeferson,
    o código aí do jeito que está funciona normal nos dois navegadores…

    Como vc deixou o fundo transparente? Só substituiu o palavra “White” por transparente?

    Quanto ao erro que está ocorrendo eu não sei resolver…

    []’s

    Reply to this comment

  3. Anonymous

    04. mar, 2009

    Obrigado pela resposta..

    Então, eu fiz desse jeito:

    param name=”wmode”value=”transparent”

    e realmente ñ funciona no navegador IE, será q pode ser um problema no HTML do próprio site??
    vou realizar alguns testes para verificar.

    Novamente obrigado pela atenção

    Jeferson

    Reply to this comment

  4. Design Tecnológico

    06. mar, 2009

    Ok amigo!
    Eu realmente também nao sei com resolver.
    Mas se conseguir é só comentar aqui…

    []’s

    Reply to this comment

  5. Anonymous

    13. mar, 2009

    Boa tarde,

    Realmente o problema estava com a HTML do próprio síte que ñ roda direito no navegador IE, quanto ao código da nuvem de tags em flash funcionou normalmente em outros sítes.

    Obrigado pela força e muito sucesso ai meu caro amigo.

    Jeferson

    Reply to this comment

  6. musicaaudio

    02. abr, 2009

    Cara. Muito bom o teu blog.
    Essa dica já usei em outro blog meu e é nota 10.
    Parabéns.

    Agora queria uma ajuda tua.
    Tava observando lá no fim da página do teu blog e achei muito legal a arrumação que vc fez Gadget – “SELOS”.
    Se querer abusar muito, teria como vc me passar como colocar no meu blog, assim, tudo arrumadinho.
    Valeu!!!!
    Sucesso!!!

    Reply to this comment

  7. wmkerz

    17. abr, 2009

    Bom tutorial.
    Mas gostaria de saber como faço para alterar o tipo de fonte utilizada no tag cloud.
    Agradeço toda boa dica.
    Valeu!
    WMK

    Reply to this comment

  8. Design Tecnológico

    17. abr, 2009

    @vmkerz
    A fonte não tem como mudar. O que pode ser alterado é o tamanho e a cor apenas.

    Mas estou vendo que seu blog é wordpress… esse tutorial só vai funcionar com a plataforma Blogger.

    []’s

    Reply to this comment

  9. William Biazoto

    22. abr, 2009

    muito bom esse seu blog parceiro !
    gostei muito dessa nuvem funcionou direitinho no meu blogspot .
    dá pra alterar o lugar também pelo gadget não precisa ser direto no html
    obrigado ,sucesso cara!
    parabéns pelo seu blog.

    Reply to this comment

  10. Eclesiartes

    26. ago, 2009

    Eu não sei o que aconteceu aqui no meu Blogger. Mas a nuvem de tags não apareceu. No lugar da nuvem apareceu apenas a mensagem: "Blogumulus by Roy Tanck and Amanda Fazani." com links para as páginas de outros Blogs.

    Reply to this comment

  11. Design Tecnológico

    26. ago, 2009

    @Eclesiartes
    Olá amigo! esse tutorial eu traduzi do Blogger Buster, pode ser algum problema momentâneo. Eu já não estou utilizando essa nuvem de tags há algum tempo aqui no blog. O link original do tuto é esse.. http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html

    Falow…
    []'s

    Reply to this comment

Responder