saquaescolaronline-Existem vários tutoriais com nuvens de tags utilizando

 

os marcadores do Blog. No entanto, segundo os especialistas, para que uma tag-cloud atinja seus objetivos, ela não pode conter palavras demais. Para quem possui muitos marcadores no Blog, uma nuvem de tags com os scripts conhecidos acaba se tornando inviável.
O Site Tag Cloud Generator oferece a possibilidade de você criar sua própria nuvem de tags utilizando os links e palavras que desejar.
Eu achei, porém, meio trabalhoso de ser utilizado, então, usando uma idéia semelhante, criei esta maneira de obter o mesmo resultado.
Vamos ao tutorial:

Organização

Primeiro você deve escolher quais os links (seja de posts que deseja destacar, categorias/marcadores, etc).
Anote o endereço de cada link em um bloco de notas e ordene alfabéticamente pelo título que irá colocar (essa é uma sugestão, por ser a mais utilizada - você pode ordenar de outra forma). Exemplo:

 
Cotidiano :http://nome-do-blog.blogspot.com/search/label/Cotidiano
Fotos :http://nome-do-blog.blogspot.com/search/label/Fotos
Humor :http://nome-do-blog.blogspot.com/search/label/Humor
Viagens :http://nome-do-blog.blogspot.com/search/label/Viagens
Vídeos :http://nome-do-blog.blogspot.com/search/label/Videos

Estabeleça um nível para cada link, dependendo da importância que você queira dar a ele, em ordem decrescente, por exemplo: você quer que a categoria/marcador "Viagens" se destaque menos do que as outras e a categoria/marcador "Vídeos" se destaque mais:

 
level3 - Cotidiano :http://nome-do-blog.blogspot.com/search/label/Cotidiano
level4 - Fotos :http://nome-do-blog.blogspot.com/search/label/Fotos
level2 - Humor :http://nome-do-blog.blogspot.com/search/label/Humor
level1 - Viagens :http://nome-do-blog.blogspot.com/search/label/Viagens
level5 - Vídeos :http://nome-do-blog.blogspot.com/search/label/Videos

Montando o código para os links

Iremos montar agora o código HTML. Ainda o bloco de notas, vamos identificar nossa nuvem e os links, com uma div id e com span class:

 

<div id="tagcloud">
<span class="level3"><a href="http://nome-do-blog.blogspot.com/search/label/Cotidiano">Cotidiano</a></span>
<span class="level4"><a href="http://nome-do-blog.blogspot.com/search/label/Fotos">Fotos</a></span>
<span class="level2"><a href="http://nome-do-blog.blogspot.com/search/label/Humor">Humor</a></span>
<span class="level1"><a href="http://nome-do-blog.blogspot.com/search/label/Viagens">Viagens</a></span>
<span class="level5"><a href="http://nome-do-blog.blogspot.com/search/label/Videos">Vídeos</a></span>
</div>

Na Guia "Layout", em "Elementos de Página", adicione um gadget HTML/JavaScript no local onde você quer colocar sua nuvem de tags (Footer, Sidebar, Main-Wrapper, etc).

Copie o código da nuvem que você montou no bloco de notas e cole no box do Gadget.

Aplicando estilos à nuvem

Você deve decidir agora o tamanho de fonte e as cores que deseja para cada nível, sendo que o nível mais baixo (level1) é a tag que você deseja dar menos destaque e portanto deve ter um tamanho de fonte menor.


Na Guia "Layout" em "Editar HTML", faça uma cópia de seu template, clicando em "Baixar Modelo Completo".


ACIMA da tag ]]></b:skin>, coloque o código para os estilos, seguindo a sugestão abaixo.


Sugestão de estilos até 11 níveis :

#tagcloud {    /*  estilos para o container da tag cloud  */
margin: 10px 0 10px 0;
border: 1px solid #808080;
line-height: 30px;
text-align: center;
padding: 4px;
padding-top: 2px;
}

/*  estilos para os links  */
#tagcloud a {   text-decoration: none;  }
#tagcloud a:hover {  text-decoration: underline;   }


/*   estilos para cada nível de link   */
#tagcloud span.level1 a {  font-size: 13px; color: Red;  }
#tagcloud span.level2 a {  font-size: 15px; color: Light Blue;  }
#tagcloud span.level3 a {  font-size: 16px; color: Magenta;  }
#tagcloud span.level4 a {  font-size: 17px; color: Dark Orange;  }
#tagcloud span.level5 a {  font-size: 18px; color: Royal Blue;  }
#tagcloud span.level6 a {  font-size: 19px; color: Firebrick;  }
#tagcloud span.level7 a {  font-size: 20px; color: Forest Green;  }
#tagcloud span.level8 a {  font-size: 21px; color: Dark Orange;  }
#tagcloud span.level9 a {  font-size: 22px;  color: Royal Blue;  }
#tagcloud span.level10 a {  font-size: 23px; font-weight: bold; color: Forest Green;  }
#tagcloud span.level11 a {  font-size: 25px; font-weight: bold; color: Red;  }

Modifique as cores e tamanho de fontes conforme sua preferência.

Nuvem de Tags colorida:

 

Nuvem de Tags Monocromática:

Imagem principal cortesia:


Clip art copyrighted de Bobbie Peachey,


Webclipart.about.com.

 

Technorati Marcas: Existem,vários,tutoriais,com,nuvens,de,tags,utilizando