2007年2月26日

Blogger Hacked: AJAX Labels Reloaded

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

我在這將方法稍做解釋:
1、進入編輯範本,打開小裝置範本,將下列程式碼加入]]></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。

2、接著尋找下列程式碼:<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>


3、在範本中找到你的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>


4、你可以到原作者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轉為其他用途了。
UpData:2/27
修正一些顯示上的錯誤,如果你在2/27以前曾參考本文,請重新進行步驟2、3、4。
參考資料:Blogger Hacked: AJAX Labels Reloaded