Thursday, September 07, 2006

Tagclouds in Blogger Beta - another way

This previous post showed a very clever way to display your list of tags as a tagcloud in Blogger Beta. However, it had the small flaw that it doesn't actually work with the current bug-ridden Beta.

Here's another method - not quite as clever, but not too bad - that actually works right now. It uses the "expr:" operator in Beta.

First, define a series of styles with gradually increasing font size, color shading, or whatever. Give them all the same name, but end them all with a number that will equal the number of posts associated with that label. For example:

.common-link-1 {font-size:85%;}
.common-link-2 {font-size:86%;}
.common-link-3 {font-size:87%;}
.common-link-4 {font-size:88%;}
.common-link-5 {font-size:89%;}
.common-link-6 {font-size:90%;}
.common-link-7 {font-size:91%;}
.common-link-8 {font-size:92%;}
.common-link-9 {font-size:93%;}
.common-link-10 {font-size:94%;}
.common-link-11 {font-size:95%;}
etc.
The downside of this particular method is that you're going to have to define one of those for each and every number that you expect to see in <data:label.count>.

The upside is that your tag code is very compact.

<b:loop values='data:labels' var='label'>
...<span expr:class='"common-link-" + data:label.count'>
....<b:if cond='data:blog.url == data:label.url'> (<data:label.count/>)
......<data:label.name/>
....<b:else/>
......<a expr:href='data:label.url'><data:label.name/>(<data:label.count/>)</a>
....</b:if>
....</span>
</b:loop>


The expr: operator concatenates the number of posts to the span class. Slick, no? Here's my example in operation.

3 comments:

-John Lustig said...

thanks! this is a great alternative to the javascript label cloud.

Anonymous said...

err, how about if i dont host it on blogspot.. can it work?

Scott said...

Anonymous,

At the time that I wrote this (almost 2 years ago), the answer was "no". Today, I'm not so sure and I haven't really investigated.

Blogger implemented a built-in tagcloud widget, so I don't use this code anymore.

Sorry I couldn't be more help.