Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Tutoriais Blogger Vanessa S.

Marcadores com Nuvem de Tags em Flash

Os marcadores no blog facilitam a vida dos visitantes, em encontrar os conteúdos de seus artigos, de acordo com o tema.
Como vocês já devem ter percebido, o proprio blogger implantou a opção de Marcadores em formato de nuvem de tags, dando um visual bem diferente.
O mais legal neste recurso é o fato de podermos selecionar quais os marcadores deverão ser exibidos e também poder retirar a numeração, o que antes era necessário ser feito manualmente

Mesmo com todas essas novidades, ainda é possivel personalizar os marcadores de várias formas, e uma delas é transformar seus marcadores em Nuvens de tags em flash, onde as listas se movimentam e flutuam quando passa o mouse em cima.

Veja o exemplo:

Se você quiser implementar seus Marcadores em forma de Nuvem de Tags em Flash em seu blog, veja como a seguir.

Antes de mais nada, é sempre bom fazer um backup do seu Template para evitar transtornos, se algo sair errado.

Entre na aba “design” >> “editar HTML” e NÃO clique em “Expandir modelos de widgets”, e em seguida procure pela linha abaixo:


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

E cole o seguinte código ABAIXO dela:



<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'>
&lt;object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#000000" /&gt;
&lt;param name="flashvars" value="tcolor=0xffffff&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='14'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Visualize, e se estiver tudo ok, salve!

Se por acaso o código postado acima não funcionar, tente usar este outro código alternativo 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://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#000000&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0xffffff&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='14'><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>

Depois de instalado e salvo, você pode movê-lo posicionando-o onde preferir, é só mudar o gadget de marcadores de lugar, arrastando-o para onde desejar e para isso basta fazê-lo atráves do “Elementos de página”.

Vejamos agora os elementos que você pode modificar, configurando de acordo com as cores do seu template:

width = “250” height = “200” -> se refere a largura e altura da widget.Você deve alterar a “width” para o mesmo tamanho da sua sidebar.
bgcolor” value=”#000000″ -> se refere a cor do plano de fundo da widget (que neste exemplo está na cor preta)
tcolor=0xffffff -> se refere a cor do texto (no exemplo está definido como branco, se quiser alterar, basta incluir o código hexadecimal referente a cor que você deseja, logo após o “x”
style=’14’ -> se refere ao tamanho do texto (tags)

Se quiser visualizar o código em uso confira aqui, na sidebar, em “marcadores em flash”.

Dicas

Dica 1: marcadores que contem palavras acentuadas, o código não reconhece, não sei o porque.Então uma solução seria renomear as tags retirando os acentos das palavras.

Dica 2: Percebi que nas categorias de marcadores que possuem poucas postagens, quando se clica neste marcador, não aparece postagem alguma.
Por exemplo: se você possui um marcador onde só há 1 post refente a este marcador, ao clicar na tag deste marcador,a sua postagem não irá aparecer. Então uma solução seria incluir mais postagens referentes a este marcador.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

22 Comentários

  1. Tama-chan disse:

    Aquele código, sabe
    O que você disse pra procurar ><

  2. Tama-chan disse:

    eu sou a única pessoa NO MUNDO INTEIRO que não tem no HTML do blog

  3. Holtz disse:

    Clau nenhum dos codigos funcionou !

  4. Apaixonados disse:

    Poxa, que legal!

    Ótimo tutorial,muito obrigada!

    Abraços!

  5. mauro rocha disse:

    Muito bom post
    Vlw Clau

  6. FC disse:

    o nosso fica tudo preto…

  7. Last Minute disse:

    nao aparecem os marcadores no meu! só os creditos pra amanda!

  8. Victor Viana disse:

    Ow eu estava a procura disso , muito bom , vlw.

  9. shan-Tinha disse:

    oi gatinha!
    tentei a orientação d um outro site a tarde inteira a nuvem, e não consegui até q cheguei no seu e deu certo com o segundo código,
    obrigada!
    detesto desistir então posso levar um tempão mas chego lá!
    bj e + sucesso no seu blog!

  10. .:: Clau ::. disse:

    msd
    Se tem possibilidade, eu desconheço.

    Home
    Lamento,mas não tenho como ajudar.

  11. home disse:

    ola o meu não tem essa parte

  12. «O» msd «?» disse:

    A minha plataforma de template é feita através do Artister e este código não funciona nele! tem como ter a possibilidade de ter outro código que funcione nesse tipo de template? Beijos.

  13. Fabrício Romano disse:

    A hospedagem do arquivo swf caiu. Só deu certo no meu blogue depois de muita luta para encontrar o arquivo e hospedá-lo em outra sítio. Se servir, é só trocar todos os links http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf pelo seguinte endereço: http://www.fileden.com/files/2010/5/12/2857215/tagcloud.swf

  14. ::Clau:: disse:

    @Claudio Sanches:
    Me parece que o código está com algum problema de hospedagem. O jeito é tentar entrar em contato com os desenvolvedores, ou aguardar para ver se o problema será solucionado.

  15. Claudio Sanches disse:

    ele parou de funcionar, sabe como arrumar?

  16. Das disse:

    Clau, é a primeira vez que vejo esse código como algo simples e não como um bicho de sete cabeças! rsrsrs
    Faz tempo que quero colocar esse efeito, mas todas as vezes só encontro uma linguagem ou explicação tão difíceis que acabo desistindo, acredita?
    Já falei que vc é 10? rsrsrsrs

    Te adoro!
    Valeu pela ajuda de sempre!
    Bjuuuu
    dani

  17. ::Clau:: disse:

    Ashimi:
    Fico feliz em estar ajudando…obrigada pelo comentário e volte sempre que quiser!

  18. AsHiMi disse:

    Nossa muito Legal esse Ja estou usando ele no mew Blog Obrigado! Seu Blog Me ajudo Muito e esta ajudando Parabens !!!

  19. ::Clau:: disse:

    Acrescentei ao post um código alternativo, caso o 1º não funcione, basta tentar usar o 2º.
    Acabei de testar os 2 num blog de testes e deu certo!

  20. ::Clau:: disse:

    Jack:
    Eu esqueci de citar no post que se os marcadores contiverem palavras acentuadas, o código dá erro.
    Por exemplo: se vc tiver um marcador de nome: "Preferências" (a palavra é acentuada), o código não reconhece palavras acentuadas, só não sei o 'pq'..
    então a dica é que retire os acentos das palavras no marcador.
    Fica até melhor para buscadores google encontrarem seu conteudo tb…^^

  21. Jack Borges disse:

    Querida fiz tudo certo,porém quando clico em um mmarcador ele não faz o direcionamento para aquela postagem específica

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.