How to Make a Tag Cloud for Movable Type Blogs
Technology Evangelist wrote a very nice tutorial on how to make a tag cloud for Movable Type blogs.
1. Create a new page for your site for the tag cloud. Click here for instructions on how to do this. I called our tag cloud page tagcloud.html but it doesn’t matter what it’s called (and doesn’t have to have a .php extension).
2. Clear the body of the new page.
3. Paste the following code into the body of your tag cloud page (where you’d like the tag cloud to appear:
This publishes your site’s categories in a row that wraps whenever it reaches the end of the line. Each category is hyperlinked to the appropriate archive page.
The div id=”cloud” tag allows you to format the tag cloud using CSS.
class=”tag< $MTCategoryCount$> adds a CSS class to each tag that’s unique to the number of posts in each category. When published, this converts to class=”tag4″ for a category with four posts.
Okay, that covers the work on the page. Now for a few additions to your site’s style sheet. If you save and republish the page, it should build your tag cloud with no formatting.
4. Go to Templates and open styles-site.css.
5. Add the following code to the bottom of the style sheet:
/* 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 */
6. Save and rebuild your style sheet.
7. Refresh your tag cloud. It should now be formatted.
The CSS tags listed above gradually increase the font site, (and some include an increase in font weight as well) as the number associated with posts in a category increases. The font sizes and post numbers associated with different sizes can be adjusted here, changing the look of your tag cloud. It may take some experimentation to find a format that is suitable for the number of categories used in your site, and your post volumes to various categories.
8. Link to your tag cloud from your site’s templates.
9. Remove the categories section from you site’s templates.
10. Done.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
You can employ more than one color with discretion.
One way to use colors in your cloud tag:
- select a main color, assign it to the biggest font;
- “blend” this color for smaller fonts.
A “coloring” example at
http://www.featurepics.com/editorial/tag-cloud.aspx
Great article. Thanks a lot!