Nuvem de tags personalizada para o Blogger
Autor: Lucas Nascimento | Publicado: 2010-10-10T21:12:00-03:00


    
  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 ]]&gt;&lt;/b:skin&gt;. 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: &lt;div class="nuvem-html"&gt;  
&lt;a style="color:#9b2230; font-size: 11px;" href="#"&gt;TEXTO&lt;/a&gt;  
&lt;a style="color:#000000; font-size: 14px;" href="#"&gt;TEXTO&lt;/a&gt;  
&lt;a style="color:#940f04; font-size: 42px;" href="#"&gt;TEXTO&lt;/a&gt;  
&lt;a style="color:#999999; font-size:17px;" href="#"&gt;TEXTO&lt;/a&gt;  
&lt;/div&gt;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 marcadorPara  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.  
 &lt;div class="nuvem-html"&gt;
&lt;a style="color:#9b2230; font-size: 11px;" href="http://www.diariodebordoweblog.com/search/label/Animais"&gt;Animais&lt;/a&gt;
&lt;a style="color:#000000; font-size: 14px;" href="http://www.diariodebordoweblog.com/search/label/Apresenta%C3%A7%C3%A3o"&gt;Apresentação&lt;/a&gt;
&lt;a style="color:#940f04; font-size: 12px;" href="http://www.diariodebordoweblog.com/search/label/Bizarro"&gt;Bizarro&lt;/a&gt;
&lt;a style="color:#999999; font-size:17px;" href="http://www.diariodebordoweblog.com/search/label/Brasil"&gt;Brasil&lt;/a&gt;  
&lt;/div&gt;
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
Fonte da Postagem