Animated Flash Tag Cloud For Blogger !!!

       Make your readers immovable with a cool widget that helps viewers/readers trace their content they needed. Can't get what i am saying ???!!!. It is nothing but, 'Labels'... Search using clouds. But this is a widget that every Blogger user have.... What is special in that.

Imagine a widget which is animated or flash that actually rotates and revolves when you mouse hover it. All your Blog's LABELs revolve round in the flash widget. And i think now you can get that...

Animated Tag Clouds !!!

The below are the websites with such widget...

• http://blog.vivekanandan.in (Off course it is my blog or the blog which you stay in ....Look at the sidebar for the widget)
• http://tedxchennai.com/blog/ The Official Blog of TEDxChennai. You will find in the right hand side bar. Last widget....

Now login to your blogger dashboard and then go to your blog's DESIGN and after that EDIT HTML....

And now do not forget to check the EXPAND WIDGETs option. After that, use your browser's FIND feature and find the below one line code in your blog's html.... If you find it, then just copy the HTML code in RED and paste after the line that is found....If you didn't find the below code, then use your browser's FIND feature and search for id='sidebar' and after that line paste the HTML code in RED....

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

Below is the HTML code that you are going to insert into your blog's HTML 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='https://sites.google.com/site/infivivek/vivsoft-tutorials/tutorials-blogger/blogger-tools-resources/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Animated Flash Cloud by <a href='http://blog.vivekanandan.in/2010/09/animated-flash-tag-cloud-for-blogger.html/'>Vivekanandan Manokaran. Credits: Roy Tanck & Blogger Buster & Blogger Stop</a></div>

<script type='text/javascript'>

var so = new SWFObject(&quot;https://sites.google.com/site/infivivek/vivsoft-tutorials/tutorials-blogger/blogger-tools-resources/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>

 Alter the Width and Heigth:

      var so = new SWFObject("https://sites.google.com/site/infivivek/vivsoft-tutorials/tutorials-blogger/blogger-tools-resources/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

  The numbers indicated in blue color are the pixels of width and height.. You can alter this by changing the pixel size there. Do not alter anything other than this, widget will not work.

Changing the Background Color:

var so = new SWFObject("https://sites.google.com/site/infivivek/vivsoft-tutorials/tutorials-blogger/blogger-tools-resources/swfobject.js", "tagcloud", "240", "300", "7", "#ffffff");

 Now it is the time for us to alter the Background color of the widget. You can do so by changing the html code of a background color. For example, here the specified color is #ffffff ... And you can alter to the color you wanted to. If you are confused in choosing the color, just go to your TEMPLATE DESIGNER and then find the recommended color for your theme and then copy the HTML code of that particular color and alter in the widget's html code.

Altering the TEXT Color:

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

         Now you have guessed that the above snippet determines the color of your widget. And you can edit it too. In the above code, tcolor refers to the text color and the value for that tcolor is by default 333333. Now you can change the text color by the same way you did for changing the background color.
One thing is very important, when altering the color of the text, you must specify the color of the html code in hexa. And what you have to do is, simply ignore the # and just copy and paste the rest of the six digits.