2008年8月3日星期日

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

2008年10月23日更新,修正因为blogger的google api改变而造成的错误。严重感谢修正方法提供者Balflear Lee!主要就是替换原来的脚本http://ggpi.googlecode.com/files/ajaxlabels.jshttp://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


即可~~

完工:)

24 评论:

sz-iris 说...

呵呵!我已经弄好了!感觉越来越好了,非常喜欢!谢了哦!不过想问下啊,以前升级标签的那些代码还有用吗?

GG 说...

没用了,两个相互完全独立的~

禾草唐楷 说...

GG你在我那边留言说升级了测试版本,哪里升级的?我刚才访问BLOGGER似乎还是老版本和结束测试的新版本啊?怎么个意思?

匿名 说...

"要想标签内容出现的同时隐藏正文如何修改代码:
首先把第三步的页面元素代码替换为如下代码:"
那栏里面的代码如何直接放在模板里?即如何直接在代码编辑里添加这些代码,不在跳出来了的html模块中编辑。
如果要这样,那么这些代码又添加在那些语句之间呢?

GG 说...

你就先把简单的做好再说复杂的吧。我已经跟你发邮件说了,你一步步按照文章来,无需懂代码也能成功。

你把简单的做好以后,我再帮你把标签云等复杂的相关功能加上去。

GG 说...

我压缩N次一个都不能用~~

你压一个试试看,能用的话分享一下哈:-D

Cyber Knights 说...

仔细爬GG的文,把你共享的模版拿过去,搜索摇改过KEY就可以用,但是还是默认侧边栏样式,照你的文章改成了侧边和横向结合的~

同时AJAX标签文章要完全改过~照着这篇我改过后,点击文章后面的标签有效果,但是点击标签云里的标签去还是默认的跳转显示~~不知道为什么,已经把页面元素里对应的替换过了。
按照http://klcintw4.blogspot.com/2006/10/tag-cloud.html
这里的方法改的标签云,然后替换
这处
< 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 >
可是还是跳转~哪里不对吗?

...

这个老外给的CSS,在IE下显示效果还可以,但是在FF下字体就很丑,我把字体改成这个样子,IE7和FF下都还可以:
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:100%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:100%;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:100%;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:orange;float:right;border:1px solid #F5F5F5;font-size:100%;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:100%;font-weight:bold;padding:5px 0pt;text-align:center;}

就是em的地方换成100%

GG 说...

a.href = 'javascript:getCat("'+t+'")'

把标签云的那个代码改成这个

Cyber Knights 说...

搞好了~有空得学学JS

Unknown 说...

这个ajax标签功能是不是只能在旧版本的blogger上使用?新的blogger(beta blogger)不能使用?
多谢!

GG 说...

只能在新版本上使用~~~:-D

Unknown 说...

谢谢,但是我为什么找不到文章中第二步骤中讲的那些代码呢?

GG 说...

这个问题没法回答,基本模板代码找不到可能是模板出错了?

Bay 说...

\thanks

X 说...

请问如何在标签里点击显示一样的效果。

GG 说...

本文已经详细说明了你的问题,请注意看文章哦!

所罗门的瓶子 说...

我使用Hoctro的TabView Widget,效果不错,而且还有最新评论、最近文章功能

Jo Chou 说...

搞了N久才把,標簽雲和標簽升級版搞好。
謝謝GG分享。

墨尘 说...

第二步的代码找不到!

GG 说...

也可能是类似的代码,仔细看下。不过这个hack目前有点问题,还没解决~

Admin 说...

对啊,现在这个hack有问题了,不过好像已经有解决方法了。你看这里http://phydeaux3.blogspot.com/ 的标签云,没有GG的问题哦。

我不会解决这问题,所以现正用着neo的方式,只抓取文章标题,效果还好。

GG 说...

感谢你的提醒,不过那个作者的hack并没有共享,而且跟这个hack也是两个不同的概念……一个用的jqurry,一个用的protype,我是看不懂怎么改了……

GG 说...

超级感谢,我确实不懂js脚本的~~

thepplway求真 说...

请问如果我有很多标签应该如何显示?

请点击我的博客观察

谢谢

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆