Personalizar Nuvens de Marcadores do Blogger

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

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.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn