Blogger Help – Animated Flash Tag Cloud For Blogger

You can now easily display the tags of your blog in a more attractive way, by showing all the tags/labels in a flash box which will start revolving as soon as mouse cursor is placed on the widget. You can see the example of this widget in this blog itself.

“Blogumus” is an Flash based tag cloud widget which uses scripts converted from Roy Tanck’s WP Cumulus plugin for WordPress.

Initially I thought that as now these labels are being shown in flash widget so it may not be search engine friendly, but after looking at the source code, I came to know that it will not make these labels inaccessible to any search engine.

If your visitors do not have java script/flash enabled in their browsers, then it does degrade relatively gracefully, but label links will still be click able (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Although there are some difficult methods available on Internet, but by following this method the task becomes surprisingly simpler !
You can copy paste the code as it is, or change the code before pasting into your blog HTML as per your requirements.
By default the flash widget will be in white background, with gray labels/text, and of dimensions 240×300. And all these can be changed so as to suit your blog’s layout and colors.

To start with:
Go to the LAYOUT section, and click on EDIT HTML.
Now find this line/code:

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

And immediately after this code line, paste these code lines(in new line):

<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://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/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> via <a href=’http://bloggerstop.net’>BloggerStop.Net</a></div>
<script type=’text/javascript’>
var so = new SWFObject(&quot;http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/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>

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! 

NOTE: You must have already added labels to at least some of your posts, to see the widget in action.

Customizing Blogumus

By default, 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”

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I’ll go through these options in the order they appear in the widget code.

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

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

NOTE: To get HTML color codes, you can see in these websites:
1. Uci.edu
2. Computerhope.com

3. 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!

4. 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: Blogumus is based on the original WP Cumulus plugin by Roy Tanck, and was converted for use with Blogger layouts by Blogger Buster .

You can read more blogger tricks and tips HERE
 

138 thoughts on “Blogger Help – Animated Flash Tag Cloud For Blogger

  1. Can yoo pls make it available for UTF8 fonts, Mine blog is written in Bangla font (SolaimanLipi) and this widget doesn’t work on my blog…

  2. As you have used the simpler method to create the multi tabbed widget [that you have created a multi tabbed widget in a normal widget], so it may not be possible to put that flash tag cloud in to that multi tabbed widget.
    I suggest you to add this widget as a separate widget.

  3. well I have been using this in my sidebar since the start of this blog, and never saw any problem in it.
    May be your internet browser has some problem with your flash plug-in !

  4. Hello snam

    I can see the flash labels widget clearly in your blog…
    Make sure that you have enabled flash plug-in your internet browser(check your blog in 2/3 different browsers/computers).

    Regards
    Sai

  5. Thanks for the tip. I can also see it clearly in Safari. I will have to see if one of my add-ons is preventing it from showing up or something.

  6. Hi again.. i tried this out… but ther’s no label cloud… just the labels in different fonts.. though I can view the cloud effect on other sites,,, HELP 🙂

  7. Hi aZoed,

    while checking the source of your blog, I couldn’t find the code for the flash tag widget, are you sure you have added it correctly,
    just remove the previous code, and add it again

    BTW, Nice to know that u are from Jaypee too, If not wrong, then I think you are doing Bio-info ….anyways I am from JIIT, doing Biotech over here…

  8. Hi Sai,
    I have problem to install this code have this error :

    TypeError: Error #1090: XML parser failure: element is malformed.
    at com.roytanck.wpcumulus::TagCloud()

    what is solution?
    Please solve.

  9. so.. i added the code.. and all I get is the white background.. on the sidebar..
    and what if I want to add the widget to the widget column at bottom left hand side…

    and its nice to know that we are from sister 🙂 colleges…
    I’ll be mailing you at the id given in ur profile soon..

  10. Hi Divya, thanks for the codes, love it.

    However, after installing, all works fine except that it only manage to display max 4 labels, is there something that I’ve missed out???

    Sorry, I’m totally new to this, thanks in advance!

  11. @ Black Nose,
    My suggestion is not to use so many labels in your blog, use only those which you think are important for your readers, and donlt be very spedcific in labels….you should choose broad categories, like do not use labels like “small images” and “large immages”, rather just use the lable “images” for both small and large, this will make the labels more clear in that widget, to Edit/Delete your labels, read this post:
    http://bloggerstop.net/2009/02/add-edit-or-delete-labels-in-blogger.html

  12. Thanks for the code Diyya.. i’m keep looking around for cloud tag for my label and yet found this animated one.. what a great day.. i’ve try it on four different browser and it work fluently..
    well thanks again..

  13. Hi,
    i’m always getting this error:

    TypeError: Error #1090: XML parser failure: element is malformed.
    at com.roytanck.wpcumulus::TagCloud()

    what’s wrong ?
    any ideas ?
    please can you help me ?

    best regards
    TM

  14. There’s no code in your template, when I visited your blog…
    What exactly is the problem you are facing ?

    Are you seeing a big blank space instead of tags?

  15. Hi Christina,

    I think that is because, you changed the default “All labels”, to your own customized labels, although you can of course do it, but may be there occurred some error while doing it.

    Anyways,
    Correct this line in the code:

    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;);

    Regards
    Sai

  16. I change the code name to Categories and changed the dimensions to fit in my sidebar….it worked for awhile when I first put it up…but now it won’t work.

  17. hmmmm

    ok….delete your present flash-tag-cloud code completely -> save the templte.
    and then
    again copy the code from this page, change the dimensions and save the template.
    You can change the title from "page elements" page later.

  18. Hey Christina,
    I have found a code for another similar widget, where you can manually add tags, but as it is copyrighted by the author, so I have mailed for the permissoin to share that code, if he allows, then I’ll post the new method soon.

    Regards
    Sai

  19. Ya copying the code from script to script will not work, as you can see in the code, that the widget type is Label
    and when you simply add the code in a HTML/JavaScript widget, it will not work.

    Hmmm….no solution 🙁

  20. It's so easy to paste these great gadgets, like this tag cloud, into blogger. You just gotta say thanks – really like it. BloggerStop is very helpful, a good resource. Thanks to Bloggerbuster for adapting this cloud for those on the "B" side.

  21. I love this widget and i have manage to make it work on my blog http://massaespiral.blogspot.com. At first i got the blank widget problem which i solved. but now i use it with an unsolvable problem: a random missing label.
    I used the code directly from amanda's blog.
    since then i've read lots of blogs where many people had the same problem but no solutions. even amanda and roy seemed to be unable to work it out (or simply they don't try it)…
    If someone knows how to solve this please tell me…

    Excuse my english, i'm portuguese…

  22. Question:

    When I insert the code directly under the line …
    b:section class='sidebar' id='sidebar' preferred='yes'

    … It seems to work (Preview shows it working). But when I try to insert the code in a different place in the sidebar (eg, after my Bio section), I only get a blank space below the word "Labels."

    How can I move Tag Cloud to different place in the sidebar?

  23. dear sai

    It is working but i want to make change in it.
    i want to remove the whole background of that cloud.
    that means i want to remove the background clour.. Is it possible?

  24. Hey there,

    Ive got the random missing label problem. I just started a blog that has only 3 tags but i can only see 2 tags at any one time. ANyone here found a solution to it?

  25. Hai Divya,
    Great! It works on my blog. I've been searching for this widget through some web/blog but seems that only the code given by you perfect for my blog setting.
    The only thing is, instead using the "b:section class='sidebar' id='sidebar' preferred='yes'" code , I paste the widget code to replace with this code I used before for my label widget
    "b:widget id='Label1' locked='false' title='Label' type='Label'" and it's done. Hope it helps others who can't find the code like me.
    http://mystoryintanhidayat.blogspot.com/

    Thanks for great help =).

  26. It is tools like this tag cloud that have won me back to blogger. Back in the day, blogger couldn't compete with WordPress. Now they are on almost equal footing with plus and minus items for both.

  27. My blog background is black. when i take the mouse pointer over the tags the highlighted tag inside the box appears black which mixes with my background. How to change its color??? I want different color for the highlighted tag inside the box(ie other than black).

  28. i am hoping the same best work from you in the future as well. I've got to admit which i have never heard about this info. We have noticed many new facts in my opinion.

  29. Personal Pharmacy Online the UK Leading provider of Discounted Medicines, Cosmetics, Health and Beauty products with lowest prices guaranteed – Buy now! At a click of button shop for Genuine and Verified Medicines, prescription drugs, perfumes, supplements, and much more with secure, fast and discreet delivery to your door step.personalpharmacy.co.uk

  30. I'm amazed at the depth and high quality of content material you've put on your site. Very interesting article. Content has been written in very nice manner. I enjoy reading this kind of stuff. Thanks for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *