quarta-feira, 14 de agosto de 2013

Tag de marcadores 3D no blogger



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='&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>
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'>

&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>
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="200deve 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

Traduzido Por: Template Para Blogspot - Designed By Seo Blogger Templates