New Improved Blogumus: A flash animated label cloud for Blogger!

Hi Friends, did you notice the animated flash tag cloud (aka Blogumus) placed in the sidebar of this blog. Hover your mouse over the Flash object to see the animation begin, isn’t that cool. “Blogumus” is a Flash based tag cloud widget which uses scripts converted from Roy Tanck’s WP Cumulus plugin for WordPress. I am sure many of you might also be looking for to learn how to convert this for use in Blogger powered blogs. In this post, I’ll explain how you can add Blogumus to your own Blogger layout with ease!

Recently a lot of people have been  complaining that after successful installation of Blogumulus,the flash based tag cloud doesnt animate or worse is showing some kind of pluggin missing error. A more careful observation revealed that the error was some access related issue with Amazon’s S3 storage services. This can easily be fixed by moving the tagcloud.swf and the swfobject.js files to another hosting service.

However, for your convenience I have already updated the code required to run this widget to activate links in the tag cloud Flash movie. If you have already installed Blogumus, please replace your widget code with the new updated code, or reference the following lines to modify your existing installation.

http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js
with
http://mopheat.site40.net/recources/tagcloud/swfobject.js
And Replace :
http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf
with 
http://mopheat.site40.net/recources/tagcloud/tagcloud.swf

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout: Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

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

Immediatly after this line, paste the following section of 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://mopheat.site40.net/recources/tagcloud/swfobject.js’ type=’text/javascript’/>
<div id=’flashcontent’>Blogumulus by <a href=’http://www.roytanck.com/’>Roy Tanck</a> and <a href=’https://www.electronicgurudev.in’>Anchit Pandey</a></div>
<script type=’text/javascript’>
var so = new SWFObject(&quot;http://mopheat.site40.net/recources/tagcloud/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>

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location. That’s all!

Customizing Blogumus

Once installed in your template, it should work “out of the box” without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate 🙂 You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. In this default installation, Blogumus includes the following preset variables:

Width is set to 240px

Height is set to 300px;

Background color is white

Test color is grey

Font size is “12”
If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code.

READ :  Gmail DOT (.) Trick

I’ll go through these options in the order they appear in the widget code.



Editing width and height
The variables for width and height are found in this line of the script:

var so = new SWFObject(“http://mopheat.site40.net/recources/tagcloud/tagcloud.swf”, “tagcloud”, “240”, “300”, “7”, “#ffffff”);

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in green. These numerical values specify the width and height in pixels, so you can alter these of you prefer.


Editing background color
You can change the background color from white to any other color by altering the hex value in the same line:

var so = new SWFObject(“http://mopheat.site40.net/recources/tagcloud/tagcloud.swf”, “tagcloud”, “240”, “300”, “7”, “#ffffff”);

For example, as in my case to make it look like transparent I have replaced Its background color with the template background color. Take a look at this page for a list of commonly used hex color codes.

Alter the color of text
By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable(“tcolor”, “0x333333”);

Be aware that “tcolor” is a Flash variable and doesn’t include the usual hash symbol of hex color codes. Be sure to only replace the numbers!

Adjust the font size
The maximum font size of tags is specified in this line:

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>”);

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing “12” to a larger or smaller number. While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

Change Hover Color

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>”);

replace style=’12’ with class=’id’.

now place 

.id
{
font-size:18;
}
a:hover {color:red;}

between . Change Red with desired color you want for hover effect. Enjoy!

Support/Issues

If you have any problems installing or using this widget, please leave your comments below or direct these to the Electronic Gurudev.

Requirements
For Blogumus to display properly in your template, you will need to have Flash Player 7 or higher. You can download the latest Flash Player plugin for your browser from Adobe. I’m not sure that this installation will support special characters as tags (only Latin characters supported at present). If you do experiecce issues with labels displaying incorrectly, please let me know. I’ll try to add more support, but have very little experience using Flash!

What Do You Think?

I hope that you will certainly enjoy using Blogumus in your own Blogger blogs! Please feel free to share or bookmark this page with your favorite bookmarking service if you think it is worth a mention, or subscribe to the newsfeed to learn of more great Blogger tutorials and Gizmos Reviews as they are published.