Alternative installation for blog ~ Graffititools

Blogumus is an animated tag cloud widget for Blogger powered blogs, which has proven to be the most popular widget ever published on this site.

Most bloggers have been able to install this flash-based widget successfully using the default installation instructions. However, for those using long label names or who have many JavaScript/Flash based widgets present in their blog layout, there seems to be a "blank widget" issue where Blogumus is present but will not display the animated tags.

Thanks to some helpful insights from Roy Tanck (the original author of Cumulus on which this widget is based), I've been able to construct an alternative method for installation which embeds Blogumus as a flash object rather than relying on JavaScript.

If you have experienced problems in displaying Blogumus in your Blogger template, this alternative method for installation should enable Blogumus to display correctly for you.

How to install Blogumus using this alternative method

This method of installation is very similar to the original one.

Firstly, go to Layout>Edit HTML in your Blogger dashboard. Do not check the "Expand widget templates" box as this would complicate the process!

Using your browser's search function, find this line in your template code:

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

Immediately 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'>

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >

<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>

<b:loop values='data:labels' var='label'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

</tags>" />

<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>

</object>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Now preview your template. If the installation is successful, you should see the Blogumus widget appear in your sidebar. You can then proceed to save your template.

This version of Blogumus should display all of your labels without issue, and can be moved to other sections of your layout through the Layout>Page Elements screen.

Customizing this alternative Blogumus installation

As with the original widget, it is possible to customize some aspects of Blogumus to better match the style of your blog.

By default, this installation uses the following values:

The width is 250px

The height is 200px

Background color is white

Text color is black

Font size is 12

All of these options can be changed by editing the code used to display this widget. Here is how you could customize these options:

Change height and width

Both of these options can be configured in the following line:

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >

Change these dimensions (in pixels) to a more appropriate size for your sidebar or widget section. Note: it is better for the tag cloud to be wider than it is tall (landscape proportions) which enables proper display of the tags.

Change background color

To change the background color, alter the hex value found in this line:

<param name="bgcolor" value="#ffffff" />

By default, this is set to white, but you can alter this to any value you prefer.

Change the color of text

The tag-links are black by default, though you can change this within the following line using the tcolor value:

<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>

This six character tag is actually a hex value without the preceeding # symbol. You can alter this to be any hex color code you prefer.

To alter the size of tags/links

In the following line of code, the size of the tag links is "12" (proportionate to the size of the widget). You can change this value to a smaller or larger number depending on whether you prefer the links to appear smaller or larger in your widget.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>

For example, if you prefer smaller links, change this value to "10" (or even smaller). You can always preview the changes before saving to ensure the links appear in the style and size you prefer.

As far as I can tell, no labels should be "missing" from the cloud (an issue reported by many in the previous thread, for which we cannot discover the problem!).

If you do experience issues with this alternative method, please do let me know.

Posted in: Blogger Tips