Nuvem de tags personalizada para o Blogger

Lendo o excelente blog espanhol Gem@ BLOG, descobri uma forma legal de personalizar uma nuvem de tags (também chamada de nuvem de etiquetas ou tag cloud) para o Blogger/Blogspot. Como no Blogger em português as etiquetas são chamadas de marcadores, utilizarei esse termo na tradução do tutorial.

Entre no html do template e, usando os comandos Crtl+F do seu teclado, procure pela linha ]]></b:skin>. Cole ANTES dela o seguinte código:

.nuvem-html {

border: 1px solid #333;

background: url('url-imagem de fundo') repeat;

margin: 10px 0 10px 0;

line-height: 30px;

text-align: center;

padding: 2px;

padding-top: 10px;

}

.nuvem-html a {

text-decoration: none;

}

.nuvem-html a:hover {

border-bottom: 1px dashed #ccc;

}

Visualize o template e se tudo estiver bem, salve. Agora vá em elementos de página e escolha um gadget do tipo html/javascript. Cole o seguinte código:

<div class="nuvem-html">

<a style="color:#9b2230; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#000000; font-size: 14px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 42px;" href="#">TEXTO</a>

<a style="color:#999999; font-size:17px;" href="#">TEXTO</a>

</div>

Insira quantas linhas forem necessárias e faça as respectivas alterações.

color é a cor da fonte

font-size é o tamanho da fonte

“#” é a url do marcador

TEXTO é nome do marcador

Para obter a url do marcador, coloque o gadget padrão do Blogger na sidebar e depois copie os links, colando-os no local indicado do código (“#”)

Abaixo, veremos um exemplo usado no Diário de Bordo e o resultado final.

<div class="nuvem-html">
<a style="color:#9b2230; font-size: 11px;" href="http://www.diariodebordoweblog.com/search/label/Animais">Animais</a>
<a style="color:#000000; font-size: 14px;" href="http://www.diariodebordoweblog.com/search/label/Apresenta%C3%A7%C3%A3o">Apresentação</a>
<a style="color:#940f04; font-size: 12px;" href="http://www.diariodebordoweblog.com/search/label/Bizarro">Bizarro</a>
<a style="color:#999999; font-size:17px;" href="http://www.diariodebordoweblog.com/search/label/Brasil">Brasil</a>

</div>

Para colocar uma imagem de fundo (background), altere a linha abaixo, no primeiro código, substituindo url-imagem de fundo pela url da imagem que você escolheu.

background: url('url-imagem de fundo') repeat;

Um site legal para buscar imagens para o background é o DESIGNM.AG. Aí está o resultado:

A tradução e publicação do tutorial foram permitidas pela autora do Gem@BLOG.

Se você chegou até aqui, mas ainda não sabe o que é um marcador e muito menos como inseri-lo em seu blog, clique aqui.

No site Tag Cloud Generator, é possível gerar uma nuvem automática; o inconveniente é que ao invés de aparecerem os marcadores, aparecerão as palavras mais usadas no blog. Eles até permitem, como segunda opção, a criação de uma nuvem personalizada, mas com a desvantagem de não podermos colocar uma imagem no plano de fundo.

Como vocês podem perceber, ando falando muito do @compulsivo :P (ops, de novo?)#euri

ATUALIZAÇÃO: Agora é possível ter uma nuvem de tags usando um widget do próprio Blogger. Saiba como, clicando aqui.