Como inserir Nuvem de Tags em movimento no Blogspot - Label Clouds.

Serviço de Utilidade à Blogosfera.
(husauhashuas... Quem vê pensa... kkk)

Lembrando que eu não entendo praticamente nada de Template, HTML, CSS, XMLHTX, &#$£#¹&*%...

A única coisa que fiz foi, atendendo a alguns pedidos, 3 na verdade, tentar traduzir o único post que encontrei contendo este tutorial que até então não havia visto em nenhum outro site ou blog em português.

E este é só o primeiro e o único tutorial que coloco por aqui.


huashuas
Vamos lá.

Este é um método de instalação alternativo...
Sendo assim muito muito simples... Ideal para cabeçudos como eu, voc..
Porém, é lógico que os seus posts precisam ter marcadores que os classifiquem.


1º Passo:
Na aba Layout, vá em Editar HTML, NÃO clique em Expandir Widgets (entendeu cabeção?! Não clique em expandir widgets se não vai dar tudo errado!), visualize o seu código CSS.


2º Passo:
Aperte Ctrl+F e localiza este trecho:

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

3º Passo:
Abaixo dessa linha cole a seguinte sessão:

<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'>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;

&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;


</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Os créditos e demais referências continuam sendo do Blogger Buster, Amanda Fazani e Cia.

4º Passo:
Visualize tudo o que você fez, e, se estiver tudo certo e com as Tags tudo bunitinho salve o negócio.


5º Passo:
Ps.: Opcional
Agora sim você deve expandir os widgets.
Aqui pode-se alterar a aparência da sua Nuvem de Tags.


Modificando o tamanho da "caixa" da nuvem.
Encontre o trecho:

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

Sendo width e height largura e altura respectivamente.
Alterando somente o que está em vermelho e azul.


Para modificar a cor do fundo encontre:

&lt;param name="bgcolor" value="#ffffff" /&gt;

Modifique somente o que está em vermelho (encontre novas cores aqui).


Para alterar a cor das letras procure pelo trecho:

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

Novamente modifique o trecho em vermelho.


Para mudar o tamanho da fonte da parada é bem simples também.
Encontrando o trecho do código abaixo em vermelho, substitua-o pelo tamanho desejado.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>

É importante que se coloque o número da fonte escolhida entre as aspas simples, altere somente o número.

Após a instalação da nuvem de Tags, você ainda poderá modificar a posição da mesma através da aba Layout em Elementos da Página.



AVISO IMPORTANTE:
Eu (Ueslei, vulgo U), não me responsabilizo por qualquer merda coisa de errado que aconteça no seu blog, eu testei, e, no meu ficou perfeito.
Para que tal coisa não aconteça, só salve as alterações após ter certeza de que tudo o que você modificou ficou bom e do seu gosto.
Lembrando que enquanto isso não for feito qualquer processo é absolutamente reversível, bastando clicar em LIMPAR EDIÇÕES, logo abaixo do seu código.


Fonte e mais informações entrar em contato com o Blogger Buster responsável pela coisa.


Ps2.: Caros amigos!

Peço a gentileza aos que utilizarem ou não o tutorial acima, que deixem ao menos um comentário somente para que possamos saber quantos conseguiram ou não aproveitar a "dica", e se devemos alterar alguma coisa para que o mesmo fique mais claro. Obrigado!