Tagclouds in Blogger Beta - almost

After spending some time deconstructing the new Blogger Beta language, I thought I'd try a bit of hacking. In particular, I'd like the categories/labels to show up as a cloud instead of the default ordered list.

Some things I'd like the cloud to do (as opposed to what the standard template does):

• Change the font size and/or color so that more frequest posts stand out
• Show up as a block of text instead of a long list
  
• Include the number of posts in the formatting style instead of in ugly black text

Here's the default text for displaying the list of labels:

<ul>
.<b:loop values='data:labels' var='label'>
..<li>
..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/>
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/></a>
...</b:if>
...(<data:label.count/>)
..</li>
.</b:loop>
</ul>

(Ignore the leading periods. I've included them only because Blogger automatically ignores spaces.)

The if-then structure here checks to see if the current page is a tag page. If so, then that particular tag is not printed out as a hyperlink (no need to link to the current page). That's a nice construct, so we'll leave it in.

The first thing to delete is all of the <ul> and <li> tags, as those are what is creating the ordered list.

The next step is to move the line (<data:label.count/>), which prints out the number of posts assosicated with a line in the nasty black, next to the lines that print out the labels [e.g. <data:label.name/>)]. Be sure to include spaces so that things aren't all crammed together.

If you stop there, you'll have a nice "cloud", but no formatting changes based on the number of posts. If that's what you're interested in, here's the code.

.<b:loop values='data:labels' var='label'>
..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/> (<data:label.count/>)
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
...</b:if>
.</b:loop>

To make the fonts and/or sizes change, you'll need to define different styles in your style sheet. In this example, I've defined one style only - for the more common posts to be 25% larger than the other labels. This goes in your header with the other styles.

.common-link {font-size:125%;}

Now, an if-then contruct can be added around the code above so that if the number of posts is less than some threshold (say 10 posts), then it's printed as normal. If the number of posts is greater than the threshold, then use the new style. Cascading several if-then staments will allow a variety of thresholds.

.<b:loop values='data:labels' var='label'>

<b:if cond='data:label.count > 10'>
.<span class='common-link'>

..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/> (<data:label.count/>)
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
...</b:if>

.</span>
<b:else/>

..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/> (<data:label.count/>)
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
...</b:if>

</b:if>

.</b:loop>

Note that you have to include all of the code for printing out links inside each if-then-else section. This is because the code does not allow a link to close outside of a section. If that doesn't make sense to you, don't worry about it - just use the code as posted.

However, there is a problem. Currently, the greater than (>) conditional does not appear to be working with Blogger Beta. When you use the code as written above, your labels widget will not appear. Hopefully Blogger's working on this.

In the meantime, the code above will work with equal to (==) and not equal to (!=), so theoretically you could write a long series of if-thens with a lot of equal to statements, but I wouldn't suggest it.

[Update] Here's another way that actually works in the current version of Blogger Beta.

• Blogger