Animated Flash Tag Cloud For Blogger ~ Log-Tutorial

STEP #1

Log in to Blogger, go to Layout -> Edit HTML

Now find this 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'>

    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
        &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
        &lt;param name="bgcolor" value="#ffffff" /&gt;
        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
      <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>
&lt;/tags&gt;" /&gt;
        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
    &lt;/object&gt;


  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Now click Save Template

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:

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

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:

&lt;param name="bgcolor" value="#ffffff" /&gt;

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:

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

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.