Adding tag clouds to TypePad weblogs

The TypePad team sent me this:

<div class="tagcloud">
<MTArchiveList archive_type="Category">
<a href="<$MTArchiveLink$>" style="font-size:<$MTArchiveCount$>%;"><$MTArchiveTitle$></a>
</MTArchiveList>
</div>

That would point to your category archives. And depending on how many posts you have, you could set a class in your stylesheet that looked like this:

.tagcloud {font-size: 100px;}

Then if you had 20 posts in a certain category, it would show up as a font size of 20px (20% of 100px). Just play with that base font-size to make it work out nicely for your needs.

The problem with this code is that all categories are displayed. After emailing with Markus from socio-kybernetics.net/saurierduval/, he came up with a solution. Add this to the sidebar:

<MTArchiveList archive_type="Category">
<a href="<$MTArchiveLink$>" class="tags_<$MTArchiveCount$>"><$MTArchiveTitle$></a>
</MTArchiveList>

Add this to the stylesheet:

.tags_1, .tags_2, .tags_3 {
font-size: 0pt;
}
.tags_4, .tags_5, .tags_6 {
font-size: 9pt;
}

/* and so on... */


.tags_95, .tags_96, .tags_97, .tags_98, .tags_99, .tags_100 {
font-size: 20pt;
}

Finally add visibility: hidden; to those tags that correspond to categories you don´t want displayed.

2 Comments

Alex | Jun 08, 2005

in addition or instead of visibility: hidden; one could also try display: none and display: collapse;