Colocar uma nuvem de tags no blog

Colocar uma nuvem de tags no blog é muito mais fácil do que parece, sempre pensei que eram códigos grandes, mas na verdade dá pra deixar tudo pronto em 3 minutos. Essa nuvem faz com que os titulos dos marcadores do blog fiquem em movimento como se estivessem girando em torno de uma bola, veja esse código em funcionamento em nosso blog Frases Curtas.

Existe um Gadget Nuvem de tags (marcadores) no blogger, então se quiser é uma maneira bem mais simples de fazer a nuvem com os marcadores do seu blog.

Para colocar um igual no seu blog vocé só precisa copiar esse código e fazer algumas alterações:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'><center>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a
href='http://www.roytanck.com/'>Roy Tanck</a> and <a
href='http://www.bloggerbuster.com'>Amanda
Fazani</a> | Distributed by <a href='http://blogger-templates-designs.blogspot.com/'>Blogger Templates Designs</a></div>
<script type='text/javascript'>
var so = new
SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
"tagcloud", "240", <!-- width="240" -->
"300", "7", <!-- height="300" -->
"#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud",
"<tags><b:loop values='data:labels'
var='label'><a expr:href='data:label.url'
style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/></center>
</div>
</b:includable>
</b:widget>

Antes de colocar no blog vamos entender como personalizar aparência dele, veja as seguintes partes:

Largura e altura da widget: width = "240" height = "300"
apenas altere os valores 240 largura e 300 altura, cuidado para não deixar mais larga que a coluna do seu blog

Cor de fundo &quot; #ffffff &quot;);
as letras ffffff é a cor de fundo, aqui tem o código de várias cores basta trocar as letras

Cor do Texto: 0x333333
idêntico a cor de fundo, mas essa é a cor do texto então veja os códigos das cores acima e use a cor que desejar

Tamanho do texto: style='12'
o numero 12 é o tamanho da letra então altere como quiser

Agora que já deixou o código como queria entre na pagina editar html (não clique para expandir o modelo) procure por

<b:section class='sidebar' id='sidebar' preferred='yes'>

Então coloque o código logo depois dessa linha e clique para salvar, visualize seu blog e veja se está tudo certo.

Depois disso se quiser mudar o lugar que a nuvem de tags aparece no blog é fácil apenas entre na pagina layout, notará que tem um novo gadget então é só arrastar para o lugar que desejar do mesmo modo que faz com todos os outros.

Recentemente achamos uma maneira mais simples de fazer essa nuvem de tags:Gadget Nuvem de tags (marcadores). Então se quiser testar é só visitar o link e colocar esse gadget com apenas alguns cliques e sem usar códigos.