How-To Add A 3D Spherical Animated Tag Cloud For Blogger

Tag Cloud, Categories, Labels or whatever they call call it. These widgets are very important in a blog. This helps a user to navigate further your blog easily. The usual widget shows the list of the labels you have in your post which is kinda normal to a blog. Some bloggers are experimental in nature and want some new stuff running in their blogs and this widget fit them most.

This widget is a 3D Spherical Animated Tag Cloud Widget. As the name implies, this animated so the labels or categories that it shows are moving. Or not really, if a visitor hover his mouse to the widget then the labels will start rotating in a spherical pattern. Nice huh! Below is an image of the widget I have in my blog.

Add 3D Spherical Animated Tag Cloud On Blogger:

1.  Go to your Dashboard > Design > Edit HTML.
2.  Find the code below:

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

3.  Copy the code below and paste it direct under the code in step 2: 

<b:widget id='Label99'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://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus</div> <script type='text/javascript'> var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;160&quot;, &quot;200&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;0x800060&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.  Preview your blog.
5.  If you see the widget running perfectly then SAVE it.

Configuration:

Find the numbers below and change it as you needed.

Text color: 800060 (purple in as default in the code above)
Height: 200 px
Width: 160 px
Font size: 12

Hope you have the widget running perfectly in your blog. Leave a comment if there's something wrong. ^^