26 September, 2009

Get Flash Animated Label Tags Cloud Widget For Blogger ( blogspot )

blogger blogging platform by default give you the ability to add Labels for your post, so you can add and display your blog Labels at your sidebar.Displaying animated cloud is a cool way of showing your tags in a limited space.Adding Animated label tag cloud widget to blogger.
We’ll do it in few steps.
1. Log into your blogger account.
2. Go to dashboard >> layout >> Edit HTML
3. Find the next code.

<b:section class='sidebar' id='sidebar' preferred='yes'>
You can find it by clicking ctrl+f in your browser.And paste the next code just after the above code.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/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;);
<b:include name='quickedit'/>
 4. Click save template and now check your Blog. And enjoy.

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″

The variables for width and height are found in this line of the script:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
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://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

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

The maximum font size of tags is specified in this line:
so.addVariable("tagcloud", "");


  1. thanks...


  2. I've got another solution on displaying the labels/tags in a column/row list. You may want to check it out: How to List Labels in Column/Row Display on Blogger

  3. hy, i didnt get this code<-- -->
    pls help me..

  4. i Can't find the code..my HTML code only have header, foot, main, tab...the 'sidebar' can't found..


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,