Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

Tutoriais Blogger

Personalizar Nuvens de Marcadores do Blogger

Os marcadores do blogger, também conhecidos como etiqueta (label em inglês) funciona como uma espécie de classificação de cada post publicado.
O próprio Blogger disponibiliza a opção de incluir uma lista de marcadores na sidebar do blog, e dá algumas opções de escolha ao usuário, pois podemos definir, através do próprio painel do Blogger, a forma que a lista de marcadores deverá se apresentar.
Você pode escolher:
– quais marcadores deverão ser exibidos;
– se deseja ou não mostrar o número de postagens por marcador;
– se os marcadores deverão se apresentar em forma de lista simples ou “Cloud” (formato de nuvem)

Neste tutorial, veremos como personalizar a nuvem de marcadores (opção Cloud)
Você verá como personalizar cor e tamanho da fonte.
A principal característica dos marcadores em formato de nuvem, é que a fonte aumenta de acordo com a quantidade de posts, e com isso, além de você poder definir o tamanho da fonte, também pode definir cores diferentes.

(Clique na imagem)

Nuvem de marcadores personalizada

Bom, vamos ao procedimento:

Se você não usa a opção de marcadores em formato de nuvem (Cloud) e não sabe como fazer a alteração, siga o procedimento a seguir:

Vá na “Design” >> “Elementos de página” >> Clique em “editar” no gadget “marcadores
no campo “exibir” marque a opção “Cloud“.

Salve!

Volte na aba “Design >> Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:


/* Marcadores-Cloud label
--------------------------- */
#Label1 .cloud-label-widget-content {
text-align:center; /*--Edite-- Alinhamento do gadget--*/
font-weight: bold; /*--Edite-- Fonte em negrito--*/
}
#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; /*--edite a cor--*/
font-size:13px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-1 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-2 a {
color:#FFC125; /*--edite a cor--*/
font-size:14px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-2 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-3 a {
color:#00008B; /*--edite a cor--*/
font-size:16px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-3 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-4 a {
color:#228B22; /*--edite a cor--*/
font-size:18px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-4 a:hover {
color:#000; /*--edite a cor--*/
}
#Label1 .label-size-5 a {
color:#514762; /*--edite a cor--*/
font-size:20px; /*--edite tamanho da fonte--*/
}
#Label1 .label-size-5 a:hover {
color:#000; /*--edite a cor--*/
}

Não esqueça que você deve editar as cores e tamanho da fonte de acordo com seu gosto. As cores constantes nos códigos acima servem apenas como um exemplo.

Só para informar:
label-size-1: corresponde ao marcador que tem menor quantidade de posts.
label-size-5: corresponde ao marcador que tem maior quantidade.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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.

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.

11 Comentários

  1. Passando para agradecer pela ajuda. Valeu mesmo por disponibilizar esse ótimo recurso.

  2. Trollagem Memes disse:

    Obrigado por esclarece minha duvida tudo que eu precisa ouvir obrigado mesmo

  3. .:: Nessa ::. disse:

    Trollagem Memes:
    O fato de vc ter o gadget marcadores ou não no seu blog não irá interferir em nada em relação ao google..a escolha é sua.

  4. Trollagem Memes disse:

    oi Clau eu sei que é ruim para o visitante se mover mais eu não quero um gad get de marcadores e minha duvida é se eu não colocar esse gad get perderei colocação no google tipo elas não são as palavras chaves ou não tem nada a ver o gad get de marcadores serve apenas para o visitante se identificar no blog ?

  5. Carmencita Rodrigues disse:

    Como eu faço pra deixá-lo em ordem alfabética?

  6. Juliana Romano disse:

    Oi Clau..
    eu faço meus próprios layout apesar de não ter muita noção de xml…
    Até hoje não atualizei para o novo editor do blogger pois se eu fizer isso perco toda a configuração atual, certo?
    Gostaria de colocar a nuvem de tags.. vc sabe me dizer se tem uma maneira de fazer isso utilizando o editor de html mesmo?

    Se não, como faço pra migrar pro novo editor sem ter que reformar todo meu layout?
    Obrigada..

  7. .:: Clau ::. disse:

    Felipe
    Leia o tutorial "Propriedade CSS List – Objetos de Lista(ul,ol,li)" para vc entender sobre os itens da lista.

    Andreza
    Deve haver sim, mas eu nunca testei. Qdo descobrir eu publico tutorial.

  8. Andreza disse:

    Clau, tem como definir uma imagem pra cada marcador?

  9. Adriana Otero disse:

    ficou certinho.
    Bjs

  10. Felipe Correia disse:

    Gostei do tutorial Clau!!!
    Gostaria de saber como se faz para personalizar a lista organizada (Ul ou OL), sempre que eu crio uma dessas no meu blog ela fica com uma tag hr pontilhadas entre cada item da lista.
    Se você poder ensinar, ficaria muitoo grato!!

  11. Kevvin Oliveira disse:

    Gostei da dica, mais ou mais a nuvem de tags em flash =). Abraços Clau!

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

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