"Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. I fell in love with Roy's original Cumulus plugin when I saw it, and simply had to learn how to convert this for use in Blogger powered blogs. The result is the widget you can see in action at the top of this post. Hover your mouse over the Flash object to see the animation begin.
In this post, I'll explain how you can add Blogumus to your own Blogger layout with ease!
Update: Improved Widget Code
I have updated the code required to run this widget to activate links in the tag cloud Flash movie. If you have already installed Blogumus, please replace your widget code with the new updated code, or reference the additional lines to modify your existing installation.
How it works
This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :)You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location.
To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).
How to install Blogumus in your Blogger layout
Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing.
Here are the steps required to install Blogumus in your Blogger layout:
Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):
<b:section class='sidebar' id='sidebar' preferred='yes'>Immediatly after this line, 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://halotemplates.s3.amazonaws.com/wp-cumulus-example/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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location.
That's all!
Customizing Blogumus
In this default installation, Blogumus includes the following preset variables:- Width is set to 240px
- Height is set to 300px;
- Background color is white
- Test color is grey
- Font size is "12"
Editing width and height
The variables for width and height are found in this line of the script:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer.
Editing background color
You can change the background color from white to any other color by altering the hex value in the same line:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes.
Alter the color of text
By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:
so.addVariable("tcolor", "0x333333");
Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers!
Adjust the font size
The maximum font size of tags is specified in this line:
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number.
While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.
Credits, support and requirements
Blogumus is based on the original WP Cumulus plugin by Roy Tanck, and was converted for use with Blogger layouts by myself.Please leave the credit links in the widget code intact. These will not be seen by the majority of your blog readers (as they will only display if JavaScript and Flash is not activated) but leaving these links intact is a great way of passing some link love on to Roy for all his hard work, and to inform other Blogger users that they can find the widget codes on this site.
Support/Issues
If you have any problems installing or using this widget, please leave your comments below or direct these to the Blogger Buster forums as Roy will be unable to provide support for installation in Blogger blogs!Requirements
For Blogumus to display properly in your template, you will need to have Flash Player 7 or higher. You can download the latest Flash Player plugin for your browser from Adobe.I'm not sure that this installation will support special characters as tags (only Latin characters supported at present). If you do experiecce issues with labels displaying incorrectly, please let me know. I'll try to add more support, but have very little experience using Flash!
266 comments:
«Oldest ‹Older 201 – 266 of 266 Newer› Newest»Hello Amanda,
I have been using this for a while and suddenly it is not there anymore- has anyone had this problem?
Hello,
This is the tag cloud I have been searching for... The issue I am having is that the widget doesn't show. It makes space for it on my blog but its blank.
http://afpaintball.blogspot.com
I tested it on another one of my blogs with a standard template and it worked fine. So I am guessing that is the problem, what should I do to resolve this??
does this work on ftp domains (non blogger hosted)???
after i paste it, the widget does not appears...it only appears blank...
check it out
http://johnrhesty.blogspot.com/
Hey thanks! It's working perfectly on my blog! I guess bloggers should really give you full credit for this one. I've been looking for this for ages!
TYVM..! :)
why it doesn't work at my blog?:(
http://maspie07.blogspot.com
Hi, here's the thing, I installed the label cloud, but the tags didn't appear? Any idea? Looks like the widget didn't detected my labels ;(
thank you amanda...
I have a cloud tag but not flash. I would like the one you did but how do i remove the previous one i had. Abit weary on editing html. Can you please help.
I have it in both my blogs.And i want to change all to flash cloud tags.
http://sue-world.blogspot.com/
http://splashesofgrace.blogspot.com/
thank u for ur help.
Hi.. Iam andy from indonesia, thanx for your code.. this works in my blogs.. http://www.pentawaterfilter.co.cc/
keep blogging
AMAZING!!
what happened? it just stopped working?
Worked perfectly! Even totally customized color, size etc. Thank you!
www.libraryloungelizard.com
Same Problem as Cacho, Just a white screen No labels on it But on right click it recognize Flash Content. Please Help Amanda :(
www.AmazingIT.blogspot.com
Hi Amanda - I hope you can assist me as a very very newbie to design etc. I am using a 'simply fabulous' blog template, which I want to add the label blogmus on to. I have followed the two steps above, but nothing is showing on my blog pag at all. I am using a 'test' blog page, so that I can mess around with it and not effect my live page until I have things sorted. Can you help at all please?
many thanks
Julie
Amanda please help me. I have tried this three times, and each time I just get a blank white box. I'll do anything to get this working on my blog. Please help!
Thank you for the easy to follow instructions.
Meredith
http://jeredith.blogspot.com
Hi Amanda!
I'm from Philippines. Awesome site you have here. I've just installed the world famous Blogumos at WWW.IANTHERAGINGBULL.COM.
Although it misses to show one of my labels, other than that, the widget is definitely awesome!
Thanks a lot for sharing.
Take care.
Make the background transparent and will be just perfect
Thank you!!
I have been trying to make this work for 2 weeks. This code worked on both my blogs on the first try!
Sucasa
www.nook-sucasa.com
www.opaline-sucasa.com
It doesn't seem to show labels in Chinese characters. Is this so? Is it possible to allow it? I'm trying all angles to try to reach to those people in China!
http://acliltoclimb.blogspot.com
Thanks a ton Amanda.. I have added this to my blog
Thank you! I'll use this when I have enough labels. I just tried it but I only have a few labels as of now so it doesn't look good yet.
Good post...
aHHH, cant figure it out. There is just a blank field that is titled labels. Please Help!
http://caldw3l.blogspot.com
it is not working for me please help me out i copied all the lines
here is my testing blog
http://moreinfowithprathi.blogspot.com/
Hi i have done these in my two blogs. but it works fine in one blog but not working in another blog..
What could be the reason?
here are my blogs
working here
http://moreinfowithprathi.blogspot.com/
not here
http://prathisnewtrails.blogspot.com/
please let me know the reason please ..:)
Thanks
Naveen M
Thanx mate. Its working perfect.
I really like the 3d tag cloud but I'm having some problems with it. I've installed as instructed and all works well my labels are there abd when I click on them it takes me to the relevant posts but when I click on home to take me back to my main page I just get a blank white box and no number of refreshs brings the labels back. Also is it possible to highlight the most used label? I installed a static tag cloud (see http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html) and it did this which looked pretty cool - would be good as an option.
Your links to adjusting the colour and font don't seem to be working in my broweser either.
Keep up the good work.
AWesome widget its working fine .Thanx a million
It works perfectly fine on my other blog but on my other blog it's just blank. Probably the template I'm using? Help? Thanks!
http://keepigonthefiringline.blogspot.com
thanks for sharing this! i tried it on my blog and it works! kudos to you!!!
I've installed on my blog, but it doesn't work, it gives me this error :
"TypeError: Error #1090: XML parser failure: element is malformed.
at com.roytanck.wpcumulus::TagCloud() "
So what do I have to do ?
Thank you, Amanda. This was so easy to install! And it looks gorgeous :)
i wondered if the color of the font could change or size change when the mouse is over a word? i have so many tags that it's hard to read even when i reduce the size.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
Said to me something like that! What should I do?
Hey,
I can´t change the background color..
How i do that?
Please, i need a support.
Thank you for your attention.
my blog "writing language" is in Farsi! and widget displays labels in "..." form. Why? please help!
tanx amanda..
but i didn't get anything change in my blog..
i want this code in my blog..
ur helps very appreciated
my blog..
www.shaylaco.blogspot.com
thanks,amanda..
i want u to help me..
i cant get ur code in my blog..
plz help me.
my blog is: www.shaylaco.blgospot.com
Thanks for the Gadget. I've installed on my blog and look awesome. http://edilsonz.blogspot.com
Hello You get quite a few responses oh my I asked this before also my friend wrote you an email.
The target is to limit the number of Tags being displayed as it gets rather messy when you have too many tags. Like just the top 50 tags to be shown i know Roy tanck has updated the widget a while ago but we didnt find a updated version here. will you stil do it? I think its helpful for allot of peopel even more in Blogger then in WP while WP also has categorys and Blogger just has tags so tags are always used more often bigger number then categorys.
Hola, hace unos 6 meses si funcionaba en mi blog de www.wii4everybody.com ahora solo se ve un espacio en blanco vacio al cual he intentado de varias maneras hacer que funcione pero no soy lo suficientemente bueno, ayuda por favor!
Ozl
Thanks you. It's very useful and your customizing help is great!!.
Gracias. Es muy útil y la ayuda para configuración es muy buena!!.
nice nice awesome...good....wow....thxs bro... i'm so interested..my name Dino from indonesian (jogja) nice to know you...
Hi. The tag cloud is very cool.
Although there is an error. I made it to install the cloud, but only ONE tag appears floating.
Do you know what might went wrong?
Best regards.
Amanda,
Small help request: when I add to my template the widget works. When I moved it to a different position in my blog's sidebar, it sometimes works and sometimes only shows a blank white space.
Not sure if adding more tags is causing the problem. Or a size problem.
Can you spare a moment to look it over?
http://jakaplan.blogspot.com
Many thanks!
Jeff
I want to put it in my footer area. but no luck. any ideas
Hello, I've not been able to get this to work on my blog: http://xpurtwitness.blogspot.com. Can anyone offer some suggestions for me to try? I am somewhat comfortable with editing code, so feel free to get technical!
Thanks,
Aaron.
Realy nice tag. Thanks for ur information
I dont understand this - how does this generate data? through rss / atom feeds? if yes then where in the code do i punch in my feed link.
or does it just scan my own site and find key words and automatically generate them itself?
also is there any way to change the background to be transparent?
every time i paste it in i keep getting back this error
"The widget with id Label99 is not within a section (actual parent element is: div.) Every widget should be in a section."
i've tried it 3 times - i located where i was to paste in the code, immediately afterwards i pasted in the code you supplied and i get the error
Is there any way to make this support greek characters?
Amanda, im from Brazil and my english dont is very good, sorry! You answer my question? I need a transparent background in this animation flash, you have any idea?
Thanks
Hi this widget is amazing, but I'm unable to change the colors. I've already done all the steps but the colors remain the same. Check here please:
"#1E292F"
and
"0xD6FFFF");
I will appreciate your help.
I've tried above tricks in my blog , i.e : http://wiendyn.blogspot.com, but below message apears :
Message error XML: The element type "b:section" must be terminated by the matching end-tag "".
Pls help to solve, thx
Hi...
This is awesome, works perfectly fine...but the pnly problem I face is that , I have 8 labels in my blog but only 7 of them are getting displayed...tried changing every settingi can think of..so tell me what cud be wrong.
I keep getting a blank widget? Love this-really want it to work. Any suggestions? Can you send me an email at lorilaws1@gmail.com. Thanks.
Hi,
Good job making this wonderfull widget.
I've tested it already on my blog and the effect is very good except for one thing... only two labels are showned and tehy all have more then 3 posts...
Can you help me please?
And what about the Greek bloggers (support in UTF-8 format)?
Great widget, hope we can insert it in our blog...
A>
Hi,
I know that there are lot of comments here and it's impossible to respond to all, but I would first congratulate you on a work well done by making it possible for us bloggers to install on Blogger. I would liek however to know if it is possible to install on ning as I have a networkd of teachers in my school. If it is possible then how can I do it? Do you have any links to guide me through?
Cheers
Hello, i was looking for a tag cloud for my blog and end up in this post, i tried out the blogumus script and it works pretty good, the only thing that i couldn't do was to customize the number of tags displayed, is there a way to change it? thanks for your help, grettings from Costa Rica.
wow!!!
luv it very much!
Thanks yah :P
Thanks Amanda. Works great. The only pity is that it does not support national characters.
Wow Amanda, thats label is very cool. Thanks for sharing it..
Hi Amanda, Thanks for sharing. Your work is awesome. It works perfect for me but I would prefer to change the tags with my own even if their are not clickable it would be ok. I love the design so much!
Post a Comment