Thursday, December 9, 2010

How to add animated label/tag cloud for Blogger blogs!

0 comments
How can I get a Wordpress styled Flash based animated label/tag cloud for Blogger blogs!


Many of our friends had asked for animated label/tag cloud as seen on most of the Wordpress blogs. It is known as WP Cumulus plugin. Now it is also available for blogger blogs.

Live Demo

Let's add this to you blog.

1. Sign in to Blogger dashboard and go to Design > Edit HTML. Remember to download full template for backup.

2. Pres CTRL F and look for
Code:

<b:section class='sidebar' id='sidebar' preferred='yes'>
           or similar code.  
3. Just after that code paste following code   
 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>


It's done!
Preview your blog for this new tag cloud. It is available as Labels in your Page Elements section. You can drag and drop to anywhere then.

4. Customization
Look at the code given in step 3
240 and 300 are width and height.
ffffff is the background color.
333333 is the text color.
100 is animation speed.
12 is the text size.

Also upload following files to your host on Google for free.

<FONT color=black>
HTML Code:
http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swfhttp://sites.google.com/site/bloggerustemplatus/code/swfobject.js

0 comments:

Post a Comment

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more