Nuvem de tags para o Blogger

Submarino.com.br

Postado por Juliana

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.




Fonte: http://www.dicasblogger.com.br