Flash animated label cloud for Blogger

You might be wondering how I have added a flesh animated label that you can see on right column of my blog.

You can do that simply by installing Blogumus in your Blogger layout. Here is how you can do that.

Step 1: Go to Layout>Edit HTML in your Blogger dashboard, and search(crtl+f)  for the following line (or similar):

<b:section class="sidebar" id="sidebar" preferred="yes"> or <b:section-contents id="sidebar-right-1">

Step 2 :Immediately after above lines, paste the following section of 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(&quot;http://sites.google.com/site/bloggerustemplatus/code/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>

Step 3: Then preview your template to see if it is  installed correctly, you should see the tag cloud appear in your sidebar.Also check the size and dimension. If it is fit, then it is good otherwise do following customization.

Step 4: To change the dimensions, find the following section of code

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

In above code, 240( marked in red) is the width and 300( in blue) is height in pixel. Change them to desired value. Finally, color code #ffffff (in green) is the back ground color. You can change it to any other color using html color codes.

Click here for more blogger tricks

Share