Assim que fica a nuvem de tags
Uma nuvem de marcadores 3d é um efeito bonito e facil, você deve ter visto já aqui mesmo na sidebar no Noticia e blog então vamos aprender a fazer uma no seu blog, lembrando que antes de tudo isso é legal fazer um backup do seu template pois se alguma coisa der errado você pode reverter facilmente.Vamos começar:
1.Faça login no blogger
2.Vá em layout » Elementos da página » Adicionar um Gadget » Marcadores
3.Após adicionar um marcador vá para layout » Editar Html
4.Clique em expandir modelo Expandir modelos de widgets e usando as teclas CRTL e F procure pelo nome que você deu ao seu marcador se foi categorias pesquise esse nome se foi marcador pesquise marcador após encontrar você verá um código parecido com esse:
<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>
5.Agora substitua tudo que está entre <b:includable id='main'> e </b:widget> por esse 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>
<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>
6. 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
7. width="250" height="200" deve ser alterado de acordo com a largura e altura do seu template para que perfeito
8.Visualize para ver se deu tudo certo e Salve as alterações.
7. width="250" height="200" deve ser alterado de acordo com a largura e altura do seu template para que perfeito
8.Visualize para ver se deu tudo certo e Salve as alterações.
Nenhum comentário:
Postar um comentário