21 July 2010

WP Cumulus a Flash based animated label/tag cloud for Blogger blogs!

Advertisements

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

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

or similar code.

3. Just after that code paste following 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
.
http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf
and
http://sites.google.com/site/bloggerustemplatus/code/swfobject.js 



Limitation:  This may or may not work with custom domain.

Credits:
WP Cumulus is created by Roy Tanck for wordpress and bloggerised by Amanda of Blogger Buster.

Related Posts

41 comments

July 22, 2010 at 8:10 AM

@drraman i want to up and down my posts, because when i post new post it comes on the top, i want it to be in the last. is it possible!

July 22, 2010 at 8:46 AM

@drraman i am not getting it, please have a look on my code

July 23, 2010 at 12:15 AM

can you find
<b:section class
in your code?

July 23, 2010 at 1:24 AM

@drraman i got thiskind of thing on my blog ...yes i got it !





please help me out

July 24, 2010 at 12:01 AM

it should also contain word "sidebar"

July 24, 2010 at 12:48 AM

@drraman i got this kind of thing section-contents id='sidebar-right-1

please help me out

July 24, 2010 at 6:12 AM

Copy the code given in step 3 and paste below this code.

July 24, 2010 at 7:28 AM

First thing is DO NOT SHARE YOUR USERNAME AND PASSWORD WITH ANYONE.

Now I got your problem. You not added labels/tags/categories to your posts. Edit post and add lables first.

July 25, 2010 at 3:58 AM

@drraman i have applied the labels but its not coming.

see whats is the problem

July 25, 2010 at 6:44 AM

@drraman, i done with the LABELS, now please tell me how i can change colour of blog title. i want to use 00000, same as in footer, please let me know.

Thanks

July 26, 2010 at 1:53 AM

Go to Design > Template Editor
Read more
Blogger releases it's official template designer tool

July 26, 2010 at 2:31 AM

@drraman , still problem with submenu's please do it for me, here is the link of index file.

file:///C:/Users/Harpreet%20Singh/Documents/template/index.html

please help me out in this.

Thanks

July 26, 2010 at 3:00 AM

Open CSS menu Generator.
Go to step 3
3)Get the files

Click on Template Help Info and also on HTML/css code. Read and study carefully.

July 26, 2010 at 4:07 AM

@drraman here it is written that used only for 5 submenu with only 1 drop down menu..

also how to attach css file in blog...

please sort it out and use your own code as above you used to design submenus, you can take html coding from here, it would be easier for me..

please i am not getting it...please

July 26, 2010 at 7:07 AM

Please comment in correct post. This post is not related to Navigation drop down menubar?

July 28, 2010 at 11:42 AM

@drraman not showing on my blog.

jobsansaar.blogspot.com

please check it out whats the problem

July 29, 2010 at 1:05 AM

It was working on previous template.
Now you have changed template.

Now add this freshly.

July 29, 2010 at 2:00 AM

@drraman its coming now, when i added label to fresher then it will not come, when i remove then it come,

What's this ?

July 29, 2010 at 7:22 AM

You mean to say the Freshers label is not appearing in the label cloud?

July 29, 2010 at 8:45 AM

@drraman, when i add fresher to the label then the whole label will not apear, whats the problem

July 30, 2010 at 2:21 AM

You should not add labels to posts like Home, About Us. Because these pages are made once.

January 16, 2011 at 8:50 PM

I bloody give up! Does NOT work!

January 17, 2011 at 4:56 AM

Hi Melissa,

Please explain your problem with details.

February 13, 2011 at 4:14 PM

Help?
My background is black and the letters in the cloud are white. when i move my house over the labels they become black and not visible.
how can i change the color ?

February 13, 2011 at 4:16 PM

sorry for not posting the link of the blog. here it is - http://mooreeya.blogspot.com

February 14, 2011 at 1:18 AM

If you read the main article carefully, it is well explained there. Try changing the background color.

February 14, 2011 at 1:26 AM

it only changes the background, still doesn't change the link hover, i tried changing many things but still couldn't do it.

February 15, 2011 at 5:42 AM

Your link hover color is grey/black. Change it from edit template.

July 1, 2011 at 5:08 AM

I dont see such code . .

The one mentioned in step 2 . If i am not having tat how could i form the cloud ??

What should i do ??

July 1, 2011 at 7:10 AM

Hi Yuvan,

Look for

id='sidebar

Anonymous
September 30, 2011 at 11:57 AM

i saw your blog and the color of the link hover in the cloud tag is white, i tried to do that too but i could. Do you mind telling me how you managed to change the color ?

October 5, 2011 at 5:13 AM

Really awesome.
I have installed this widget on my blog.Thanks

October 16, 2011 at 5:07 AM

i cant find the code...help me please...

October 16, 2011 at 11:47 PM

Hi Dodee Pranata

Just look for

sidebar' id='sidebar

October 28, 2011 at 6:53 AM

don't see
error: label99 why ?

October 29, 2011 at 1:12 AM

@ Ngọn Hải Đăng

explain in details

January 7, 2012 at 11:04 PM

it's so cool, thanks...

January 20, 2012 at 9:05 PM

i can't find ....

February 8, 2012 at 4:03 AM

its not working........

February 8, 2012 at 5:39 AM

Try new updated code

February 9, 2012 at 2:18 PM

thanks.you are best.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More