2007年5月3日木曜日

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>

1 件のコメント:

TaKUMA さんのコメント...

リンクさせて頂きました〜