A

Modify & Use WP-cumulus 3d sphere for Custom Links

You must have seen the revolving 3D sphere of tags which gives the site an aesthetic look and get the visitor involved to browse more of your content. Its available as a nice plugin for WordPress blogs already but I wanted to have the 3D sphere show some custom links and not tags or categories. […]

You must have seen the revolving 3D sphere of tags which gives the site an aesthetic look and get the visitor involved to browse more of your content. Its available as a nice plugin for WordPress blogs already but I wanted to have the 3D sphere show some custom links and not tags or categories.

I was designing my college website and there I wished to show the different engineering degrees in the 3D sphere. So here is how I did it.

Download the WP-Cumulus Example file from Roy Tanck’s blog (38KB)

Create a folder in your themes folder named cumulus and copy the following files there :

  1. tagcloud.swf
  2. tagcloud.xml (need to be edited first)
  3. swfobject.js

I wanted to have it as a part of the WordPress theme, so I open up the PHP file and paste the following code in it :

<div id="cumulus">
 <div id="flashcontent">
 You need Flash & Javascript to display a lovely 3D sphere here.
 </div>
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/cumulus/swfobject.js"></script>
 <script type="text/javascript">
 var so = new SWFObject("<?php bloginfo('template_directory'); ?>/cumulus/tagcloud.swf", "tagcloud", "466", "303", "7", "#ffffff");
 // uncomment next line to enable transparency
 so.addParam("wmode", "transparent");
 so.addVariable("tcolor", "0x000000");
 so.addVariable("tcolor2", "0xffffff");
 so.addVariable("hicolor", "0xc30304");
 so.addVariable("tspeed", "100");
 so.addVariable("distr", "true");
 so.addVariable("xmlpath", "<?php bloginfo('template_directory'); ?>/cumulus/tagcloud.xml");
 so.write("flashcontent");
 </script>
</div>

Here in this code, you can change the width & height of the 3D sphere (on 7th line) , colors (10-12th line), its rotating speed (on 13th line) etc.

To change the links, you need to edit tagcloud.xml file. Just change the links and the anchor text as per your need. After that upload it to the cumulus folder in your theme’s folder.

Feel free to play around with the code and come up with your imagination. Leave a comment if you ran into issues and I will try to help. You can even say “Hi!” I love comments πŸ™‚

20 responses to “Modify & Use WP-cumulus 3d sphere for Custom Links”

  1. Alex says:

    Hey, thanks. Nice explanation, i’m using the cumulus on a non-wp site

  2. Ashfame says:

    @Alex
    You’re welcome! πŸ™‚

  3. Hi – thanks for the explanation!
    Alex – what non-wp site are you runnin?
    And Ashish – where is your college site?
    Would like to see the cumulus in action… πŸ™‚
    Cheers!!

  4. TFrancis says:

    I love your work. Am from nigeria. also a programmer. i like to be your friend! chat with me or email me on new code. tfrancislinks@yahoo.com

  5. […] In case you want to use a 3D sphere cloud on your website or blog, then you use can use Cumulus for 3D sphere cloud. […]

  6. Yahya says:

    Hey man! This is great! How do you change the font-size? I tried to change the font-size to a 9pt in the xml file but the font size did not change.

    Need yr advise. =D

    • Ashfame says:

      It works for me correctly. May be you are doing something wrong.
      It should be

      <tags>
      <a href="" style="font-size: 20pt;">C</a>
      <a href="" style="font-size: 20pt;">D</a>
      </tags>
      
  7. bullet says:

    Hey
    I have a problem with links in cluod. It seems that they dont work as a simple html links. Links to files in site folder are working, but links with normal http address dont. For example in tagcloud.xml file I have

    google

    and this doens’t works.
    I had to make a local link.htm file.
    In tagcloud.xml i have

    google

    and in link.htm

    and it works, but its a little anoying and waste of time.

    Second thing is thing that cloud could have. I found

    http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/

    and after simple editing of this I had a cloud with small pictures instead of letters. Its even plays gif files πŸ™‚ . I tried do this with wp-cloud and its not working too. Is there a way to use that things in wp-cloud ?

    regards
    B.

    • bullet says:

      Sorry, I didn’t place html code in my message to source or code tags. I hope this will not be a problem πŸ™‚ . What are the tags to post code on this site ?

    • Ashfame says:

      I like this flash stuff as it animates smoothly

  8. Shobhan says:

    Thanks Friend!It was very easy to understand.

  9. Stefan says:

    Hello and thanks for this article!
    I have an issue with the cloud: it generates a cloud of links from tagcloud.xml, but it just displays them in the tag cloud – they do not work as links. I click them but nothing happens – they do not redirect anywhere…
    I have thought that it is a browser-related problem so I have tried it on different machines with different browsers, but with no luck. I must have missed something in the code – please can you give me an advice?

    Thanks!
    Stefan

  10. Nilanjan says:

    My own links dont work in a xampp server on which m testing. Please say what to do. Thanks in advance

  11. Feiler says:

    Hello πŸ˜‰

    how could i change the background color from white to black?

  12. Ashford Etela says:

    Thanks a lot for your post Ashfame! I was wondering, how can I determine the positions of the tags in the cloud? I was able to use the tagcloud on http://www.nepadriversstate.org/projects.html and it loaded successfully. The only issue is that sometimes the tags get clumped together, leaving some parts of the sphere empty and other parts really crowded… Is there anything I can do about it? Thanks.