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'>
<div class='widget-content'>
<script src='' type='text/javascript'/>
<div id='flashcontent'>Blogumulus</div>
<script type='text/javascript'>
var so = new SWFObject(&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'><></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
<b:include name='quickedit'/>
4.  Preview your blog.
5.  If you see the widget running perfectly then SAVE it.


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. ^^


bubulleD said...

I can't fine that line in my HTML code (step 2).
What can I do?

Anirudh said...

I can't find the code that you said in the step 2. What should I do? Please Help Somebody fast!!

etrooper said...

You can't find:
b:section class='sidebar' id='sidebar' preferred='yes'
because you probably use different template.
Try searching for:

b:section-contents id='sidebar-right-1'>
b:section-contents id='sidebar-left-1'>

and insert the code after these ones.

Anonymous said...

thnxs for code...

Anonymous said...

thnks for code worked well

Rocelo Abrea said...

How to change background color?

mademoisellealex said...

I tried but it's not ok in my blog
thank you

Penueli Poul Mtafya said...

help me plz it seems but does not tag words.

Penueli Poul Mtafya said...

its operates without the words of the labels plz help me.

Sarah Doyle said...

It is not tagging labels. It just says "Blogumulus."

George Kaizomlal M.Div said...

Thankyou its working.

The tags in the cloud are only the label how may i customize the tags float to display only some specific words that i like but not the words/tags of label.

I mean to display some particular words/tags that i like but not the words/tags of the label.

may you suggest some steps?

thank you

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
jak said...

nice post I would try on my site as well

Anonymous said...

I am sure you have a great fan following out there.

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Recent Post


Tag Cloud


Random Posts