Bloggerのラベルウィジェットのカスタマイズ

ラベルウィジェットを設置したのだが
ラベルを表示させると縦に羅列されて、
サイドバー以外に設置する場合は
あまりにもスペースを取りすぎるので
カスタマイズしました。
ラベルウィジェト自体はHTMLのリストタグを
使って構成されているので
CSSをいじって横に並べるようにしました。
floatを使ったリストの基本的な横配置です。

.list-label-widget-content ul li{
    float: left;
    margin-right: 3px;
    white-space: nowrap;
}

これで置いてみるとラベル名と()で囲まれた投稿数が半角スペース1つ分くらい空いていて
投稿数が左右どちらのラベルに対応しているかわかりにくかったのでカンマを挟んで、マージンを設定しました。

<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<a expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=rss"' expr:title='data:postLabelsLabel + " " + data:label.name + " (RSS)"'><data:label.count/></a>),</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<a expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=rss"' expr:title='data:postLabelsLabel + " " + data:label.name + " (RSS)"'><data:label.count/></a>),</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

なぜか、white-space: nowrap; を設定しないとIE7以下で正常に表示されません。
コレを取るとリストの表示幅終端付近で押しつぶされたタグが表示されるので必須です。

追記(2012/03/31)
ラベルカウント部分にラベル毎のフィードへのリンクを追加しました。
参考：Windup T: Blogger - ラベル別のフィード配信