3D Rotating Tag Cloud for Blogger (Cumulus Cloud)

Today I implemented a rotating 3D tag cloud, called a Blogumus.  Such a script was initially written as a plugin for WordPress, called WP-Cumulus.

But Amanda from BloggerBuster has ported a version of the WordPress plugin to Blogger; and it's now called Blogumus.

Here's an example of the Blogumus in action:





Implementing the Blogumus for your Blogger blog is very easy:

1. Find the side-bar section in your layout's html. The sidebar section starts with the following tag:
   
   
   

   <b:section class="sidebar" id="sidebar" preferred="yes">

   
   
2. In your side-bar section (ie in the tag mentioned above), paste the following code:
   
   
   

   <b:widget id='Label99' locked='false' title='Labels' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
   <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
   <script type='text/javascript'>
   var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
   // uncomment next line to enable transparency
   //so.addParam("wmode", "transparent");
   so.addVariable("tcolor", "0x333333");
   so.addVariable("mode", "tags");
   so.addVariable("distr", "true");
   so.addVariable("tspeed", "100");
   so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
   so.addParam("allowScriptAccess", "always");
   so.write("flashcontent");
   </script>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
   

   
   
   

To customize the dimensions and background-color, modify the following line from the code above:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The default values are:

• Width: 240
• Height: 300
• Background Colour: #ffffff

To change the color of the font, modify it from the following line:

so.addVariable("tcolor", "0x333333");

The default color is #333333

This tutorial was adopted from Amanda's Tutorial.