If, like me you are a regular reader of blogs all over the internet you may have notices a large number of them have (usually in the sidebar) a ‘tag cloud’. For one of the best examples I have found on the net check out the side-bar of Web Designer Wall. Although this may look like a random collection of words, related in someway to the web-site or blog you are visiting it does, in fact have a very real purpose. In this tutorial I want to show you how to create your own tag cloud and explain why than can help your blog. Why are tags (or to give them their correct name ‘Technorati Tags’) good on your blog? Well, you will have heard of Google, no doubt and what Google is to search engines, Technorati is to blogs. By adding tags to your blog you can ensure that your blog is picked up by Technorati and therefore stand a much better chance of getting your blog seen.
On top of that, tags make your site easier to use. For example, users can click on a particular subject or keyword listed in your tag word rather than have to type the whole thing out in your search box. What’s more, if you host your blog on a non MobileMe host then you will have discovered that the default search box doesn’t work thus making a tag cloud really helpful.
So how do you get your own tag cloud? To begin with you need to pay a visit to Zoom Clouds and sign up for an account. It’s free and all they need is a username, e-mail address and a password.
Once you have done that you need to ‘define your cloud’. This involves giving your tag a name, a title and description, entering the URL for your RSS feed (this is where Zoom Clouds takes your tags from) and finally choosing how many days worth of RSS content you want to take your tags from. Hit the ‘Create Cloud’ button and you are nearly done.
The next page explains that Zoom Clouds has to check your RSS feed for tags so just click ‘Go update my cloud!’ and wait a few seconds. You now get presented the option of designing your cloud or just going with the default. If you choose to design your own you will be taken to a page that allows you to change the colours and sizes of the font, background and borders as well as the rollover effects. Tweak the settings until you are happy with your tag cloud and then scroll down the page a bit to see the code for your tag cloud.
Open your blog in iWeb and choose the page(s) you want to have your tag cloud on and insert a HTML snippet. Paste your code into the snippet and your tag cloud should now appear.
Customise your tag cloud further
By default your tag cloud will have a background colour, but you can get rid of this if you want by editing the code in the snippet. In the ‘.zoomclouds’ div just remove the line that starts ‘background-color:…..’. You can also alter the colour code of the background if you are not happy with it. The same would apply to any border you may want to get rid of, just delete the line that begins ‘border:….’ within the same div.
If you scroll down a bit in your snippet window, you can see that you will also be able to change the font to match your blog too. By default Zoom Clouds sets it at ‘helvetica, arial, sans-serif’ so change the font names to suit your needs; some of the better ones to use are listed in my web-safe fonts for iWeb post.
All you have to do now is publish to your web space.
thanks! i did exactly what you suggested, and now i’ve a gorgeous cloud making interaction with my site that bit interactioner.
BTW – how do i get rid of the ZoomCLouds logo in the cloud? it clashes with my website design. i can insert a textbox to credit them, using my styles.
Unfortunately you can’t get rid of the logo as that is the ‘price’ you have to pay for having the free software on your site. You could try drawing a transparent rectangle with thick border to surround the tag cloud and make sure the size of it covers the logo….just a thought.
I’ve tried to connect to ZoomClouds, but I’m getting nothing. Does the site still exisit? Do you know any other good sites if it doesn’t?
I updated this post recently. Take a look at http://allaboutiweb.com/index.php/2009/04/tag-clouds-for-iweb/
Hope that helps,