Nuvem de Tags Coloridas - Modificar Cores dos Marcadores

Personalizar os marcadores do blogger pode ajudar a melhorar a aparência do seu blog. Você pode trocar as cores e tamanho das fontes dos marcadores do blogspot apenas com algumas linhas de código CSS na sua pagina editar HTML e assim fazer a formatação de texto das categorias do seu blog.

personalizar nuvem de marcadores

Para usar esse tutorial e personalizar os marcadores do seu blog você precisa usar os marcadores em forma de nuvem de tags (could), portanto antes de começar verifique isso no seu blog. Mas se quiser personalizar a lista de links dos marcadores veja esse tutorial sobre: Personalizar gadgets do Blog.

nuvem de marcadores no blogspot

Agora entre na pagina modelo > editar HTML, procure por ]]> e cole esse código antes dele:
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;}
#Label1 .cloud-label-widget-content span {display: inline-table;line-height: 1.2;padding:0 0 0 10px;vertical-align: middle;}
#Label1 .label-size-1 a {color:#8B1A1A;font-size:13px;}
#Label1 .label-size-1 a:hover {color:#000;}
#Label1 .label-size-2 a {color:#FFC125;font-size:14px;}
#Label1 .label-size-2 a:hover {color:#000;}
#Label1 .label-size-3 a {color:#00008B;font-size:16px;}
#Label1 .label-size-3 a:hover {color:#000;}
#Label1 .label-size-4 a {color:#228B22;font-size:18px;
#Label1 .label-size-4 a:hover {color:#000;}
#Label1 .label-size-5 a {color:#514762;font-size:20px;}
#Label1 .label-size-5 a:hover {color:#000;}

Veja que o trecho se repete varias vezes apenas alterando size-1 para size-2, size-3 e assim por diante:
#Label1 .label-size-1 a {color:#8B1A1A;font-size:13px;}
#Label1 .label-size-1 a:hover {color:#000;}

Isso é a formatação dos links de cada tamanho de link da sua nuvem de tags, mas essa numeração é feita com relação à importância do link ou seja o marcador com estilo size-1 é maior (tem mais postagens) que size-2. E você pode trocar o tamanho de cada um deles alterando o valor que está em font-size:13px; e a cor em color:#8B1A1A;.

As linhas que tem a:hover são as cores do link quando o mouse está sobre ele e você pode alterar da mesma forma, veja aqui o código das corese também sobre alterar cores dos links.

Essa é uma modificação bem fácil de fazer no seu template e pode ser bem interessante para dar mais destaque aos marcadores do seu blog.

18 comentários :

  1. Como aumentar o tamanho do link "Postar um comentário" (comentários em Pop-up). E tem como colocar uma imagem no lugar do link?

    ResponderExcluir
  2. Ola Fabiano,
    eu gostaria de saber se tem como mudar o endereço do blog redrecionando. Eu vi um blog que era "nightsytheircomics.blogspot.com" que mudou para "nightsy.blogspot.com" mas redrecionando, exemplo eu tenho parceiros, mas para eu não ter que avisar a todos os parceiros para mudarem meu banner eu já queria assim que acessasem meu blog redreciona-se para o novo endereço.
    Brigado ^^

    ResponderExcluir
  3. Anonimo tente colocar no seu html o código

    .comment-footer a {font-size:150%}

    e ajustar o valor 150 para o tamanho que deseja

    ResponderExcluir
  4. Elvis Henrique o melhor seria você registrar um dominio, isso custa 30 reais ou menos por ano.


    você poderia trocar o endereço do seu blog e depois criar um novo blog mas com o endereço antigo, por exemplo, você tem um blog com o endereço blog1 e você muda o endereço dele para blog2.

    então você cria um novo blog com o endereço blog1 e coloca nele apenas o aviso que mudou de endereço e links para seu novo blog.

    ResponderExcluir
  5. Obrigado, Fabiano Roberto (sou o primeiro anônimo que comentou).

    Mas tem como colocar uma imagem no lugar do link "Postar um comentário"?

    ResponderExcluir
  6. Anonimo
    entre na pagina editar html, marque a opção expandir modelos de widgets e procure esse código
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>


    apague e coloque esse outro no lugar
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src="endereço da imagem" border="0" /></a>

    claro precisa colocar um endereço de imagem no código

    ResponderExcluir
  7. No meu Blog http://servosdemariaamordedeus.blogspot.com utilizo o template 3.0 do dicas blogger o código que me mandou procurar encontrei 5 como saber qual correto?

    ResponderExcluir
  8. Escravo de maria
    tente procurar por body{....}

    e colocar o código antes dele

    esse código de formatação pode ser colocado em varias partes do blog essa é apenas uma sugestão de lugar.

    ResponderExcluir
  9. No meu Blog http://servosdemariaamordedeus.blogspot.comutilizo o template 3.0 do dicas blogger o código que me mandou procurar encontrei 5 como saber qual correto?
    tente procurar por body{....}
    Não achei esse código pode ser mais especifico...

    ResponderExcluir
  10. Escravo de maria,
    Procure por body{ ou coloque antes de ]]></b:skin>

    ResponderExcluir
  11. Gostaria de usar aquela nuvem de tags porem em forma de globo. Podem ajudar??

    ResponderExcluir
  12. os códigos que já vi para fazer a nuvem de tags em globo apresentam muitos erros e fazem o blog ficar mais lento.

    se quiser tentar aqui tem um código: Colocar uma nuvem de tags no blog
    .

    ResponderExcluir
  13. fabiano roberto o meu nao apareceu nada cara,ficou normal os links que ficam flutuando >ficou da cor preto claro
    por que será ????

    ResponderExcluir
  14. anonimo acho que colocou os códigos em lugares errados ou faltou algum sinal nos códigos / > ' < "

    ResponderExcluir
  15. Olá Fabiano, a única coisa que quero alterar na minha nuvem de marcadores é a fonte; (para verdana)! Depois que mudei o layout do blog, não consigo mais mudar pelo "personalizar". Agora só no html! O link do meu blog é este... Está com o título "temas". Espero que você possa me ajudar. Desde já agradeço a atenção.

    ResponderExcluir
  16. Fernanda eu não testei mas se colocar o estilo de fonte (font-family: Verdana, Geneva, sans-serif;) em uma das duas primeiras linhas do CSS acredito que funcione.

    deste jeito, mas não precisa colocar nas duas é que você precisa testar porque pode variar conforme outras configurações do seu template.

    #Label1 .cloud-label-widget-content {font-family: Verdana, Geneva, sans-serif;text-align:center;font-weight: bold;}


    #Label1 .cloud-label-widget-content span {font-family: Verdana, Geneva, sans-serif;display: inline-table;line-height: 1.2;padding:0 0 0 10px;vertical-align: middle;}

    ResponderExcluir
  17. Respostas
    1. pode colocar o código css em outras partes junto com os outros códigos, por exemplo, quanto termina o trecho body{..... }

      ou veja aqui outra forma de adicionar css
      Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog

      Excluir