Personalizando a nuvem de marcadores do Blogger

Nível: intermediário

Como muitos de vocês já devem ter lido no Dicas Blogger ou no Ferramentas Blog, o Blogger finalmente implementou nos Marcadores os recursos de:

• Marcadores selecionados: você pode selecionar apenas clicando os marcadores que não quer exibir.
• Cloud: você pode exibir seus marcadores em formato de nuvem.
• Número de posts: você pode desmarcar a opção de mostrar o número de postagens por marcador.

Isso significa que você não precisa mais se arriscar modificando o código fonte para inserir esses recursos, basta selecionar essas opções no próprio Blogger.

Centralizando a nuvem

A nova nuvem vai seguir o alinhamento que já está configurado para seus widgets, seja ele qual for. Se os seus widgets não são centralizados, mas você quer centralizar a nuvem de marcadores, basta inserir o seguinte código na folha de estilos do seu blog, ou seja, acima da tag </b:skin>:

.cloud-label-widget-content {text-align:center;} ]]></b:skin>

Definindo os tamanhos:

Uma das características da nuvem de marcadores é que o tamanho da fonte aumenta conforme o número de posts. Se após configurar sua nuvem não gostar do resultado, você poderá personalizar os tamanhos também na folha de estilos. Não custa destacar que label-size-1 é a classe do que tem menos posts e label-size-5 do marcador que tem mais.

.label-size-1 {font-size:9px;} .label-size-2 {font-size:11px;} .label-size-3 {font-size:13px;} .label-size-4 {font-size:14px;} .label-size-5 {font-size:15px;} ]]></b:skin>

Definindo as cores:

Além dos tamanhos, você pode definir uma gradação de cores para os marcadores:

.label-size-1 a, .label-size-1 a:link {color:#3399ff} .label-size-2 a, .label-size-2 a:link {color:#6699cc} .label-size-3 a, .label-size-3 a:link {color:#3366cc} .label-size-4 a, .label-size-4 a:link {color:#3399ff} .label-size-5 a, .label-size-5 a:link {color:#0033cc} .label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {color:#0000cc;} ]]></b:skin>

Código único para você que quer aplicar todos as personalizações:

.cloud-label-widget-content {text-align:center;} .label-size-1 {font-size:9px;} .label-size-2 {font-size:11px;} .label-size-3 {font-size:13px;} .label-size-4 {font-size:14px;} .label-size-5 {font-size:15px;} .label-size-1 a, .label-size-1 a:link {color:#3399ff} .label-size-2 a, .label-size-2 a:link {color:#6699cc} .label-size-3 a, .label-size-3 a:link {color:#3366cc} .label-size-4 a, .label-size-4 a:link {color:#3399ff} .label-size-5 a, .label-size-5 a:link {color:#0033cc} .label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {color:#0000cc;} ]]></b:skin>

A imagem no início do post é de uma nuvem de marcadores que utiliza todos esses recursos.

Se você usou no seu blog os códigos do tutorial Marcadores em formato de nuvem ou do Marcadores em formato de nuvem 2 e agora quer utilizar o recurso do Blogger, sem modificações no código, basta excluir o widget de Marcadores e adicioná-lo novamente com as configurações desejadas.

Até mais!