Loading...背景知识：
Ajax-Asynchronous JavaScript and XML- 异步javascript和XML。是一种web2.0的技术，简单的说就是一种刷新html页面的局部区域而不用重新加载整个html页面的异步通讯技术。主要通过xhr(xmlHttpRequest)在幕后工作。现在ajax的工具和框架无数，其中不乏简单之作，比如prototype，jquery，dojo等。而本文中的技术就是用prototype1.5来实现的。支持中文的label（标签）。 技巧源自于 印度 Deepak' AJAX Labels: Updated 一文!
实现功能：
1.请大家登录blogger后，到达模板的html编辑页面（模板->修改html）。确保“扩展窗口小部件模板”这个复选框被选中！
2.在hmtl的<head> </head> 中间加入如下代码（推荐添加在</head>上方）：
<!-- Begin AJAX Categories JS -->
<script src='http://intro.thethirdpart.googlepages.com/prototype.js' type='text/javascript'/>
<script src='http://intro.thethirdpart.googlepages.com/ajax-label.js' type='text/javascript'/>
<!-- End AJAX Categories JS -->
3.紧跟着上面的代码，加入如下css内容：
<!-- Begin AJAX Categories Style -->
<style type='text/css'>
#indicator {position: absolute;z-index: 10000;padding: 15px 0;top: 22em;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;}
</style>
<!-- End AJAX Categories Style -->
4.在html模板中找到如下内容：
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a xpr:href='data:label.url'><data:label.name/></a>
</b:if> (<data:label.count/>) </li>
</b:loop>
将上面蓝色部分的内容替换成下面的内容：
<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"'><data:label.name/></a>
5.保存模板
6.点选页面元素来到布局面板。添加一个Html/JavaScript页面元素，并copy下面的内容到元素的内容中，保持标题为空，确定！
<div id="indicator" style="display: none;"><img alt="Indicator" src="http://intro.thethirdpart.googlepages.com/indicator.gif" /> Loading...</div>
<div id='search-result' style='display:none'></div>
7.刷新你的主页，查看效果吧 呵呵。
更新1:从原文作者Deepak的blog得知,ajax label已经更新。新增的特性包括如下：
1.内建页面导航
2.更好的用户自定义能力
3.在IE下支持unicode编码
4.更加友好的安装方式（减少了拷贝/修改模板的次数）
升级步骤大家可以参考原文，如需要帮助请留言。感谢大家的关注，特别感谢GG的友好提醒！
更新2:GG已经对原文进行了翻译。感谢GG的辛勤劳动喔！
为blogger创建一个Ajax Label (支持中文)
标签： Blogger指南与技巧
订阅：
博文评论 (Atom)
2 评论:
作者更新了，我不想翻译了~~
交给你第一个华语翻译了：文章点击此处
算了，等这么多天等得不耐烦，我还是自己翻译了……
翻译文章点击此处。
发表评论