How To Add Flash Animated Label Tags Cloud Widget For Blogger ( blogspot )

i all, 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.
but because we all want our blogs look great for our visitors, we need to give this labels good style,
So now, we’ll learn how to add amazing tag/labels cloud widget to our sidebar instate of the normal one that presented by 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

You can find it by clicking ctrl+f in your browser.
And past 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'>
<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'></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;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Click save template and now check your Blog. And enjoy.

Hints.
- You can change it’s location at your side bar by going to dashboard >> layout
and move it up or down.
- you can change the widget width and height by editing this part in the code.

^?View Code HTML