Josh's Note: 星期一, 2月 26, 2007

曾經使用在我Blog的Header下方的Tab的人，一定知道可以預覽該Label的前五篇文章，我是利用Kaie's Blog的[AJAX] AJAX Labels Cloud再上如何將你的Label做成Tabs所製作而成，今天在原作者Deepak那發現他又將Ajax Label的功能加強，不但增加分頁的功能，讓預覽不再只限於五篇，而且安裝更方便，並且修正在IE下的編碼錯誤。

我在這將方法稍做解釋：
１、進入編輯範本，打開小裝置範本，將下列程式碼加入]]></b:skin>之前：

#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}

將下列程式碼加入</head>之前：

<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag    - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel  - Text to show for the label feed link.
// catLabel   - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5;
var navFlag = 1;   //ON by default
var feedLabel = "標籤訂閱";
var catLabel = "標籤:";
var closeLabel = "[x]關閉";
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

其中紅色部份可以自行設定，maxresults – 每一頁所顯示的筆數，navFlag – “1”表示開啟分頁“0”表示關閉；如果你之前已經有如入Ajax Label請跳到步驟4。

２、接著尋找下列程式碼：

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

取代為：

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

３、在範本中找到你的Label1這個widget，找到下列的程式碼：

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>

取代為：

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

４、你可以到原作者Blog的步驟4，按下來新增一個Html/Javascript的widget以便顯示Ajax Label的搜尋結果，並儲存範本；或者自行新增，將下列程式碼加入你自行新增的widget內：

<div id="indicator" style="display:none">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/>
Loading...</div>
<div id="search-result" style="display:none"><a name="sres"></a>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script>
</div><div id="show-result"></div>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script></div></div>

如果你之前曾經加入過Ajax Label，請先移除舊的widget，再進行此步驟。

因為之前的版本最多只能顯示5筆，所以我才保留Label Cloud，另外再加入一個Tab來使用Ajax Label，套用這個版本後，可能要考慮將Tab移除或者將Tab轉為其他用途了。