Inspired From Myself: Create Animated Tag Cloud for your Blogger

Hello.

Once again I modified my blog template. I was thinking of having a 3-D rotating tag cloud for my blog but could not find it anywhere. I've always loved this rotating tag cloud over simple one. So I decided to dedicate my today's leave for it and after a bit more search, finally I found the way. It looks something like this:

I'm sharing the way with you over here.

First of all you need to have your blog on blogspot with some posts with different tags or labels.
Then in your blog layout option, you need to have the LABEL widget placed in the sidebar.
The labels over there can be present either list or cloud. You select the cloud option for yourself. Save and exit.
Then also save the arrangement.
Now over there, go to Edit HTML option and save your current template for back up purposes.
Once done with it, time to make some changes to the HTML settings of your blog.
Find the following or similar line in the HTML content:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
Now carefully replace this line with the following 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://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "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>

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..!!

In this default installation, tag cloud includes the following preset variables:

Width is set to 240px
Height is set to 300px
Background color is white (#ffffff)
Text color is grey
Font size is "12"

To change any one of them, we need to make changes to the individual variables. Consider the following:

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

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Here 240 is the default width, 300 is the default height and ffffff is the default background color in hexadecimal code. Make necessary changes here.

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

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

And finally its over. First preview it and if every thing goes well, just save your template and enjoy your own new rotating 3D tag cloud.

Feel free to share your experiences and problems here with me.

Keep advancing and Happy Computing. :))

Credit: bloggerbuster