1º Vá à secção Esquema (ou Layout), e clique em "Editar HTML". Procure a seguinte linha:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Imediatamente a seguir a essa linha cole o seguinte código:
Visualize Para Ver Se Não Tá Nada Errado.
ATENÇÃO: Para ser possivel ver a nuvem de tags em acção, é preciso que já tenha adicionado etiquetas/marcadores a algum dos seus posts.
Modificando a Nuvem
Por defeito, a Nuvem inclui as seguintes variaveis 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 preferir pode tornar o seu widget maior, mais pequeno, pode mudar o esquema de cores, etc. Para fazer isso terá que editar as diferentes partes do código. Vou percorrer estas opções na ordem em que aparecem no código:
1 . Alterar a largura e a altura
As variaveis para a largura e para a altura podem ser encontradas na seguinte linha do código:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "230", "210", "7", "#ffffff");
2. Alterar a cor de fundo
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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "230", "210", "7", "#ffffff");
Por exemplo se preferisse o vermelho para cor de fundo, teria que substituir #ffffff com #ff0000.
3. Alterar as cores do texto
Por defeito, o texto está definido com a cor cinza (valor hex #333333). Você pode alterar esta variavel na seguinte linha:
so.addVariable("tcolor", "0x333333");
Tenha em atenção que "tcolor" é uma variável flash e não inclui o habitual simbolo cardinal (#) nos códigos de cor hex. Subsitua apenas os números.
4. Ajustar o tamanho da fonte
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>");
Pode alterar esse valor se preferir que as tags sejam mostradas numa fonte maior ou mais pequena.
À medida que faz estas alterações pode ir visualizando o seu widget para se assegurar que a sua escolha para as cores e dimensões corresponde ao que pretende.
Espero Que Gostem, Pois Eu Gostei ;D
<b:section class='sidebar' id='sidebar' preferred='yes'>
Imediatamente a seguir a essa linha cole o seguinte código:
<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 Tags para Blogger</a><br/>por<br/><a href='http://comofazerumsite.com'>Como 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>
Visualize Para Ver Se Não Tá Nada Errado.
ATENÇÃO: Para ser possivel ver a nuvem de tags em acção, é preciso que já tenha adicionado etiquetas/marcadores a algum dos seus posts.
Modificando a Nuvem
Por defeito, a Nuvem inclui as seguintes variaveis 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 preferir pode tornar o seu widget maior, mais pequeno, pode mudar o esquema de cores, etc. Para fazer isso terá que editar as diferentes partes do código. Vou percorrer estas opções na ordem em que aparecem no código:
1 . Alterar a largura e a altura
As variaveis para a largura e para a altura podem ser encontradas na seguinte linha do código:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "230", "210", "7", "#ffffff");
2. Alterar a cor de fundo
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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "230", "210", "7", "#ffffff");
Por exemplo se preferisse o vermelho para cor de fundo, teria que substituir #ffffff com #ff0000.
3. Alterar as cores do texto
Por defeito, o texto está definido com a cor cinza (valor hex #333333). Você pode alterar esta variavel na seguinte linha:
so.addVariable("tcolor", "0x333333");
Tenha em atenção que "tcolor" é uma variável flash e não inclui o habitual simbolo cardinal (#) nos códigos de cor hex. Subsitua apenas os números.
4. Ajustar o tamanho da fonte
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>");
Pode alterar esse valor se preferir que as tags sejam mostradas numa fonte maior ou mais pequena.
À medida que faz estas alterações pode ir visualizando o seu widget para se assegurar que a sua escolha para as cores e dimensões corresponde ao que pretende.
Espero Que Gostem, Pois Eu Gostei ;D
Comentários
Postar um comentário