BLOGGER上的AJAX应用

注意添加这两个效果之后，博客打开速度有所下降，记得装酷是要付出代价的。

1.Ajax搜索
原作者GG派，我把代码删减了，只留下博客的搜索结果，算是大材小用了：），要加上其他内容请查看原文。
第一步：点击这里，输入你的博客地址，同意google条款，申请一个google AJAX API key。
第二步：COPY下面的代码，放在 ]]></b:skin>之后，</head>之前
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet'
type='text/css'/>
<style type='text/css'>
.gsc-control {
width: 95%;
}
</style>
<script src='http://www.google.com/uds/api?
file=uds.js&v=1.0&key=你申请到的KEY' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
// web search, open, alternate root
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere_else"));
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("你的博客名称");
blogSearch.setSiteRestriction("http://你的网址.blogspot.com");
searchControl.addSearcher(blogSearch, options);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("search_control"));
// execute an inital search
searchControl.execute(initSearch);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
第三步，切换到页面元素，弹出消息框，确定忽略，烦人的是以后到这里都会弹出这个消息框。
新建两个页面元素，放进以下代码：
下面代码放进的页面元素显示搜索框，可以改为任意你喜欢的图片，或者不显示任何图片：
<div id="search_control"><img
src="http://jrchen@82.googlepages.com/wbbar.gif"/></div>
下面代码放进的页面元素显示搜索结果，同样可以加入HTML语言：
<div id="somewhere_else"></div>
保存完成。

2.Ajax 标签
原作者Deepak，点击这里查看原文，由GG派改进。
第一步：COPY 下面代码 ，放在 ]]></b:skin>之后，</head>之前：
<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:white;border:1px solid #AAAAAA;width:180px;left:55%;text-align:center;}
* html #indicator{ /*IE6 only*/
position:absolute;
}
#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:128%;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;font-weight:bold;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.2em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script src='http://jrchen@82.googlepages.com/prototype.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// 用户自定义参数
// ----------------------------
var maxresults = 5;//每页打开的文章数
var navFlag = 1; //是否打开翻页功能，不打开设为0
var feedLabel = "Subscribe to";//RSS标签文字
var catLabel = "Sorted into:";//描述分类标签文字
var closeLabel = "Click to close";//关闭按钮文字，可以使用HTML语言
//]]>
</script>
<script src='http://jrchen@82.googlepages.com/ajaxla.js' type='text/javascript'/>
第二步：找到下面的代码：
<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: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>
第三步，增加一个新的页面元素用来显示点击标签后的结果，建议放在帖子上方。
页面元素内部添加代码如下：
<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>
保存完成。