Nuvem de Tags Flash em Carrossel

Este post irá mostrar como criar uma nuvem de tags com efeito carrossel, criado por Devirtuoso e disponibilizado por Blogger Themes.

VEJA UM EXEMPLO

Se você quiser adicionar este efeito em seu template no Blogger, é só seguir os passos abaixo:

Faça o backup do seu template, antes de fazer qualquer modificação

1. Copie o código abaixo e cole ACIMA de ]]></b:skin> (use Ctrl+F para encontrar)

#item{ width:100px; height:100px; margin:0 auto; position: relative; } #item ul{ list-style:none; }

2. Agora copie este código e cole DEPOIS de <div id='content-wrapper'> (este trecho pode variar em templates personalizados)

<div id='tag-wrap'> <b:section class='tag-wrap' id='tag-wrapper' preferred='yes' showaddelement='no'> <b:widget id='Label6' locked='true' title='Carousel' type='Label'> <b:includable id='main'> <b:if cond='data:title'> </b:if> <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> <b:if cond='data:display == &quot;list&quot;'> <div id='item'> <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> </div> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='&quot;label-size 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 class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section> </div>

* se não quiser que apareça o número de posts em cada tag, apague os trechos (<data:label.count/>)

3. Copie o próximo código e cole ACIMA de </body>

<script src=' http://coolwebbies.googlepages.com/jquery-1.3.2.min.js' type='text/javascript '/> <script charset='utf-8' src='http://coolwebbies.googlepages.com/3DEngine.js' type='text/javascript'/> <script charset='utf-8' src=' http://coolwebbies.googlepages.com/Ring.js' type='text/javascript '/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { var camera = new Camera3D(); camera.init(0,0,0,300); var container = $("#item"); var item = new Object3D(container); item.addChild(new Ring(200, $("#item ul li").length)); var scene = new Scene3D(); scene.addToScene(item); var mouseX,mouseY = 0; var offsetX = $("#item").offset().left; var offsetY = $("#item").offset().top; var speed = 6000; $().mousemove(function(e){ mouseX = e.clientX - offsetX - (container.width() / 2); mouseY = e.clientY - offsetY - (container.height() / 2); }); axisRotation.x = 1.5; var animateIt = function(){ if (mouseX != undefined){ axisRotation.y += (mouseX) / speed; } scene.renderCamera(camera); }; setInterval(animateIt, 20); }); //]]> </script>

4. Clique em SALVAR MODELO.

• 
  
  
  
  
  
  Para garantir que não terá problemas futuros com o funcionamento do arquivo JavaScript, faça o download, hospede em sua própria conta, pegue o endereço do mesmo e substitua no código. Os links estão na cor AZUL.
  
  
  
  
  
  
  Download JS

Se quiser diminuir a velocidade da rotação do carrossel, AUMENTE O DÍGITO deste trecho:

setInterval(animateIt, 20);

• Visualize para ver se está do seu gosto e SALVE!
• Aconselho a usar entre 30 e 40, que foi a velocidade testada por mim.

Boa sorte e sucesso!

Posted in: Tutoriais,Widgets