Personalizar marcadores estilo nuvem "Cloud"

Hey bunnies! Hoje venho trazer mais um daqueles tutoriais quase esquecidos pela net. Pois é... mas que não deixam de serem úteis e ate interessantes. No tutorial de hoje vamos personalizar os marcadores do blog em estilo nuvem "Cloud" como é chamado. Normalmente os marcadores são mostrados como lista, um abaixo do outro porém a forma nuvem deixa todas as tag's do blogger agrupadas como uma nuvem. Usar os marcadores nesse modo trás alguns benefícios bem interessantes e únicos.

Você pode coloca-los em ordem alfabética (Hello Wendy o lista também faz isso!) Sim! É verdade, mas ele também destaca os marcadores mais visitados do seu site. Vai dizer que não é legal?  Para isso precisamos adicionar um novo gadget de marcadores. 

1. Com sua conta aberta escolha qual blog vai adicionar o marcador. E vá em Layout! Agora vá em "Adicionar novo Gadget", vai descendo a lista ate achar a opção "Marcadores" ou "Label". A pagina vai mudar e vai aparecer algumas opções de configurações. 

2. Não precisa mexer em praticamente nada a não ser que queira a única coisa que vamos precisar mexer para transformar o Marcador de lista em nuvem é: Ali em baixo onde está escrito "Exibir: Lista - Cloud", selecione Cloud e prontinho clique em salvar. 

3. Esse será o resultado da escolha cloud.

(Crédito da imagem: Templates e Acessórios)

Claro que ele não vai entrar colorido. Vão estar da mesma cor dos links do seu blog, uma definição de seu layout. Porém você pode personalizar e deixa-lo todo colorido se quiser.


Personalizando:

4. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar acima dele cole o código abaixo:

Códigos

/* 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--*/
}

Faça as alterações das cores. Os nomes Label-size-1, 2, 3,4 e 5, representam os seus marcadores, sendo o 1 para os menos visitados, e o 5 para os mais visitados. Feito as alterações, salve e visualize! Ah! Pode ser que o código para personalizar não funcione, devido ao seu modelo de layout. Mas você pode personaliza-lo manualmente com esse tutorial aqui. Bye! Bye!