Nuvem de tags personalizada para o Blogger

Nuvem de tags personalizada para o Blogger

6 10 99
Nuvem de tags personalizada para o Blogger 10 6 99

Lendo o excelente blog espanhol Gem@ BLOG, descobri uma forma legal de personalizar uma nuvem de tags (também chamada de nuvem de etiquetas ou tag cloud) para o Blogger/Blogspot. Como no Blogger em português as etiquetas são chamadas de marcadores, utilizarei esse termo na tradução do tutorial.

Entre no html do template e, usando os comandos Crtl+F do seu teclado, procure pela linha ]]></b:skin>. Cole ANTES dela o seguinte código:

.nuvem-html {

border: 1px solid #333;

background: url('url-imagem de fundo') repeat;

margin: 10px 0 10px 0;

line-height: 30px;

text-align: center;

padding: 2px;

padding-top: 10px;

}

.nuvem-html a {

text-decoration: none;

}

.nuvem-html a:hover {

border-bottom: 1px dashed #ccc;

}

Visualize o template e se tudo estiver bem, salve. Agora vá em elementos de página e escolha um gadget do tipo html/javascript. Cole o seguinte código:

<div class="nuvem-html">

<a style="color:#9b2230; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#000000; font-size: 14px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 42px;" href="#">TEXTO</a>

<a style="color:#999999; font-size:17px;" href="#">TEXTO</a>

</div>

Insira quantas linhas forem necessárias e faça as respectivas alterações.

color é a cor da fonte

font-size é o tamanho da fonte

“#” é a url do marcador

TEXTO é nome do marcador

Para obter a url do marcador, coloque o gadget padrão do Blogger na sidebar e depois copie os links, colando-os no local indicado do código (“#”)

gadget marcadores

Abaixo, veremos um exemplo usado no Diário de Bordo e o resultado final.

<div class="nuvem-html">
<a style="color:#9b2230; font-size: 11px;" href="http://www.diariodebordoweblog.com/search/label/Animais">Animais</a>
<a style="color:#000000; font-size: 14px;" href="http://www.diariodebordoweblog.com/search/label/Apresenta%C3%A7%C3%A3o">Apresentação</a>
<a style="color:#940f04; font-size: 12px;" href="http://www.diariodebordoweblog.com/search/label/Bizarro">Bizarro</a>
<a style="color:#999999; font-size:17px;" href="http://www.diariodebordoweblog.com/search/label/Brasil">Brasil</a>

</div>

nuvem de tags personalizada

Para colocar uma imagem de fundo (background), altere a linha abaixo, no primeiro código, substituindo url-imagem de fundo pela url da imagem que você escolheu.

background: url('url-imagem de fundo') repeat;

código no html do template

Um site legal para buscar imagens para o background é o DESIGNM.AG. Aí está o resultado:

nuvem com plano de fundo

A tradução e publicação do tutorial foram permitidas pela autora do Gem@BLOG.

Se você chegou até aqui, mas ainda não sabe o que é um marcador e muito menos como inseri-lo em seu blog, clique aqui.

No site Tag Cloud Generator, é possível gerar uma nuvem automática; o inconveniente é que ao invés de aparecerem os marcadores, aparecerão as palavras mais usadas no blog. Eles até permitem, como segunda opção, a criação de uma nuvem personalizada, mas com a desvantagem de não podermos colocar uma imagem no plano de fundo.

tag cloud generator

tags do Dicas Blogger

Como vocês podem perceber, ando falando muito do @compulsivo :P (ops, de novo?)#euri

ATUALIZAÇÃO: Agora é possível ter uma nuvem de tags usando um widget do próprio Blogger. Saiba como, clicando aqui.

42 Comments
Comments
  1. legal, ficou muito massa, agora eu não tenho mais desculpas para não colocar uma nuvem de tags no meu blog =D

    Abraços, @blogdoloko

    ResponderExcluir
  2. Ainda gosto mais da WP-Cumulus, mas valeu estou querendo mudar ...

    Um abraço . suas dicas são 10 !

    ResponderExcluir
  3. Gostei dessa dica... mta boa..
    Existe uma maneira de "automatizar" essa nuvem. Colocando as tags mais usadas com a fonte maior?

    ResponderExcluir
  4. rcgomes, basta você aumentar o tamanho da fonte no segundo código

    ResponderExcluir
  5. Hermoso Post!
    Eu antes usava a Nuvem de tags em flash (coisa linda e pesada), ai eu passei a usar coisa simples e eficiente como essa.

    ResponderExcluir
  6. Muito boa a dica Juliana.
    Eu estava há algum tempo atrás procurando uma tag cloud decente pra colocar no blog mas não estava encontrando. AGORA, quando precisar, já sei onde achar.

    ResponderExcluir
  7. Willian, aproveitando o ensejo, vi que você tem alguns tutoriais no seu blog "Dicas, Plugins e Templates" provenientes de outros blogs. Apesar de ter citado a fonte, é de bom tom linká-la também. Abraços

    ResponderExcluir
  8. Oi Jú tudo bem?
    Maneiro está dica, à algum tempo venho realizando pesquisa em sites/blogs brasileiros mais sempre que encontrava, era nuven de palavras usadas e assim por diante...
    Parabéns e mto obrigado por nos ajudar a blogar...
    [In]Commun

    ResponderExcluir
  9. Oi Ju, "Ótemo" esse seu artigo, apesar de ainda meio debilitado, não poderia me furtar de elogiá-la por mais uma dica interessante para blogues, não vou usá-lo por que estou mais para retirar, do que colocar alguma coisa no meu blog, que já anda muito carregado. Mesmo assim valeu pela dica!

    ResponderExcluir
  10. oi ju! cheguei agora aqui no seu blog. mas jaja vou 'engoli-lo' rs
    me diz uam coisa.. eu era ha época q blogs eram eito só com html..
    agor afui tentar fazer um template e quando cheguei,v i os codigos todos doidos...
    onde fica o html, com toda essa historia de widgets?
    todo lugar que eu coloco codigo html, ele nao aceita!
    e pra usar o 'padrão' html, eu perco ahistoria de marcadores e bla bla bla...
    será q vc pode me ajudar?
    bjinhos

    ResponderExcluir
  11. Bah Ju!!! Eu procurava isso a muito tempo!!!

    Muito obrigado!

    ResponderExcluir
  12. Juliana;
    Você sabe como fazer uma nuvem de tags animada? Não sei explicar muito bem, mais ao passar o mouse sobre a nuvem, ela começa a girar.
    Deu para entender mais ou menos?

    Obrigado.

    ResponderExcluir
  13. Nossa !!

    Adorei a sua dica,sempre quando estou com uma duvida,venho sempre aqui,e(sem duvida nenhuma)rsrs.. me sastifaço completamente.

    valew muito obrigado.

    ResponderExcluir
  14. Juliana:
    Adorei. Você sempre descobrindo novas dicas interessantes.
    Obrigada!

    ResponderExcluir
  15. Eu acho Nuvens de Tags fofas.
    Eu já uso no meu blog e por sinal eu aprendi aqui!

    ResponderExcluir
  16. Puxa... essa dica foi super legal! No blogger, infelizmente, não temos a praticidade de gerar uma nuvem de tags como no WP, mas essa sua dica facilita e muito nossa vida! A maioria das dicas que eu encontrava, eram em flash, o que pesa um pouco. Essa deve ser bem mais leve!

    Abração
    www.ricardomartiniano.com

    ResponderExcluir
  17. Oi.
    Sei que não tem nada a ver com o post, mas tava lendo as dicas e amei o jeito que você escreve. *---*
    Fiquei surpresa com o post que
    falava sobre o orkut, nossa,
    muita coisa. Adorei muito o blog,
    volto sempre que poder,
    beijos da Teena. :*

    ResponderExcluir
  18. Amei Juliana...Segui as suas Dicas direitinho...espero a sua visita!!Beijo

    ResponderExcluir
  19. Excelente dica vou primeiro melhorar meu blog depois eu coloco esta nuvem de tag,parece ser bem leve.

    Obrigado!

    ResponderExcluir
  20. Muito bom esse tutorial Juliana. Parabéns!
    Mas gostaria de saber se alguém pode me dizer como colocar uma nuvem de tags como a do site http://www.tidbits.com.br/

    Agradeço.

    ResponderExcluir
  21. Descobri este blog no Blogblogs e não largo nunca mais......rsrsrsrsr
    Coloquei a nuvem de tags no meu blog tudo as mil maravilhas, porém na hora que clica na tag não aparece nenhuma postagem abre a pagina do blog dizendo que não existem postagens.
    Não entendi. Obs, não deixei de colocar o /search/label/...

    ResponderExcluir
  22. Tinha visto este "marcador" num blog e axei que para coloca-lo fosse diretamente de widgets, mas mesmo não sendo, não é dificil de se colocar, obrigado por mais esta dica. Amo o Dicas Blogger.

    João Pedro/www.eskinadodownload.blogspot.com

    ResponderExcluir
  23. Muito legal isso simples leve pratico de se fazer

    acessem: xdestroydownloadsx.blogspot.com

    ResponderExcluir
  24. Juliana, você é pedra 90. Muito oportuno e didático, diria que o seu blog é de utilidade pública da nuvem. abraços, Robertson
    http://correiovespertino.blogspot.com

    ResponderExcluir
  25. Olá
    tive um probleminha...ao inserir os códigos, logo no inicio da página do blog o código fica visível. Já repassei para ver se errei algo, mas esta conforme orientado.
    O que faço?
    www.espacovidaequilibrio.blogspot.com
    dri_ramirez@yahoo.com.br

    ResponderExcluir
  26. Como eu faço para por os marcadores igual ao seu? Com a quantia de post na frente?

    espero resposta obrigd

    ResponderExcluir
  27. As nuvens de tag são otimas para melhorar a navegação e deixam o blog mais charmoso.

    Como os estilo ensinados por você Sardinha são adaptaveis a qualquer layout, podem ser utizados de varias formas depende da criatividade do blogueiro.

    Alias, Francine eh facil implantar esta nuvem de tags no blogger, ela é feita em flash, leia o artigo nuvem de tags para o blogger em flash.

    Espero ter sido util.

    ResponderExcluir
  28. como eu coloco essa tag que tem flash no blog tem com ou é só pra site só consegui colocar da outra! valeu ótima post.

    ResponderExcluir
  29. Adorei a dica! O único site que explica como vc colocar TAGS do jeitinho q vc quer! PARABÉNS!!
    O meu blog ficou bem legal com elas: www.blogdaanapaiva.blogspot.com
    RECOMENDO!!!
    Bjos

    ResponderExcluir
  30. A um tempo estava procurando,gostei,ficou perfeito em meu blog.obrigada

    http://frandsouza.blogspot.com/

    ResponderExcluir
  31. Olha!Parabéns!! deu tudo certo! eu já havia tentado outras vezes, mas nunca dava certo.
    Obrigada!! continue com este trabalho!!

    ResponderExcluir
  32. Olha!Parabéns!! deu tudo certo! eu já havia tentado outras vezes, mas nunca dava certo.
    Obrigada!! continue com este trabalho!!

    ResponderExcluir
  33. Adorei Juliana! Funcionou em todos os meus blogs.
    Parabéns!! E valeu a dica!!


    http://www.foiassimqueteamei.com

    ResponderExcluir
  34. Adorei Juliana! Funcionou em todos os meus blogs!
    Vc é fera!
    Parabéns!

    http://www.foiassimqueteamei.com

    ResponderExcluir
  35. Muito bem elaborado o Tutorial. Fiquei vagando pela rede, e todo mundo complicava de mais. Aqui foi bem mais fácil. Linguagem simples e objetiva! Parabens!!!

    ResponderExcluir
  36. Olá Juliana. Muito bom esta postagem, parabéns. Gostaria de saber se é possivel deixar as fontes das categorias de um só tamanho, é possivel isto? Obrigado.

    ResponderExcluir
  37. Consegui colocar no meu, mas tem um probleminha é que os números ficaram espalhados na frente dos marcadores. Tem como tirar isso ?
    Espero resposta.

    ResponderExcluir

ATENÇÃO: Caso esteja com dificuldades com seu blog, abra um tópico no Fórum de Ajuda do Blogger que nós iremos te ajudar a resolver.


Os comentários passam por um sistema de moderação. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;

 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top