blogger:以ajax标签实现分类阅读功能

本文是是如何实现像本博客一样“分类阅读”的效果，在此之前先要安装标签云功能，然后继续下面。
第一步：首先进入控制台，把下面的代码加入你的模板里的</head>上边，]]></b:skin>下边：
<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://sisea00.googlecode.com/files/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
//maxresults - 设置一页标签做多显示的文章数
// navFlag - 是否打开标签翻页功能.
// feedLabel - 描述你的标签RSS的文字.
// catLabel - 描述你的标签的文字.
// closeLabel - 描述关闭按钮的文字.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "Subscribe to";
var catLabel = "Sorted into:";
var closeLabel = "Click to close";
//]]>
</script>
<script type='text/javascript' src='http://sisea00.googlecode.com/files/ajaxlabels.js' />

第二步：找到下面的代码，
<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>

第三步，给你的博客增加一个新的页面元素用来显示使用本hack以后会瞬间出现的标签内容。这个页面元素一般情况下是没有任何显示的，只有当你点击标签以后才会出现。强烈建议放在你的博客正文项目上方。
页面元素内部添加代码如下：

<div id="indicator" style="display:none"><img alt="Indicator" src="http://sisea00.googlecode.com/files/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>

然后就完工了：）

下面说如果你要想标签内容出现的同时隐藏正文如何修改代码：
首先把第三步的页面元素代码替换为如下代码：

<div id="indicator" style="display:none"><img alt="Indicator" src="http://sisea00.googlecode.com/files/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');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div></div>

然后把第一步的最后一个脚本

http://sisea00.googlecode.com/files/ajaxlabels.js

替换为：

http://sisea00.googlecode.com/files/ajaxla.js

在标签云第三步里找到下面代码
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
改成
a.href = 'javascript:getCat("'+t+'")'
就可以了。
还有关于sisea00.googlecode.com/files的代码你也可以下载下来上传到你的空间（也已经更新）。本文代码下载（重新上传）
升级通知
首先在第一步里找到如下代码：
<script type='text/javascript' src='http://sisea00.googlecode.com/files/prototype.js' />
替换成

<script src="http://www.google.com/jsapi" type="text/javascript"/>
<script>
google.load("prototype", "1.6");
</script>

其余的代码已经重新上传。