blogger 3.0:超酷的ajax标签再次升级版（完全替代博客原本的标签功能）

2008年10月23日更新，修正因为blogger的google api改变而造成的错误。严重感谢修正方法提供者Balflear Lee！主要就是替换原来的脚本http://ggpi.googlecode.com/files/ajaxlabels.js为http://balflearlee-hacks.googlecode.com/files/newajaxlabel.js即可。

2008年8月3日更新，更新原因见此。

感谢作者Deepak再次升级了他的ajax标签hack，原文请点击这里察看。

主要改进了以下几点：
简单支持了中文（跟我先前引用的网友的支持方法不同，代码更简洁）
更快的读取速度
支持了导航页码功能（即在标签栏上方有了“1，2，3，4...”的翻页功能）
无需修改脚本自由定制说明文字
更简单的安装方法

另外在我的要求下，作者修改了代码，现在有两种显示方式，一种是原作者文章的显示方式，一种在显示标签结果的情况下默认隐藏文章部分。（原来夏菲拉提供的那个方法不适用新的代码了。。。搞了半天还是等作者把修改代码的方法发给我……）

下面是安装方法：
第一步：首先把下面的代码加入你的xml模板里的</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 src="http://www.google.com/jsapi" type="text/javascript"/>
<script>
google.load("prototype", "1.6");
</script>
<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://balflearlee-hacks.googlecode.com/files/newajaxlabel.js' />

注意如果你已经使用了prototype.js的话，那么无需再安装上面代码的prototype.js脚本了。很大63k阿。。。
新更新就是解决这个问题……大家仔细看更新的代码，主要就是把原来的prototype.js脚本代码替换为下面这一段代码：


<script src="http://www.google.com/jsapi" type="text/javascript"/>
<script>
google.load("prototype", "1.6");
</script>
来提高读取速度。另外如果你已经使用了杀手级应用，把横向和侧边式ajax搜索结合起来放进你的博客这个技巧的话，你的博客代码里已经有了

<script src="http://www.google.com/jsapi?key=ABQIAAAAWnca3cebCQY1AVQgCmo_BRRexG7zW5nSjltmIc1ZE-b8yotBWhT99ZWGANTblVeVm16pTdxk3-Ao4w" type="text/javascript"/>
这行代码的话，就可以把

<script src="http://www.google.com/jsapi" type="text/javascript"/>这一行代码去掉了。重复了～通用的！

文章翻页功能是根据你设置的标签最大文章数来的，你标签下有19篇文章，你设置一页最多显示5篇，则你的翻页数为4页“1 2 3 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>


如果你希望每次点击文章下的标签能自动跳转到页首，要把脚本改换成：
<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' rel='tag'><data:label.name/></a>


如果你增加了标签页面元素，那么你还可以找到标签页面元素的类似下面的代码：
<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>


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

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


然后就完工了：）

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

<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');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://balflearlee-hacks.googlecode.com/files/newajaxlabel.js

替换为：

http://ggpi.googlecode.com/files/labelf.js


即可~~

完工：）