Friday, July 17, 2009

Blogumus Animated Label Cloud Widget

This is probably the coolest label widget for Blogger I've come accross so far. This widget is named Blogumus after the original Cumulus plugin created by Roy Tanck for Wordpress. All credits goes to Amanda from Blogger Buster for successfully converting the Blogumus and get it to work with Blogger powered blogs. Click on the Blogumus and simply hover around it to see the animation in action.

Installing the widget

Login to your Blogger account and from your Blogger Dashboard, choose Layout. Choose Edit HTML and search for the following line:

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

Paste this code immediately after the above line
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='widget-content'>
<script src='' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href=''>Roy Tanck</a> and <a href=''>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
<b:include name='quickedit'/>
Preview the template and you should see the Blogumus on your sidebar. Save your template. You can now adjust the widget's position in Layout > Page Element.

Customizing Blogumus
var so = new SWFObject("", "tagcloud", "240", "300", "7", "#ffffff");

background color

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

text color

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

rotation speed

values='data:labels' var='label'><a expr:href='data:label.url' style='12'><></a></b:loop></tags>&quot;);

text size

For more info, visit Blogger Buster. If the above code doesn't work for your blog, you may try the alternative installation method.
Stumble Delicious Technorati Twitter Facebook
If you enjoyed this post, make sure you subscribe as an Reader!


Post a Comment

← Newer Post Older Post → Home

Recent Posts

Recent Comments

Follow Me - Advertise your site at! Submit your site and get tons of traffic! - Advertise your site at! Submit your site and get tons of traffic!