Nuvem de tags em 3D no blog
Hoje 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. Seguir @DicashotOficial
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 "";
___________________________________________________________________________________
<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='"widget-content " + data:display + "-label-widget-content"'> <b:if cond='data:display == "list"'> <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='"label-size-" + 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'>
<object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<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>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</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.
 |
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 " #ffffff ");
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.
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 " #ffffff ");
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:
