The Playground

There's plenty of articles on the web that explain how to create tag clouds. Sixapart has a very good article called "Everybody Loves Tags" that explains the use and display of entry tags. Technology Evangelist gave me the idea for creating a category tag cloud for use instead of the normal category display. He created a special tag page, whereas I've just replaced the code for the category module. Since the categories on The Billy Lids isn't overly large, there's no great strain on resources to rebuild the pages.

Simply replace the categeory module content with the script, add the CSS to your stylesheet and you're done. It couldn't be simpler.

The Script:

<!-- Start Tag Cloud -->

<div id="cloud">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>"
class="tag<$MTCategoryCount$>"><$MTCategoryLabel lower_case="1"$></a> </MTCategories></div>

<!-- End Tag Cloud -->


The CSS:

/* Start Tag Cloud CSS */

#cloud {padding:1px; line-height:30px; text-align:center;}

#cloud a {text-decoration:none; padding:0px;}

a.tag1{ font-size:12px;}

a.tag2, a.tag3 { font-size:13px; font-weight:200;}

a.tag4 ,a.tag5, a.tag6 { font-size:16px; font-weight:300;}

a.tag7, .tag8, a.tag9 { font-size:20px; font-weight:300;}

a.tag10, a.tag11, a.tag12 { font-size:24px; font-weight:300;}

a.tag13, a.tag14, a.tag15 { font-size:28px; font-weight:400;}

a.tag16, a.tag17, a.tag18 { font-size:30px; font-weight:400;}

a.tag19, a.tag20, a.tag21 { font-size:32px; font-weight:500;}

a.tag22, a.tag23, a.tag24 { font-size:34px; font-weight:500;}

a.tag25, a.tag26, a.tag27 { font-size:36px; font-weight:900;}

a.tag28, a.tag29, a.tag30 { font-size:38px; font-weight:900;}

/* End Tag Cloud CSS */