domingo, 11 de setembro de 2011

Como inserir uma nuvem de marcadores animada em um blog

  image    Bem, agora vou ensinar como colocar uma nuvem de tags animada(como aquela que tem no final deste blog) em um blog do blogger.
    Como sempre começa, vá em painel, layout e editar HTML, não precisa expandir os modelos de widgets.
Encontre o trecho

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

     Fica mais fácil de procurar esses trechos(coisa bem chata neh) apertando control + f no navegador, ai vc digita o código e clique em próximo.

     E logo abaixo cole o código

<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'>
<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></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

   Agora visualise o blog. se a nuvem não aparecer embaixo das postagens não se preocupe, você poderá mudar o lugar dela mudando os marcadores(vai aparecer mais um marcadores) para baixo das postagens ou para onde bem entender.

   Se estiver tudo certo salve o modelo.

   agora vamos modificar o tamanho da sua nuvem de tags
   Por padrão ela deverá aparecer na barra lateral do blog com um tamanho de 240 X 300,mas se você quer adicionar ela abaixo dos posts devera mudar o tamanho, isso pode ser feito assim:
     Encontre o texto

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff")

    A altura é a parte destacada em azul(300), a largura é o em vermelho(240), o "7" é o tamanho da fonte na nuvem e "#ffffff" é a cor das tags, em hexadecimal.
neste blog por exemplo, para adicionar a tag abaixo das postagens ficou

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "500", "530", "12", "#ffffff")

    E adicionei o widget abaixo das postagens
   Se você gostou desta postagem assine nossa newsletter e receba nossas atualizações diretamente em seu e-mail.

Nenhum comentário:

Postar um comentário