Tuesday, March 18, 2008

Blogger: The code for the alpha/freq taglist widget

This is the Label1 (alphabetical) widget:
<b:widget id='Label1' locked='false' title='Labels [Toggle]' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='widget-title'>
<h1>Labels (<span style='text-decoration:underline'>Alpha</span>
| <span onclick='document.getElementById("Label1").style.display="none";
document.getElementById("Label2").style.display="block"'
style='cursor:pointer;color:blue'>Freq</span>)</h1>
</div>
</b:if>
<div class='widget-content'>
<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>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
This is the Label2 (frequency-wise) widget:
<b:widget id='Label2' locked='false' title='Labels [Toggle]' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='widget-title'>
<h1>Labels (<span onclick='document.getElementById("Label2").style.display="none";
document.getElementById("Label1").style.display="block"'
style='cursor:pointer;color:blue'>Alpha</span> |
<span style='text-decoration:underline'>Freq</span>)</h1>
</div>
</b:if>
<div class='widget-content'>
<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>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
The only places the two widgets differ are:
  1. Their widget ID (Label1 vs. Label2)
  2. The code for clicking "Alpha" or "Freq"
That's all, really.

The only other step is adding something to your page's stylesheet (also through the HTML-template editor). You need to decide which of these widgets you want displayed by default. I have Label1 displayed by default, and Label2 hidden, so here's part of my stylesheet:
<style type="text/css">
#Label2 {
display: none;
}
</style>

2 comments:

Anonymous said...

japhy: this is wonderful; thank you!

Jeffrey Pinyan said...

I'm glad to see it's working for you.