2007年10月7日星期日

blogger hack ajax 标签升级版功能

sample of this hack:http://hardwareonthespot.blogspot.com/


  • 简单支持了中文
  • 更快的速度
  • 支持了导航翻页功能(即在标签栏上方有了"1,2,3,4..."的翻页功能)

  • 更简单的安装方法


下面是install方法

第一步:首先把下面的code加入你的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 type='text/javascript' src='http://ggpi.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://ggpi.googlecode.com/files/ajaxlabels.js' />




文章翻页功能是根据你设置的标签最大文章数来的,你标签下有19篇文章,你设置一页最多显示5篇,则你的翻页数为4页"1 2 3 4",以此类推。

第二步:找到下面的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>


如果你希望每次点击文章下的标签能自动跳转到页首,要把脚本改换成:
<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>


若你增加了标签页面元素,那么找到标签页面元素的类似下面的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>


第三步,给你的博客增加一个新的页面元素用来显示使用本hack以后会瞬间出现的标签内容...
页面元素内部添加code如下:

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


done!:)

想标签内容出现的同时隐藏正文?
首先把第三步的页面元素code替换为:

<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://ggpi.googlecode.com/files/ajaxlabels.js

替换为:

http://gggpie.googlepages.com/ajaxla.js


即可~~

完:)


credit goes to: http://ggpi.blogspot.com/2007/02/blogger-30ajax.html
sample of this hack:http://hardwareonthespot.blogspot.com/

没有评论: