sexta-feira, 17 de setembro de 2010

Colocar uma nuvem de tags

Descrição: 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.

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.

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.
Página Layout
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.

2 comentários: