[AJAX] AJAX Labels Cloud Reloaded

繼之前的[AJAX] AJAX Labels Cloud之後，原作者Deepak又再度的補強了「AJAX Labels」的功能囉，趕緊來瞧一瞧吧...資料來源:
Deepack -> AJAX Labels Reloaded
※新功能如下：

1. 內建分頁導覽系統(Navigation-System)，之前的Hack只能將所有同一個類別的文章同時顯示在同一頁面，若文章很多時即會吃掉很多Memory...Browser也會整個被拖慢
2. 支援在IE底下，使用以"繁體中文字"之類的 Unicode 來命名Label(標籤)!
3. 安裝方式更加簡易

※至於所展現出來的效果，請直接點選我的Blog上方"AJAX Tags Cloud"，再隨便選個分類即可一目了然...
底下直接講解如何安裝此Hack到你的Blogger中，至於有使用之前舊版本 AJAX Labels的玩家，請自行至"原著網站"看，有詳細的解說，教你如何「升級」到新版本的AJAX Labels(本人就是從舊版升級到新版本的)，要不然直接"砍掉重練"也是可行啦.. :p

Step 1. 為了以防萬一，先備份一下你原來的template吧! 再就就是編輯你的template，找到</head>這個keyword，再將底下code貼到</head>上方。<style type='text/css'>
#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;}
</style>
<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; //是否使用分頁(導灠)功能
var feedLabel = "Subscribe to"; //...該怎麼解釋呢..
var catLabel = "Sorted into:"; //...沒什麼好解釋的..
var closeLabel = "Click to close"; //...這也一樣.. XD
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />
上面5個粗體字的變數，根據個人喜好，可以自行再客制化一下.. :D
Step 2. 找到底下code <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>
Step 3. "假如" 你在sidebar有Label Widget的話，再作這一步驟，找到底下code

<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>

Step 4. 按下此Button，再隨著說明步驟，一步一步完成...

<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>

新增此Widget的目的就是，當你點選分類標籤時，更新的內容所要顯示的地方.. ^_^，看你想放哪邊就放哪邊囉!!

Step 5. 儲存範本，結束啦...快去看看吧!! 多了..Navigation-System是不是很Cool呀!