« Visit Ashfame.com
«» Deserve before you desire «»
 
 
 
 

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

September 29th, 2009 | Tagged as: ¤ ¤ | Download as PDF
 
 
 
Share

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

This entry was posted under How To / Tutorials ¤ Tips n Tricks

Share this article
 
{ 14 Comments }
  1. Alex says:
    Posted: October 7, 2009 at 8:14 pm

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

    Reply
  2. Ashfame says:
    Posted: October 17, 2009 at 3:08 pm

    @Alex
    You’re welcome! :)

    Reply
  3. Bengt Stenstrom says:
    Posted: October 31, 2009 at 9:45 pm

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

    Reply
  4. TFrancis says:
    Posted: January 29, 2010 at 12:47 am

    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

    Reply
    • Ashfame says:
      Posted: January 29, 2010 at 11:31 pm

      I would say subscribe to my feeds or email updates :)

      Reply
  5. Yahya says:
    Posted: April 22, 2010 at 4:21 pm

    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

    Reply
    • Ashfame says:
      Posted: April 23, 2010 at 7:06 pm

      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>
      Reply
  6. bullet says:
    Posted: June 3, 2010 at 4:59 pm

    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.

    Reply
    • bullet says:
      Posted: June 3, 2010 at 5:10 pm

      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 ?

      Reply
    • Ashfame says:
      Posted: July 27, 2010 at 10:38 pm

      I like this flash stuff as it animates smoothly

      Reply
  7. Shobhan says:
    Posted: July 10, 2010 at 5:58 pm

    Thanks Friend!It was very easy to understand.

    Reply
  8. Wordle let you create beautiful word clouds says:
    April 3, 2010 at 3:49 pm

Leave a Reply

(required)

(required)