ubulog: Bloggerのラベルでタグクラウド

新しいBloggerにはラベル機能がついた。これを使ってカテゴリー分けが出来るわけだけれども、ラベル＝タグということなので、Bloggerでタグクラウドを実現してみる。

ふたつの方法がある。

TagClickというサービスを利用する
　外部サービスを利用することになる。
テンプレを修正する
　内部だけで完結する。

内部で完結する方がすっきりしていいのでこちらを採用。

Labelをクラウドに、のソース

のページを参照してテンプレートを書き換え。

]]></b:skin>
</head>
<body>

の上あたりに以下を追加。

/* Lable Cloud               (custum KNYI.Jong)
----------------------------------------------- */
#labelCloud a {
text-decoration: none;
white-space: nowrap;
line-height: 130%;
}
#labelCloud span.label_xs {
font-size : 75%;
opacity  : 0.2;
}
#labelCloud span.label_s {
font-size : 90%;
opacity  : 0.4;
}
#labelCloud span.label_m {
font-size : 120%;
opacity  : 0.6;
}
#labelCloud span.label_l {
font-size : 150%;
opacity  : 0.8;
}
#labelCloud span.label_xl {
font-size : 200%;
opacity  : 1.0;
}

次にウィジットのテンプレートを展開にチェックを入れて、

<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'"></b:widget>

あたりを探しだし、<b:widget> ~ </b:widget> の範囲を以下と置き換える。


<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'">
<b:includable id="'main'">
<b:if cond="'data:title'">
</b:if></b:includable></b:widget><h2><data:title></data:title></h2>

<div class="'widget-content'">
<span id="'labelCloud'">
<b:loop values="'data:labels'" var="'label'">
<b:if cond="'data:blog.url">
<data:label.name>
<b:else>
<b:if cond="'data:label.count"> 20'>
<a href="http://www2.blogger.com/%27data:label.url%27"><span class="'label_xl'" title="'data:label.count'"><data:label.name></data:label.name></span></a>
<b:else><b:if cond="'data:label.count"> 10'>
<a href="http://www2.blogger.com/%27data:label.url%27"><span class="'label_l'" title="'data:label.count'"><data:label.name></data:label.name></span></a>
<b:else><b:if cond="'data:label.count"> 5'>
<a href="http://www2.blogger.com/%27data:label.url%27"><span class="'label_m'" title="'data:label.count'"><data:label.name></data:label.name></span></a>
<b:else><b:if cond="'data:label.count"> 1'>
<a href="http://www2.blogger.com/%27data:label.url%27"><span class="'label_s'" title="'data:label.count'"><data:label.name></data:label.name></span></a>
<b:else>
<a href="http://www2.blogger.com/%27data:label.url%27"><span class="'label_xs'" title="'data:label.count'"><data:label.name></data:label.name></span></a>
</b:else></b:if></b:else></b:if>
</b:else>
</b:if>
</b:else></b:if></b:else></data:label.name></b:if></b:loop></span>

<b:include name="'quickedit'/">
</b:include></div>

ubulog

2007年5月3日木曜日

Bloggerのラベルでタグクラウド

Labelをクラウドに、のソース

1 件のコメント: