Carregando atualizações...

X

Nuvem de tags em 3D no blog

Nuvem de tags em 3D no blogHoje falarei aqui no DicasHot algo que vocês com certeza iram gostar... e é algo bem interessante, porque também chama atenção dos buscadores, como o Google, o Yahoo, o Bing, etc. Ensinarei aqui no DicasHot a como colocar uma nuvem de tags em 3D no seu blog. Veja a imagem ao lado, pois, é exatamente assim que irá ficar. 

                 

Colocando o código

1° passo: Vá até o painel do seu blog e clique em "Design"; entrando em design, clique em "Editar HTML" e em sequência clique em "";

Após feito isto, procure pelo código: (Apenas dê um Ctrl+F e procure pela primeira linha do código abaixo).
___________________________________________________________________________________
<b:widget id='Label1' locked='false' title='Categorias' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><img src='http://i32.tinypic.com/241wktu.jpg'/><data:title/></h2> </b:if> <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> <b:if cond='data:display == &quot;list&quot;'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='&quot;label-size-&quot; + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
___________________________________________________________________________________

2° passo:  substitua tudo que está entre <b:includable id='main'> e </b:widget> pelo código abaixo:


<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://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf"
width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/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>


Lembrando que o código acima já contém o <b:includable id='main'> e </b:widget> então cuidado para não repetir o mesmo código por que pode dar erro.

Colocando o código, irá aparecer no seu template um gadiget em Elementos da Página com o nome Labels.



Nuvem de tags em 3D no blog

Observação: Para que o código funcione, você precisa ter marcadores no seu blog!!!

''Quanto mais marcadores você tiver mais bonito ficará a sua nuvem de tags''.


Personalizando o básico

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, aqui tem o código de várias cores basta trocar as letras.

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 número 12 é o tamanho da letra então altere como quiser.

Se inscreva e receba nossas atualizações por e-mail:





Cursos 24 Horas

Cursos Online

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0