Blogomus: A Better Labels Widget

From the very common TAG CLOUD, I've switched to the new, animated, flash based BLOGOMUS labels widget. "Blogumus" is a Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plug-in for Wordpress. Obviously, blogspot owners can get one for their site too because I was able to get one. Due to an unexpected malfunction of my template, I switched to a new one. Right now, I'm having a hard time putting the BLOGOMUS widget back. Still, you can try putting it in your site.

Look at my sidebar. Again, you won't see it in there right now for I have switched to a new template. Try this site instead. If you try to hover the mouse pointer over it, the labels sorta spins in a wheel-like direction. Kewl, right? So kewl that I have received requests to post a tutorial on how to get one. This post took me forever to make because posting HTML tags in "compose mode" is so freakin' hard. But for you valued friends ,I'll climb the highest mountains & swim the deepest of seas! Haha. So yeah, here it goes. Remember to back up your template, ok? We don't want to regret messing up our templates, don't we? (As i have soooo many times before! Dumb*ss) So go to LAYOUT then click on EDIT HTML. Next is you search for this line:

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

An easier way to do this is by pressing CTRL F. I've told you that before at my tutorial with Favicons (found here). It is also important to note that the above code may look different from other templates. So after locating that line, add the code below immediately after it:

<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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&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'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Like me, you may wanna have to customize your BLOGOMUS to fit the size of your sidebar and the style of your blog. Here's how: the default values are the following: WIDTH 240px, HEIGHT 300px, BACKGROUND COLOR white, FONT COLOR grey, FONT SIZE 12. Just edit the variables you want by replacing the desired value or color.

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

"240" refers to the width, "300" refers to height while "#ffffff" refers to white. Just play with it to get the desired width, height and backround color of your Blogomus

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

"0x333333" refers to the font color which is grey. You could edit it and change it to any color you want provided, of course, that you know the color codes of the chart. Worry no more because I've got the color chart right here for you. Love me! Love me! Love me more!!!Haha.

so.addVariable("tagcloud", "");

Lastly, change the font size of your labels. That's the "12" in the above code. So There you go, you've just made your customized, animated BLOGOMUS widget! Haha.

Thanks to Blogger Buster for the help in making this post.

By Joe with 10 comments