Como instalar nuvem de "tags" no seu blog

♠ Posted by Unknown in blogger,dicas,Tutoriais at 21:07

O artigo de hoje é sobre um gadget muito bacana que venho vendo em muitos blogs por ai e achei importante compartilhar com vocês meus leitores.
Trata se de um gadget em que as tags ou (marcadores como quiser) ficam em movimentos circulares a medida que passamos o mouse sobre elas.
O código é simples e a instalação também.

Vamos lá então ?

Primeiro eu aconselho a quem não esta habituado a mexer no template a fazer um "backup" do seu template antes de instalar o gadget.




Abra o painel do Blogger e vá em "Layout", e clique em "Editar HTML"e procure por a seguinte linha:


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

 

Clique em Ctrl+f  e irá abrir uma janelinha que você deverá colar essa linha nele e achar facilmente.

Logo a seguir a essa linha cole o código a baixo:

<b:widget id='Label99' locked='false' title='Nuvem de Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='https://sites.google.com/site/comofazerumsitecom/ficheiros/swfobject.js' type='text/javascript'/>
<div id='flashcontent' style="text-align: center;"><a href='http://comofazerumsite.com/criarblog/blogger/nuvem-tags-animada.html'>Nuvem de Marcadores para o Blogger</a><br/>-<br/><a href='http://comofazerumsite.com'>fazer um site</a></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/comofazerumsitecom/ficheiros/nuvemtags.swf", "tagcloud", "230", "210", "7", "#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='10'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>






Faça uma pré-visualização abrindo a página do blog e se estiver instalado o gadget corretamente você já deverá ver a nuvem de tags aparecer logo na (sidebar) barra lateral do blog.
Agora depois de tudo instalado você poderá modificar as cores e as dimensões de acordo com as suas preferências particulares, ou mover o gadget para um local diferente na sua (sidebar) barra lateral.

Mas preste muita atenção: Para você ver a nuvem de tags em funcionando, é preciso que já tenha adicionado etiquetas/marcadores a algum dos seus artigos do blog.

 Caso queira modificar, deverá fazer assim:
 
O gadget inclui as seguintes variáveis definidas:

• Largura definida com 230px
• Altura definida com 210px
• Cor de fundo é o branco (#ffffff)
• Cor do texto é Cinza (333333)
• Tamanho da fonte é "10"

Se você preferir poderá tornar o seu gadget maior ou menor e poderá também mudar as cores, etc.
Para fazer isso você terá que editar algumas diferentes partes do código.
Para isso irei colocar estas opções na ordem em que elas aparecem no código que você já tem instalado:

1 . Para alterar a largura e a altura do gadget

As variaveis para a largura e para a altura podem ser encontradas na seguinte linha do código:
var so = new SWFObject("https://sites.google.com/site/comofazerumsitecom/ficheiros/nuvemtags.swf", "tagcloud", "230", "210", "7", "#ffffff");

2. Para alterar a cor de fundo do gadget

A cor de fundo pode ser mudada do branco para qualquer cor alterando o valor hex na mesma linha do código:
var so = new SWFObject("https://sites.google.com/site/comofazerumsitecom/ficheiros/nuvemtags.swf", "tagcloud", "230", "210", "7", "#ffffff"); Por exemplo se preferisse o vermelho para cor de fundo, teria que substituir #ffffff por #ff0000.

Veja aqui a tabela de "Cores HTML"

3. Para alterar as cores do texto do gadget

O texto está definido com a cor cinza (valor hex #333333) Mas você pode alterar esta variável na seguinte linha:
so.addVariable("tcolor", "0x333333");
Tenha em atenção que "tcolor" é uma variável flash e não inclui o habitual símbolo cardinal (#) nos códigos de cor hex. Substitua apenas os números, ok?.

4. Para ajustar o tamanho da fonte do gadget

O tamanho máximos das tags é definida na seguinte linha:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='10'><data:label.name/></a></b:loop></tags>")
Você poderá alterar esse valor se preferir que as tags sejam apresentadas numa fonte maior ou menor.

À medida que você estiver fazendo as alterações poderá  pré-visualizar o seu gadget para se assegurar que a sua escolha para as cores e as dimensões correspondem ao que realmente você quer.


É isso ai gente, agora divirta se com o seu mais novo gadget e continue a blogar tranquilamente, mas com algo a mais no layout do seu blog.

Fonte: Como Fazer um Site
Imagens: Google Imagens