Marcadores em forma de nuvem colorida

em 26 de fevereiro de 2013

nuvem de tags colorida
Imagem daqui

Uma das maneiras de destacar o conteúdo mais relevante do blog é selecionar os marcadores mais relevantes e/ou interessantes. Ou ainda os que possuem mais postagens.
Vou ensinar hoje um código bem simples, que vai fazer seus marcadores ficarem parecidos com os meus, conforme você vê no print:
marcadores coloridos

É muito simples de fazer, mas requer bastante paciência pois demora.
Mas nosso blog merece, né?
Vamos ao trabalho?

Para inserir em seu blog acesse seu painel administrativo e selecione a aba Layout. A seguir clique em Adicionar um gadget e na janela que abrir escolha HTML/JAVASCRIPT. Na nova janela que abrir coloque o título que desejar (eu coloquei Tags) e cole o seguinte código:

*Para copiar pare o mouse sobre o código e clique no primeiro ícone que aparecer; daí abrirá uma janela com o código livre para ser copiado.

<div align="center">
<a style="font-size:25px;color:#87cefa;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:28px;color:#FF34B3;"href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:14px;color:#f9b;"href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:13px;color:#FF4500;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:17px;color:#9932CC;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:25px;color:#87ce00;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:17px;color:#CD950C;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:19px;color:#FF34B3;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:10px;color:#f10;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:20px;color:#696969;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:12px;color:#FF8C00;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:20px;color:#fff;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:10px;color:#ff1440;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:21px;color:#CD950C;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

</div>

Entendendo o código para personalizá-lo:
font-size: tamanho da letra. Altere como desejar, quanto maior o número, claro, maior o tamanho da letra;

color: define a cor da letra. Para mudar alter o número hexadecimal. Aqui tem uma tabela de cores para você escolher. Nunca esqueça o sinal # pois sem ele o código da cor não funciona;

ENDEREÇO DE SEU MARCADOR: copie o endereço do marcador desejado. Você obtém esse endereço clicando sobre o seu marcador desejado e a seguir copiando o endereço completo que aparecer no seu navegador.
Exemplo:
Meu marcador Publicidade tem esse endereço: http://www.elainegaspareto.com/search/label/Publicidade

NOME DE SEU MARCADOR: nome que aparecerá em sua nuvem de tags. Pode ser o mesmo nome do marcador ou pode ser o que você achar melhor.
Exemplo:
Meu marcador conheça esse blog aparece na nuvem de tags com o nome de Blogs que eu indico. Achei mais bonito assim, então alterei.

Caso queira inserir mais marcadores basta colocar esta linha (não esqueça de personalizar como desejar):

 <a style="font-size:20px;color:#000000;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

Antes do fechamento do código. O fechamento é com essa tag:
</div>


Depois de tudo pronto clique em Salvar. Arraste para onde deseja que fique e clique em Salvar alterações.
Pronto, só isso.
Gostou?
Então  compartilhe, curta, recomende! Eu fico feliz e agradecida!


Gostou mas não tem tempo ou paciência para fazer?
Eu faço pra você!
Entre em contato comigo e a gente combina o valor.
Será um prazer!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

34 comentários , comente também!

  1. Oiê Elaine,
    Que dica bacana, adorei !
    Acabei de fazer no meu blog e ficou lindinho.
    Mas, fiquei com uma duvida ... Agora eu posso excluir o marcador antigo ?
    Quando fizer uma postagem adiciono as tags da mesma maneira ?
    Oinn quantas perguntas não é ?
    Bjins

    ResponderExcluir
    Respostas
    1. Luciane, eu deixaria o gadget antigo.
      Use este para colocar seus marcadores mais relevantes, que queira destacar.
      Mas se quiser tirar o gadget antigo pode. Eu manteria.
      Sim, adicione marcadores nas postagens exatamente da mesma forma, para que tudo funcione.
      beijosss

      Excluir
  2. Oi Elaine, como vai?
    Andei meio sumidinha daqui,mas sempre te leio no feed do e-mail, só não tava dando pra vir comentar.
    Rsss
    Esse tuto é ótimo, o marcador fica muito charmosinho ,gostei.
    Abraço pra ti e pra teu esposo!

    ResponderExcluir
  3. Ah, então é assim q faz os marcadores coloridex... mas é mto trabalhoso mesmo... prefiro esperar alguém fazer pra mim em março, rs. Obrigada por compartilhar, bjs.

    ResponderExcluir
  4. Elaine,
    Me invoquei com essa gadget "marcadores", virei a net de ponta cabeça até encontrar um modo
    de ocultar...
    Ele tá aqui, mais não aparece mais na pagina inicial. Optei por deixar em nuvens como você ensinou. Fica muito mais bonitinho né :)

    Oinnn amei,
    Obrigada, obrigadaaa
    Bjins

    ResponderExcluir
  5. Olá Elaine!
    Amei a dica! Fica muito bonitinho!
    Vou lá fazer no meu bloguito e depois te conto!
    Beijocas,
    Cris

    ResponderExcluir
  6. Mais uma dica preciosa....
    Cada dia uma coisa nova...
    Elaine, compartilhando com a gente o que sabe, eita mulher!!!

    Beijos

    ResponderExcluir
  7. Bom dia Elaine! Eu fiz no meu blog...ficou lindo obrigada, que Deus abençoe você e sua família sempre, um grande abraço.

    ResponderExcluir
  8. Oi Elaine!!
    Como você me ajudou com mais este post!Eu não conseguia fazer marcadores assim, diferentes. Agora consegui!!Obaaa!Muito obrigada, Elaine, por ensinar, e de maneira tão simples...já está lá, meu marcador nuvem. Ainda faltam alguns, mas vou fazer aos poucos, pois como você mesma disse, requer tempo, e paciência...rs
    Só estou com uma dúvida: eu tenho mais de uma postagem num determinado marcador(passarinho, por exemplo). Como eu insiro todos os links dos posts sobre o tema passarinho?É num único link, ou faço vários, um abaixo do outro???

    Beijos, e uma quarta-feira abençoadíssima!

    ResponderExcluir
    Respostas
    1. Nilceli, boa tarde
      Você colocou links de postagem ao invés de links de marcadores.
      É preciso colocar primeiro os marcadores nas postagens, depois copiar o endereço desses marcadores para somente aí gerar o gadget que ensinei.
      Do jeito que você fez ficou certo, mas mostra apenas a postagem e não o marcador.
      Para entender melhor leia:
      Como inserir marcadores em suas postagens

      Como consertar e organizar os marcadores em seu blog

      Espero que ajude.
      beijos, boa tarde

      Excluir
  9. Que lindo acabei de fazer :)

    parabéns pelo blog *-*

    Seguindo aqui...

    http://naiamelo.blogspot.com.br/

    ResponderExcluir
  10. Como sempre, compartilhando dicas maravilhosas!
    Bjoks

    ResponderExcluir
  11. Ai ai rsrsrs tanta coisa bonitinha ........
    Só olhando, ainda não sei fazer.
    Beijos querida.

    ResponderExcluir
  12. Olá Elaine
    As suas dicas como sempre são preciosas, mas como sou uma azelha no assunto nem vou tentar, tal é o medo de destruir tudo.
    Beijinhos

    ResponderExcluir
  13. Oi, Elaine

    Gostei da dica. Vou tentar fazer.
    Olha, não sei se vc poderá me ajudar:
    Quando entro no meu painel (design), e qdo abre a página, as letras agora estão com o tamanho bem pequenas, como se eu tivesse mexido no zoom, sei lá.. Vc saberia me explicar como coloco o tamanho das letras do jeito que estavam, no tamanho normal e que dê pra ler??
    Grata pela atenção.

    Bjosss

    ResponderExcluir
    Respostas
    1. Sheyla, experimente apertar ao mesmo tempo as teclas Ctrl e +
      Essa ação fará a página ampliar. Tem que ser ao mesmo tempo, ok?
      boa sorte.
      bjssss

      Excluir
  14. OLá Elaine
    Que ótima dica, mas tenho receio de mexer sozinha...rsrsr
    Minha irmã é quem cuida do blog, mas está sem tempo.
    Vou ler de novo e com calma e mostrar pra ela!

    Obrigada!
    bjs
    Paty

    ResponderExcluir
  15. Olá Elaine,usei esse super fofis tuto lá no meu cantinho,ficarei feliz com sua visita e se acaso for,me deixa um oi e assim saberei que você esteve lá,bjs e um fim de semana abençoado.

    Coisas da Lia( http://lojacoisasdalia.blogspot.com.br)

    ResponderExcluir
  16. Já segui seu blog a um tempo , e agora eu fiz um outro pode seguir? http://usagi-official.blogspot.com.br/

    ResponderExcluir
  17. Oi Queridaa, adivinha quem eu presenteei com o selo " The Versatile Blogger Awrd"?, você merece com toda certeza, amo seu blog, amo suas postagens continuee seempre assim haha, eis o link do selo:
    http://milahcruz.blogspot.com.br/2013/03/the-versatile-blogger-award.html

    ResponderExcluir
  18. ué... eu cometei aqui...não comentei? Tenho quase certeza que sim...

    aliás, em outro post também tive essa sensação, de ter comentado...mas não achei o comentário lá depois

    Mistério

    ResponderExcluir
  19. SEmpre com ótimas dicas e compartilhando seu saber!
    Ando um pouco afastada dos comentários por cinco principais motivos:
    1-muito envolvida com projetos complexos na vida profissional;
    2-super empolgada com as últimas revisões para o lançamento do site Projetando Pessoas;
    3-volta a rotina das aulas das minhas meninas;
    4-casa em pintura (ufa! e eu sou alérgica ao cheiro de tinta!)
    5-focada no Projeto Março do Blog, Mês da Mulher, uma surpresa por dia, uma Projeção de uma grande mulher por dia!
    Mas sei que vc sabe que eu não te esqueci, que tenho vindo aqui, mesmo sem comentar!
    bj Sandra
    http://projetandopessoas.blogspot.com.br//

    ResponderExcluir
  20. Eu aainda não entendi como você colocou o nome nas tags no meu só esta assim :
    NOME DO SEU MARCADOR
    mais eu n sei alterar o nome ,
    Mee ajudee !!

    ResponderExcluir
    Respostas
    1. Sofia, releia o artigo com calma. As informações que você deseja estão nele.
      bjsss

      Excluir
  21. Olá Elaine, tudo bem?

    Segui passo a passo da colocação das Tags, mas não sei porque, elas não abrem os textos.
    Mesmo assim deixei no blog. Adorei.
    Será que pode me ajudar?
    Obrigada
    Mari

    ResponderExcluir
  22. Olá Elaine,

    Consegui. HUHU!!!
    Li, reli, li de novo, de novo e achei meu erro.
    Obrigada pela ajuda. Adorei. Ameeeeei.
    Beijo Mari

    ResponderExcluir
  23. AMEI!
    Assim que tiver um tempinho irei aplicá-lo ao meu blog!

    Beijos!

    ResponderExcluir
  24. OI Elaine!
    Graças a Deus que vc existe rsrs, agora que encontrei o seu abençoado
    cantinhos, vou tentar arrumar o meu que tá uma bagunça.
    Elaine eu não estou conseguindo colar o código que vc manda acima pra colocar,
    pois não consigo copiar. Você pode me ajudar.
    Muito obrigada por compartilhar o seu talento, beijos e fique em paz.

    ResponderExcluir
  25. te seguindo ameiii a dica bjss
    http://alineoliveiraaov.blogspot.com.br/

    ResponderExcluir
  26. Olá Elaine....estou amando as suas dicas....está me ajudando muito! Só tenho uma dúvida, fiz todo o passo a passo acima, mas não consegui que meus marcadores ficassem em forma de nuvem, apenas estão coloridinhos, será que fiz algo errado???

    Bjs

    ResponderExcluir
  27. Bom dia Elaine!!!! <3 Queria aqradecer e parabenizar você pelo blog!!!
    A forma clara como você ensina tudo ajudou bastante na criação e desenvolvimento do meu blog!!!
    Tive muita dificuldade em outros sites, mas o seu eu amei e suuuper recomendo a todas as minhas amigas blogueiras!
    Fique com deus!
    beijos!!

    Manu
    www.modaparamiudos.com.br

    ResponderExcluir
  28. Olá Elaine! Fiz e deu certo no meu blog. Estou amando!
    Obrigada por você compartilhar conosco esses lindos presentes!
    Você é demais!
    Beijinhos e Sucesso lindona!
    http://dulcineiadesa.blogspot.com

    ResponderExcluir
  29. Excelente post. Ajudou bastante. #ficaadica
    Também já coloquei lá no blog,
    quem quiser conferir www.sigaasplacas.com
    Grande Abraço,

    ResponderExcluir
  30. Ficou Lindo no meu Blog. AMEI
    Obrigada!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…