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 :
- tagcloud.swf
- tagcloud.xml (need to be edited first)
- 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 🙂
Comments
20 responses to “Modify & Use WP-cumulus 3d sphere for Custom Links”
Hey, thanks. Nice explanation, i’m using the cumulus on a non-wp site
@Alex
You’re welcome! 🙂
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!!
@Bengt
My college site is JEC, Kukas.
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
I would say subscribe to my feeds or email updates 🙂
[…] 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. […]
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
It works for me correctly. May be you are doing something wrong.
It should be
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.
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 ?
I like this flash stuff as it animates smoothly
Thanks Friend!It was very easy to understand.
🙂
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
Hi Stefan,
I would say check your tagcloud.xml
Copy the default one and see whats the difference that makes it out of order.
My own links dont work in a xampp server on which m testing. Please say what to do. Thanks in advance
Take a look closely, you might find what you did wrong in editing the tagcloud.xml file
Hello 😉
how could i change the background color from white to black?
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.