Saturday, January 12, 2008

Fancy Blogger Labels Widget

I just noticed Blogger has a post labels widget the other day. After adding it to my layout I discovered I was using quite a few one-time-use labels for my posts. I spent a little while going through my labels & trying to consolidate some of the one-timers into better upper-level groups.
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 fixed it.

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.

4 comments:

Harley Pebley said...

Very cool! This was exactly what I was looking for. Thanks for sharing.

To make it more usable for a wider audience, you might want to give a bit more information on how to set this up. I had to view the source for your page to see how what you put on the blog related to the actual template. There were pieces missing from the blog post that I found in the source. As a software developer I was able to get things running, but for an average blogger, it'd probably be a bit overwhelming.

Anyway, thanks again for sharing.

Cheers.

Daniel said...

i agree with what harley pebbley said.

Sarah Stewart said...

Thank you for the post. I want to exactly what you are suggesting, reduce my labels to no more than my top 10. But I have no html knowledge at all, and I am afraid I am not sure how to proceed from here - do I copy the html you have posted here or what. I would be really grateful if you, or anyone would help. thank you very much, Sarah

Joe said...

Just a note here, I ended up dropping the label widget from my sidebar because I wasn't seeing much activity through it from Analytics.