blogger 3.0:杀手级应用 AJAX标签全面改进版（再次升级）

首先感谢原作者Aditya给我们带来这么好的方法。昨天跟作者沟通了一下，提了点建议，作者今天就又更新了，完全可以替换博客原有的标签功能，完全的WEB2.0样式！实在太爽了！

这个hack的作用就是让大家点击标签以后，不再是把整个页面读取一遍去获取标签文章，而是直接在博客页面的该标签题目下读取全部的标签文章，并以标题形式显示该标签下的文章。
具体样式请参考我的博客右边“全部文章列表:”下的“标签文章列表:”，试着点击一个标签题目看看：）

今天更新了两个地方：A.可以自己设定标签点击前和点击后的前方图片。
B为标签下超多题目载入速度减慢的情况增加了读取中的提示图片。

安装方法:第一步，首先把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边：


<script>
//<![CDATA[

/* Belongs to Aditya Mukherjee (www.aditya-mukherjee.com)
It is licensed under a Attribution/Non-commercial/No derivative CC 2.5 license
http://creativecommons.org/licenses/by-nc-nd/2.5/
*/

function $(){
for( var i = 0, node; i < arguments.length; i++ )
if( node = document.getElementById( arguments[i] ) )
return node;
}

var _id = '';
pic1= new Image(); //preload image
pic1.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuM_A1_FPZ7fNH1r8WXue6S-8-Zd-OZ4cWxhzN3yb3Q31jqkWJswS0e5mJLAMVxXypmRsMWtSXUBQ6HD-6dQ2KxPgUuaUoGx3fyYOrdWb5GD7e76fWo38LmLzzw03ITAgDqvdhNImm_7-/s320/loading_ani2.gif";
function showLabel(name){
_id = name;
if($(name+'-expanded')) {
$(name+'-expanded').parentNode.removeChild($(name+'-expanded'));
$(name).style.textDecoration = 'none';//removes underline from closed label
$(name+'-tog').innerHTML = '+ ';//the expanding image
}
else {
$(name).style.textDecoration = 'underline';//adds underline to opened label
$(name+'-tog').innerHTML = '- ';//the contracting image
var script = document.createElement('script');
script.src = 'http://<blogname>.blogspot.com/feeds/posts/summary/-/'+name+'?alt=json-in-script&callback=makeList';
script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);
}
}

function makeList(json){
var d = document.getElementById('Label1');
var i=0, j=json.feed.entry[i];
var list = document.createElement('ul');
list.id = _id+'-expanded';
list.setAttribute('class','postList');
$(_id).parentNode.insertBefore(list, $(_id).nextSibling);

var imag = document.createElement('img');
imag.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuM_A1_FPZ7fNH1r8WXue6S-8-Zd-OZ4cWxhzN3yb3Q31jqkWJswS0e5mJLAMVxXypmRsMWtSXUBQ6HD-6dQ2KxPgUuaUoGx3fyYOrdWb5GD7e76fWo38LmLzzw03ITAgDqvdhNImm_7-/s320/loading_ani2.gif';
$(_id+'-expanded').appendChild(imag);

var frag = document.createDocumentFragment();

while(i<json.feed.entry.length){
j=json.feed.entry[i];
var t_link = document.createElement('a');
t_link.href = j.link[0].href;
t_link.title = j.summary.$t;
if(j.title.$t.length>37)
t_link.appendChild(document.createTextNode((j.title.$t).slice(0,37)+'...'));
else
t_link.appendChild(document.createTextNode(j.title.$t));

var title = document.createElement('span');
title.setAttribute('class','postTitle');
title.appendChild(t_link);

var li = document.createElement('li');
li.appendChild(document.createTextNode('- '));
li.appendChild(title);
frag.appendChild(li);
i++;
}
$(_id+'-expanded').innerHTML = '';
$(_id+'-expanded').appendChild(frag);
}

//]]>
</script>

注意把上面代码中的"http://<blogname>.blogspot.com/feeds/posts/summary/-/"这一行的<blogname>改成你的博客名称。

其他几点注意事项:
1. 如果你的单一标签的文章数超过25个，而且你又希望把标题都显示出来，那么你需要像我一样在上面的代码里修改以下定义代码：
还是修改这一行：

'http://ggpi.blogspot.com/feeds/posts/summary/-/'+name+'?max-results=999&alt=json-in-script&callback=makeList';

代码“?max-results=999&”的数字999就是定义最多能显示的文章标题是999篇，你也改成你自己想显示的数字。

2.默认设置显示的标题文字数超过37个字就会以"..."代替后面的字数，如果你要显示更长的标题名称，就要修改上面代码的这个位置:

if(j.title.$t.length>37)
t_link.appendChild(document.createTextNode((j.title.$t).slice(0,37)+'...'));
把两个“37”都改成你要显示的字数即可。

3.你也可以改成图片的样式，例如上面代码$(name+'-tog').innerHTML = '+ ';//the expanding image的“+ ”号，整体替换为<img src="http://gggpie.googlepages.com/arrow_066.gif"/>就可以变成跟我一样的图片了。
同理，$(name+'-tog').innerHTML = '- ';//the contracting image的“- ”号也能改成<img src="http://gggpie.googlepages.com/arrow_279.gif"/>
代码里的图片http://gggpie.googlepages.com/arrow_279.gif 你可以随意替换~

第二步，切换到模版，页面元素的选项，添加一个标签页面元素，放到你觉得好看的位置。

第三步：再次切换到你的模版，修改 HTML项目，然后勾选扩展窗口小部件模板，找到你刚刚添加的标签页面元素项目。
用下面的代码完整替换之：

<b:widget id='Label1' locked='false' title='标签文章列表:' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul class='elegantList'>
<b:loop values='data:labels' var='label'>
<li expr:id='data:label.name'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<span expr:id='data:label.name + "-tog"'><img src='http://gggpie.googlepages.com/arrow_066.gif'/></span><a href='#category' onclick='javascript:showLabel(this.innerHTML)'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


完工了~~~注意上面的代码这一行<span expr:id='data:label.name + "-tog"'><img src='http://gggpie.googlepages.com/arrow_066.gif'/></span>
里的http://gggpie.googlepages.com/arrow_066.gif是我定义的图片，这里是控制默认刚刚打开博客时候你每个标签题目前方显示的图片，最后改成和上面代码的“收缩标签以后显示的图片”是一个图片为最好。这样比较统一。