2007年2月11日星期日

blogger 3.0:让你的“博客归档”在收缩时也能展开查看文章标题


感谢台湾朋友hguei分享了他方法

具体样式看我的“博客归档”就知道了(注意我把默认“博客归档”名称改为了“全部文章列表:(按月归档)”),默认情况下这样子收缩是看不到月份存档内部的文章的,现在也能按小三角形看到了。

安装方法:首先确保你把“博客归档”这个页面元素添加了,并且是设置的“层次结构”“显示文章标题”。

第二步切换到你的模版,修改html项,勾选“扩展窗口小部件模板”,然后找到你刚刚添加的“博客归档”页面元素,定位下面的代码:
<li expr:class='"archivedate " + data:i.expclass'>

改成下面这样,注意红色部分:
<li expr:class='"archivedate collapsed"'>


这样你的文章就收缩了好了。但是三角形指示图片还是默认的打开状,非常怪异,所以还要:

第三步,修正三角形指示图片,定位下面的代码:
  <b:if cond='data:interval.expclass == "expanded"'>
    <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle"
+       "&amp;dir=close&amp;toggle=" + data:interval.toggleId +
"&amp;toggleopen=" + data:toggleopen'>

        <span class='zippy toggle-open'>&#9660; </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle"
+         "&amp;dir=open&amp;toggle=" + data:interval.toggleId +
"&amp;toggleopen=" + data:toggleopen'>

          <span class='zippy'>&#9658; </span>
    </a>
  </b:if>

将上面的红色代码close改成open,将上面的红色代码&#9660;改成&#9658;即可。

原文上还有关于修正三角形在IE下变大的CSS代码,我个人喜欢让三角形变大,所以不想修正。想要修正的请查看原文。

10 评论:

sz-iris 说...

...没看出和原来的有什么区别...

GG 说...

区别可大了,以前要么就是当月文章标题必须全部展开,要么就是只显示个月份,没法显示标题……

sz-iris 说...

...我真是看不出什么区别,对比你的和我的归档,怎么看怎么都感觉是一样的啊。。。。
我的没改过...

GG 说...

受不了~~仔细看看吧……

IwfWcf 说...

个人认为这个hack没有意义,我之所以设置成层次结构的博客归档就是为了让访客注意到其他文章,但如果改为这种结构,我认为访客不会主动去点击浏览的

如果是为了缩短页面长度,那还不如用下拉式菜单的

GG 说...

我觉得如果读者习惯了点击小三角形,还是有一定意义的。

原先你如果不想让文章展开一大堆又不想只剩下个月份点击会一下子刷新页面把一个月的文章都展示出来……

GG 说...

下拉菜单式的也是会一下子把一个月的文章都刷新展示出来……

这个就是不必刷新页面,而且和以前的用户习惯点击三角形一样,靠点击指示三角形展开文章~

sz-iris 说...

我错了...实在看不出...感觉真的和我那个没区别...

NeonPlanet 说...

嗯。。。 我的本来就有这个功能了。。。

NeonPlanet 说...

哦, 懂了... 呵呵, 没看清楚
确实是不一样也省地方了

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