How to Install Label Tag Cloud Animation

Did you ever see the widget tag cloud like this next picture?. Widget tag cloud is a more elegant impression as if the motion presents an animated cursor is directed to the widget. So far, you probably know only the standard tag cloud with keywords that only differ in the amount of letters only. Well, for those of you who like to tamper with blogs, tutorials this one deserves for you to test. Ok, let's start with a simple way. First step, please login and go to your blogger account and navigate to Layout> Edit HTML (do not forget to download the full template for you to backup if something unexpected happens).

Find the code below :

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

Place the code below exactly under the code above:

<b:widget id='Label88' locked='false' title='Tag Cloud' 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://hermanblogtips.blogspot.com'>Herman Blog</a></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;200&quot;, &quot;150&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='14'><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>

When finished, Save the template

To change the display settings for the 200 as wide and high as 150 numbers. adjust the size of your template sidebar. Ffffff code as a background color and figures showing 333,333 colors text and numbers as text size 14. You can replace it with a customized template view.