Even after doing this there was still a huge list of words running down the right side of the layout, and I really didn't like how that worked.
So, I
fixedit.
With the widget added to my layout, I then modified the HTML used so it was a little cleaner as well as matching the rest of the layout. Blogger templates seem to like using
<h2> elements for sidebar items and I like to use <h6> elements.<b:widget id='Label1' locked='false' title='By Subject' type='Label'>
<b:includable id='main'>
<span class='top'><span/></span>
<div class='content' id='by-subject'>
<b:if cond='data:title'><h6><data:title/></h6></b:if>
<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> <small><data:label.count/></small></li></b:loop></ul>
</div>
<span class='bottom'><span/></span>
</b:includable>
</b:widget>With that, I have a clean matching list of labels in the event JS is disabled.
Now for the fancy part.
I'm having jQuery split that list up into smaller lists, much like the Last 50 Posts navigation works with the dates.
Here's the JS I'm using to do that, note that it's among the things that happen after the document has loaded.
var tags = $('<ul/>');
var branch;
var label = {start:'', end:''};
var tagIndex = 0;
$('#by-subject li').each(function(){
tagIndex++;
label.end = $(this).children('a').text().toLowerCase();
switch(tagIndex){
case 1:
branch = $('<ul/>');
label.start = label.end;
break;
case 10:
tagIndex = 0;
var at = $('<li><a href="#">(' + label.start + ') -- (' + label.end + ')</a></li>');
at.children('a').click(function(){
$(this).siblings('ul').slideToggle(500);
return false;
});
branch.slideUp(1);
branch.appendTo(at);
at.appendTo(tags);
break;
}
$(this).appendTo(branch);
});
var at = $('<li><a href="#">(' + label.start + ') -- (' + label.end + ')</a></li>');
at.children('a').click(function(){
$(this).siblings('ul').slideToggle(500);
return false;
});
branch.slideUp(1);
branch.appendTo(at);
at.appendTo(tags);
$('#by-subject ul').replaceWith(tags);Basicly, the list is split up into sections of 10 items & each section is labeled with the first and last items in each section. I'll probably switch it to 20 items sometime in the future.