WP Cumulus Tag (Animated) for Blogger

Many blogger owner want their blog atractive, fresh and great design. Now, there is some widget call tag cumulus which display tag label more fresh look. Cumulus allows you to display your site's tags using Flash that rotates them beautifully in 3D. It works like a regular tag cloud, but is more visually exciting. How to add this widget onto your blogger?

Step 1: Back it Up

Make sure to back up your Blogger Template before doing anything else!

Step 2: Change Page Element

Log into your blogger account, then go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the this code (or similar ones)

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

And after it, paste this button code

<b:widget id='Label9' locked='false' title='Tag' 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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "300", "200", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Step 3: Save and Refresh

Click save template and refresh your home blog

Step 4: Edit your own color/font

Change your own cumulus style with find this code

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

Note:
300: means height
200: means width
#ffffff: means widget background color

Change and optimize this widget with your sidebar measure.

To change your font color, find this code:

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

Note:
333333: means font color

Replace font color code (333333) with your own color.

If you want to change font size, find this code:

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

Note:
12: means font size

Replace this number (12) with your own font size.

Note:
text / number above #FFFFFF or 333333 is a hexadecimal html color code. If you want to see more other code please visit HTML color codes.

Step 4: Save and refresh (again)

After finish those step, click save template and look again your home blog.

I hope this usefull.

Thanks for IQ